Select

Pick one option from a list.

Base UI SelectSource

Basic

Pass items to Select.Root. Select.Value uses the items to show the label of the value.

Region

Groups and separators

Put related items in a Group with a GroupLabel. A Separator divides sections. A disabled item stays in the list, but the user cannot select it.

Region

Sizes

Match the size of the buttons beside the field, and use lg only for a hero field. sm, md, and lg are 26, 36, and 44 pixels high.

sm · dense UI
md · default
lg · hero field

States

Use inset by default and line for light or inline editing, with one appearance per form. Hover and focus the fields to see those states.

inset · forms
Empty
Filled
Invalid
Self-hosted is not available on this plan.
Disabled
line · inline editing
Empty
Filled
Invalid
Self-hosted is not available on this plan.
Disabled

Usage

These are defaults, not laws. Break one when you have a good reason, or when it makes the design more cohesive or more interesting.

  • Choose the input from the number of options and what the user picks.
    ComponentUse it for
    RadioOne choice from 2 or 3 options that stay visible.
    SelectOne choice from 4 to about 10 options, or fewer options when space is tight.
    ComboboxOne or more choices from a long list, with typing to filter.
    AutocompleteFree text, with suggestions that the user can ignore.
    ChoiceboxA choice where each option needs a description, such as a plan.
    CheckboxAn on or off value in a form that the user submits.
    SwitchA setting that applies at once.
  • Pass items to Select.Root. Without it, the trigger shows the raw value, such as us, not the label.

API

Props that the library adds. Every part also takes all the Base UI props.

Select.Root

PropTypeDefaultDescription
size'sm' | 'md' | 'lg''md'Sets the trigger height, the chevron, and the item text size in the list.
appearance'inset' | 'line''inset'Sets the trigger shape. Keep inset for forms. Use line for light or inline editing, such as renaming in place, filters, and quick settings.

Select.Trigger

PropTypeDefaultDescription
size'sm' | 'md' | 'lg'Root sizeOverrides the size from Root for the trigger only.

Select.Icon

PropTypeDefaultDescription
childrenReactNode<IconChevronDown />The icon in the trigger. Pass children to replace the chevron.

Select.Popup

PropTypeDefaultDescription
sideOffsetnumber4The gap between the trigger and the popup, in pixels.
containerHTMLElement | ShadowRoot | RefObject | null–The element that the popup renders into. The default is the document body.