Select

The trigger matches Input: 40px, 12px padding and a 20px caret. size sm is the compact 32px trigger used in footers and pagination.

Figma: 10 / Components / Select

Usage

Source: src/components/ui/select.tsx

import {
    Select,
    SelectContent,
    SelectItem,
    SelectTrigger,
    SelectValue
} from '@/components/ui/select'

<Select defaultValue='Awaiting review'>
    <SelectTrigger><SelectValue /></SelectTrigger>
    <SelectContent>
        <SelectItem value='Awaiting review'>Awaiting review</SelectItem>
        <SelectItem value='Approved'>Approved</SelectItem>
    </SelectContent>
</Select>

Examples

Groups and placeholder

Group long lists under labels.

Small

The 32px trigger for table footers.

When to use

When to reach for it, and when to use something else.

Use it for

Choosing one value from six or more options.

Status changes in drawer footers.

Avoid

Fewer than five options that fit on screen; use a RadioGroup or segmented Tabs.

API reference

SelectTrigger

Prop	Type	Default	Description
size	'sm' \| 'default'	'default'	32px or 40px.

SelectContent

Prop	Type	Default	Description
side	'top' \| 'bottom'	'bottom'	Where the list opens.
align	'start' \| 'center' \| 'end'	'start'	Alignment to the trigger.

PreviousRadioGroup NextSeparator