Select
Displays a list of options for the user to pick from—triggered by a button.
Made by shadcn
Loading component...
When to use
Select components provide single-option selection from a list of options. Use this decision tree:
Installation
Usage
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from "@/components/ui/select"<Select>
<SelectTrigger className="w-[180px]">
<SelectValue placeholder="Theme" />
</SelectTrigger>
<SelectContent>
<SelectItem value="light">Light</SelectItem>
<SelectItem value="dark">Dark</SelectItem>
<SelectItem value="system">System</SelectItem>
</SelectContent>
</Select>Anatomy
The Select component is built with Radix UI primitives:
<Select> (Root Container)
├── <SelectTrigger> (Button)
│ ├── <SelectValue> (Placeholder/Selected)
│ └── <ChevronDown> Icon
├── <SelectContent> (Dropdown)
│ ├── Portal rendering
│ ├── Positioning system
│ └── <SelectItem> (Options)
│ ├── Checkmark indicator
│ └── Item text
└── Keyboard/Mouse handlingProps
Examples
Scrollable
Loading component...
Form
Loading component...
Credits
Built by malinskibeniamin. The source code is available on GitHub.