Select

A control for choosing one or more options from a list.

Anatomy

Pair a trigger with a popup of items. Reach for it when the user picks from a small, known set, like a model, a tone, or a target. For free-form lookups, prefer a combobox.

Group items with a label and a separator when the list grows past a handful.

For multi-select, pass multiple to the root. The trigger shows the first value with a chip that counts the rest.

API

Reference for each part of the component, including its available props and behavior.

Select

The root. Holds the value, tracks open state, and coordinates keyboard navigation. Pass multiple for multi-select.

SelectTrigger

The control that opens the popup. Lays out the value on the leading edge and a chevron on the trailing edge. The variant prop picks between three surfaces.

SelectValue

Renders the current value inside the trigger. Falls back to the placeholder when the value is empty. Accepts a single value, a multi-select array, or a rich object with label, value, and an optional icon.

SelectPopup

The floating panel. Takes positioner props inline so you can set side, sideOffset, align, and alignOffset without reaching for a separate positioner part. Matches the trigger's width on small screens.

SelectList

The scrollable list of items inside the popup. Caps its height to the available space and scrolls when needed.

SelectItem

A row inside the list. Pass value as a string for plain entries, or as an object with label, value, and icon to control how the value renders back in the trigger.

SelectGroup

A wrapper that ties a label to a set of items for assistive tech.

SelectGroupLabel

A small heading that names a group. Reads as muted text inside the popup.

SelectSeparator

A thin divider between groups of items.