Downcity
Components

Input

Use for single-line text, search, and short configuration values

Input

Input is the main single-line text field.

Import

import { Input, Label } from "@downcity/ui";

Basic Example

import { Input, Label } from "@downcity/ui";

export function ModelInput() {
  return (
    <div className="flex flex-col gap-2">
      <Label htmlFor="model">Model</Label>
      <Input id="model" placeholder="gpt-5.4" />
    </div>
  );
}

Good Fits

  • Single-line text
  • Search fields
  • Model names, paths, keys, and short settings

Usage Notes

  • Pair it with Label
  • Use Textarea for longer content
  • Use aria-invalid for invalid state semantics

DropdownMenu

Use for contextual actions, grouped commands, and lightweight menus

Label

Use for field titles, form naming, and accessible input labeling

Table of Contents

InputImportBasic ExampleGood FitsUsage Notes