Select

shadcn/ui

Dropdown for choosing one option from a list. Four sub-components: SelectTrigger, SelectValue, SelectContent, SelectItem.

@/components/ui/select

Variants

Default

With default value

Disabled

With custom items

Status

Priority

Pass custom JSX as SelectItem children — works with any component

Sub-components

Component	Role
Select	Root wrapper — holds open/close state
SelectTrigger	The visible button that opens the dropdown
SelectValue	Shows the selected value or placeholder text
SelectContent	The dropdown list (rendered in a portal)
SelectItem	A single option — value prop is required
SelectLabel	Non-selectable group heading inside SelectContent
SelectSeparator	Horizontal divider between groups

In context — filter bar

Filter by

Compact selects use h-7 text-xs to match the toolbar height

On this page