Component

Select

Displays a list of options for the user to pick from — triggered by a button.

SelectTriggersize: sm · default · lg · xl (default)

SelectContentalignItemWithTrigger: boolean (default true)

SelectGroup / SelectLabel / SelectSeparatororganize items into sections

Playground

Size— size

Disabled— disabled

alignItemWithTrigger={false} — content opens below, not aligned to selected item

entire select disabled

individual item disabled

Country

Please select a country.

8 semantic tokens consumed by this component.

--popoverPopover

bg-popover

--popover-foregroundPopover Foreground

text-popover-foreground

--accentAccent

bg-accenttext-accentborder-accent

--accent-foregroundAccent Foreground

text-accent-foreground

--inputInput

bg-inputborder-input

--ringRing

ring-ringring

--destructiveDestructive

bg-destructivetext-destructiveborder-destructivering-destructive

--muted-foregroundMuted Foreground

text-muted-foreground