Skip to content
Forms

Select

Picks one value from a list. Seed never uses the native select.

import { Select, SelectTrigger, SelectContent, SelectItem, SelectGroup, SelectLabel, SelectSeparator } from "@flinbu/seed";

In a Field, with groups and descriptions

New tokens get a value in this mode first.

Pick where the token goes.

import { Field, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectSeparator, SelectTrigger } from "@flinbu/seed";
import { Moon, Palette, Ruler, Sun } from "lucide-react";

<div className="flex w-full max-w-xs flex-col gap-base">
  <Field label="Mode" hint="New tokens get a value in this mode first.">
    <Select defaultValue="light">
      <SelectTrigger />
      <SelectContent>
        <SelectItem value="light" icon={<Sun />}>Light</SelectItem>
        <SelectItem value="dark" icon={<Moon />}>Dark</SelectItem>
      </SelectContent>
    </Select>
  </Field>
  <Field label="Collection" error="Pick where the token goes.">
    <Select>
      <SelectTrigger placeholder="Choose a collection" />
      <SelectContent>
        <SelectGroup>
          <SelectLabel>Semantic</SelectLabel>
          <SelectItem value="color" icon={<Palette />} description="148 tokens">Color</SelectItem>
          <SelectItem value="space" icon={<Ruler />} description="24 tokens">Spacing</SelectItem>
        </SelectGroup>
        <SelectSeparator />
        <SelectItem value="primitives" disabled>Primitives (read only)</SelectItem>
      </SelectContent>
    </Select>
  </Field>
</div>

Use it for

  • 5 to 15 options people recognize by name.
  • Grouped options with labels and short descriptions.

Use something else for

  • 2 to 4 options people should compare: use RadioGroup.
  • Long lists people search: use Combobox (coming soon).

Props

PropTypeDefaultDescription
value / defaultValuestring–Selected value.
onValueChange(value: string) => void–Called on change.
SelectTrigger: placeholderReactNode–Shown when nothing is selected.
SelectTrigger: size'sm''md''lg''md'Same heights as Input.
SelectTrigger: leftIconIconProp–Icon at the start of the field. An element like <Search /> (works in server components) or, in client components, the component itself.
SelectTrigger: invalidboolean–Error border. Field sets it from error.
SelectItem: iconIconProp–Leading icon. An element like <Search /> (works in server components) or, in client components, the component itself.
SelectItem: descriptionReactNode–A second line.
SelectItem: disabledboolean–Shown but can't be picked.

Accessibility

  • Built on Radix Select: role combobox with a listbox, arrow keys, typeahead, Home and End.
  • Inside Field the trigger gets its label, hint and error, and aria-invalid.