Select
Displays a list of options for the user to pick from—triggered by a button.
Installation
npm i @radix-ui/react-selectUsage
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
import {
Select,
SelectContent,
SelectGroup,
SelectItem,
SelectLabel,
SelectTrigger,
SelectValue,
} from "@/components/ui/select"
export function SelectDemo() {
return (
<Select>
<SelectTrigger className="w-[180px]">
<SelectValue placeholder="Select a fruit" />
</SelectTrigger>
<SelectContent>
<SelectGroup>
<SelectLabel>Fruits</SelectLabel>
<SelectItem value="apple">Apple</SelectItem>
<SelectItem value="banana">Banana</SelectItem>
<SelectItem value="orange">Orange</SelectItem>
<SelectItem value="grape">Grape</SelectItem>
<SelectItem value="strawberry">Strawberry</SelectItem>
</SelectGroup>
</SelectContent>
</Select>
)
}Examples
Grouped Select
Disabled
Disabled Item
Disabled Select
Props
| Component | Props | Description |
|---|---|---|
| Select | SelectPrimitive.SelectProps defaultValue?: string value?: string onValueChange?: (value: string) => void disabled?: boolean | The root component for a select. |
| SelectTrigger | SelectPrimitive.SelectTriggerProps | The trigger that toggles the select popover. |
| SelectValue | SelectPrimitive.SelectValueProps placeholder?: string | The value displayed in the select trigger. |
| SelectContent | SelectPrimitive.SelectContentProps position?: "popper" | "item-aligned" | The dropdown content displayed when the select is open. |
| SelectGroup | SelectPrimitive.SelectGroupProps | Groups select items together with an optional label. |
| SelectLabel | SelectPrimitive.SelectLabelProps | A label for a group of select items. |
| SelectItem | SelectPrimitive.SelectItemProps value: string disabled?: boolean | A selectable item displayed in the select content. |
| SelectSeparator | SelectPrimitive.SelectSeparatorProps | A visual separator between select items or groups. |