Default
Grouped Items
Disabled
Props
| Prop | Type | Description |
|---|---|---|
| defaultValue | string | Initially selected value |
| value | string | Controlled value |
| onValueChange | (value: string) => void | Change handler |
| disabled | boolean | Disable interaction |
Sub-components
| Component | Description |
|---|---|
| Select.Trigger | Button that opens the dropdown |
| Select.Value | Displays the selected value |
| Select.Content | Dropdown content container |
| Select.Item | Selectable option (requires value prop) |
| Select.Group | Groups related items |
| Select.Label | Non-interactive label within a group |
| Select.Separator | Visual divider between groups |
Usage
<Select defaultValue="apple">
<Select.Trigger>
<Select.Value placeholder="Pick a fruit" />
</Select.Trigger>
<Select.Content>
<Select.Item value="apple">Apple</Select.Item>
<Select.Item value="banana">Banana</Select.Item>
</Select.Content>
</Select>