Select
Displays a list of options for the user to pick from—triggered by a button.
Installation
pnpm dlx shadcn@latest add https://reui.io/r/select.json
Examples
Default
Group
Disabled
Disabled Option
Size
Indicator Position
Custom Indicator
Icon
Status
Badge
Avatar
Form
API Reference
This component is built using Radix UI Select primitives. For detailed information, please visit the full API reference.
Select
This component is based on the Select.Root primitive and includes the following custom props:
| Prop | Type | Default |
|---|---|---|
indicatorPosition | ||
indicatorVisibility | ||
indicator |
SelectTrigger
This component is based on the Select.Trigger primitive and includes the following custom props:
| Prop | Type | Default |
|---|---|---|
size | ||
className |
SelectContent
This component is based on the Select.Content primitive and includes the following custom props:
| Prop | Type | Default |
|---|---|---|
position | ||
className |
SelectItem
This component is based on the Select.Item primitive and includes the following custom props:
| Prop | Type | Default |
|---|---|---|
className |
The component inherits indicator position and visibility settings from the Select context.
SelectLabel
This component is based on the Select.Label primitive and includes the following custom props:
| Prop | Type | Default |
|---|---|---|
className |
SelectSeparator
This component is based on the Select.Separator primitive and includes the following custom props:
| Prop | Type | Default |
|---|---|---|
className |
SelectGroup
This component is based on the Select.Group primitive. For full details, visit the official documentation.
SelectValue
This component is based on the Select.Value primitive. For full details, visit the official documentation.
SelectScrollUpButton
This component is based on the Select.ScrollUpButton primitive. For full details, visit the official documentation.
SelectScrollDownButton
This component is based on the Select.ScrollDownButton primitive. For full details, visit the official documentation.