Displays a list of options for the user to pick from, triggered by a button.
import {
Select,
SelectContent,
SelectGroup,
SelectItem,
SelectTrigger,
SelectValue,
} from "@/components/ui/select"
const items = [
{ label: "Light", value: "light" },
{ label: "Dark", value: "dark" },
{ label: "System", value: "system" },
]
<Select placeholder="Theme">
<SelectTrigger className="w-[180px]">
<SelectValue />
</SelectTrigger>
<SelectContent>
<SelectGroup>
{items.map((item) => (
<SelectItem key={item.value} id={item.value}>
{item.label}
</SelectItem>
))}
</SelectGroup>
</SelectContent>
</Select>
Use the following composition to build a Select:
Select
├── SelectTrigger
│ └── SelectValue
└── SelectContent
├── SelectGroup
│ ├── SelectLabel
│ ├── SelectItem
│ └── SelectItem
├── SelectSeparator
└── SelectGroup
├── SelectLabel
├── SelectItem
└── SelectItem
Use SelectGroup, SelectLabel, and SelectSeparator to organize items.
A select with many items that scrolls.
Add the data-invalid attribute to the Field component and the isInvalid prop to the SelectTrigger component to show an error state.
<Field data-invalid>
<FieldLabel>Fruit</FieldLabel>
<Select isInvalid>{/* ... */}</Select>
</Field>
Please select a fruit.
Use the Autocomplete component from React Aria to add search support.
To enable RTL support, see the RTL configuration guide.
See the React Aria Select documentation.