Select
FormsA dropdown select input for choosing from a list of options. Use selects when you have a predefined list of options and limited screen space.
Import
import { Select } from "@/components/ui/select";Usage
Basic Select
Standard dropdown select
With Placeholder
Select showing placeholder option
With Error
Select showing error state
Please select a product
Disabled
Select in disabled state
API Reference
label—stringLabel text displayed above the select
options*—SelectOption[]Array of options with value, label, and optional disabled
value—stringControlled selected value
defaultValue—stringDefault selected value (uncontrolled)
onValueChange—(value: string) => voidHandler called when selection changes
placeholder—stringPlaceholder text when no option is selected
error—stringError message to display below the select
disabledfalsebooleanWhether the select is disabled
| Prop | Type | Default | Description |
|---|---|---|---|
label | string | — | Label text displayed above the select |
options* | SelectOption[] | — | Array of options with value, label, and optional disabled |
value | string | — | Controlled selected value |
defaultValue | string | — | Default selected value (uncontrolled) |
onValueChange | (value: string) => void | — | Handler called when selection changes |
placeholder | string | — | Placeholder text when no option is selected |
error | string | — | Error message to display below the select |
disabled | boolean | false | Whether the select is disabled |