Select

Usage

import {
  Select,
  SelectContent,
  SelectGroup,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@zynactra/ui/select"

const items = [
  { label: "Light", value: "light" },
  { label: "Dark", value: "dark" },
  { label: "System", value: "system" },
]

<Select items={items}>
  <SelectTrigger className="w-[180px]">
    <SelectValue placeholder="Theme" />
  </SelectTrigger>
  <SelectContent>
    <SelectGroup>
      {items.map((item) => (
        <SelectItem key={item.value} value={item.value}>
          {item.label}
        </SelectItem>
      ))}
    </SelectGroup>
  </SelectContent>
</Select>

Examples

Controlled

Pass value and onValueChange when something outside the Select reads or sets the choice.

Object values

When options are records from your API, use the whole object as the value. itemToStringLabel gives the trigger its text, and isItemEqualToValue matches by id, since a refetched object is never the same object.

Placeholder and disabled items

The item with value: null in items is the placeholder. Disable options someone can't pick yet instead of hiding them, and say why.

Invalid

Set data-invalid on the Field and aria-invalid on the SelectTrigger, and swap the help text for a FieldError. For forms with several fields, see the Forms pattern.

Guidelines

• Fewer than 5 options? Use RadioGroup so all choices are visible.
• More than 15? Use Combobox so people can type.
• Never put the id in the trigger. If the value is an id, map it to its label with items or itemToStringLabel.

API reference

Behaviour and props come from Base UI. See the Base UI Select docs.