Components

Select

Choose one value from a grouped set of options

Select

Select provides a compact trigger, keyboard navigation, and grouped popup options.

Example

import {
  Select,
  SelectContent,
  SelectGroup,
  SelectItem,
  SelectLabel,
  SelectTrigger,
  SelectValue,
} from "@downcity/ui";

export function ModelSelect() {
  return (
    <Select defaultValue="balanced">
      <SelectTrigger>
        <SelectValue placeholder="Select a mode" />
      </SelectTrigger>
      <SelectContent>
        <SelectGroup>
          <SelectLabel>Response mode</SelectLabel>
          <SelectItem value="concise">Concise</SelectItem>
          <SelectItem value="balanced" description="Balance speed and context">
            Balanced
          </SelectItem>
        </SelectGroup>
      </SelectContent>
    </Select>
  );
}

Composition Rules

  • Keep every SelectItem inside a SelectGroup.
  • SelectTrigger supports default and sm sizes.
  • Use a Combobox for searchable or very large option sets.

Label

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

Slider

Select a value from a continuous or stepped range

Table of Contents

SelectExampleComposition Rules