Forms

Select

Choose one option from a short, known list.

Importimport { Select } from "@/components/ui/Select";
Sourcesrc/components/ui/Select

For one choice from a short, known list. Past roughly a dozen options a reader needs to search rather than scan — use Command instead. For a set of three or four worth showing in full, prefer RadioGroup.

Default

Assembled from four parts. SelectValuerenders the chosen item's label — it caches the label against its value, so the trigger still reads correctly after the content unmounts.

Uncontrolled

Pass defaultValue and let the component own the state. Open state has the same pair: open / onOpenChange, or defaultOpen.

Disabled

Props

Select

PropTypeDefaultDescription
valuestring—Controlled value.
defaultValuestring—Uncontrolled initial value.
onValueChange(value: string) => void—Called when an item is chosen.
disabledboolean—Disables the trigger.
open / defaultOpen / onOpenChangeboolean | (open: boolean) => void—Control the open state as well as the value.

SelectTrigger

PropTypeDefaultDescription
hideChevronbooleanfalseDrops the chevron for triggers that are already obviously a menu.

SelectItem

PropTypeDefaultDescription
valuestring—Required. The value this item selects.
disabledboolean—Skipped by keyboard navigation.