Select

A dropdown select built on Radix primitives. Provides a styled trigger, animated content panel, and accessible keyboard navigation.

Basic

<Select>
  <SelectTrigger className="w-[200px]">
    <SelectValue placeholder="Pick a fruit" />
  </SelectTrigger>
  <SelectContent>
    <SelectItem value="apple">Apple</SelectItem>
    <SelectItem value="banana">Banana</SelectItem>
    <SelectItem value="cherry">Cherry</SelectItem>
  </SelectContent>
</Select>

Disabled

<Select disabled>
  <SelectTrigger className="w-[200px]">
    <SelectValue placeholder="Disabled" />
  </SelectTrigger>
  <SelectContent>
    <SelectItem value="a">Option A</SelectItem>
  </SelectContent>
</Select>

API Reference

Prop	Type	Default	Description
`value`	`string`	—	The controlled value of the select.
`onValueChange`	`(value: string) => void`	—	Callback fired when the selected value changes.
`defaultValue`	`string`	—	The default value when uncontrolled.
`disabled`	`boolean`	`false`	When true, prevents interaction with the select.
`placeholder`	`string`	—	Placeholder text displayed via SelectValue when no value is selected.