Select
Displays a list of options for the user to pick from — triggered by a button.
Installation
pnpm dlx shadcn@latest add https://dga-registry.vercel.app/r/select.jsonBasic Select
Simple select examples with different options and disabled state.
Select Sizes
Different size variants of the select component.
Grouped Select
Select with grouped options, labels, and separators.
Select with Icons
Select items with icon prefixes.
Controlled Select
Select with controlled state and value display.
Form Examples
Real-world form scenarios using the Select component.
Station Configuration
Data Query
Width Variations
Select with different width configurations.
Props
Select
| Prop | Type | Default | Description |
|---|---|---|---|
defaultValue | string | — | The default selected value |
value | string | — | Controlled selected value |
onValueChange | (value: string) => void | — | Callback when value changes |
disabled | boolean | false | Disables the select |
SelectTrigger
| Prop | Type | Default | Description |
|---|---|---|---|
size | "default" | "sm" | "default" | Size variant |
className | string | — | Additional CSS classes |
SelectItem
| Prop | Type | Default | Description |
|---|---|---|---|
value | string | — | The value of the item |
disabled | boolean | false | Disables this item |
children | ReactNode | — | Item content (text, icons) |