vert-ui
Browse docs
All components

Select

Single-value listbox trigger with typeahead and the same menu-item semantics as Dropdown Menu.

Preview

Live preview

Selected: apple

Usage

Examples

Controlled select

const [fruit, setFruit] = useState("apple")

<Select value={fruit} onValueChange={setFruit}>
  <SelectTrigger aria-label="Fruit">
    <SelectValue placeholder="Pick a fruit" />
  </SelectTrigger>
  <SelectContent>
    <SelectItem value="apple">Apple</SelectItem>
    <SelectItem value="banana">Banana</SelectItem>
  </SelectContent>
</Select>

Grouped and invalid

<Select defaultValue="">
  <SelectTrigger invalid aria-label="Plan">
    <SelectValue placeholder="Choose a plan" />
  </SelectTrigger>
  <SelectContent>
    <SelectGroup>
      <SelectLabel>Plans</SelectLabel>
      <SelectItem value="free">Free</SelectItem>
      <SelectItem value="team">Team</SelectItem>
    </SelectGroup>
  </SelectContent>
</Select>

Reference

Props

PropTypeDefaultDescription
value / defaultValuestring—Controlled or uncontrolled selection.
onValueChange(value: string) => void—Fires when the user picks an item.
disabledbooleanfalseBlocks opening the list and dims the trigger.
SelectTrigger size"sm" | "md" | "lg""md"Height and type scale of the button.
SelectTrigger invalidbooleanfalseSwitches to the destructive ring for validation errors.
SelectValue placeholderReactNode—Shown while no item is selected.
SelectItem value(required)string—Value reported by onValueChange; must be unique within the list.

Accessibility

Accessibility notes

  • The trigger renders role="combobox" with aria-expanded and aria-controls pointing at the listbox.
  • Type a letter to jump to the next matching item; Home/End jump to the list ends.
  • Escape closes the list and returns focus to the trigger; arrow keys open it when closed.
  • SelectValue is required: without it the trigger has no accessible name — also pass aria-label when no visible label exists.
  • SelectLabel must sit inside a SelectGroup; it becomes the group's accessible name.
  • Use invalid together with an inline error message referenced by aria-describedby.