Select

Base UICopy Anchor Link

Select is a closed-choice control. The trigger shows the current value and opens a popup list of Select.Option rows on an elevated Surface, so the menu reads above page content.

Field label, description, and error copy follow the shared input pattern; value, disabled state, and change handlers pass through Base UI. Compose options inline or inside Select.Group when sections need headings; use Select.Separator between groups. Fill a form column from a parent Stack with fullWidth / expandChildren — Select has no fullWidth prop of its own.

AnatomyCopy Anchor Link

Import the component and assemble its parts:

import { Select } from '@viraui/react';

<Select>
  <Select.Option />
  <Select.Group>
    <Select.Option />
  </Select.Group>
  <Select.Separator />
</Select>

When to useCopy Anchor Link

• Exactly one value from a fixed list that fits in a popup (timezone, state, theme)
• Grouped options with section headings and dividers
• Option rows that need leading addons mirrored on the trigger

When not to useCopy Anchor Link

• Users type to filter, or may keep a value not in the list → Autocomplete
• A short list that should stay visible on the page → Radio
• Free-form single-line text with no option list → Textfield

RelatedCopy Anchor Link

• Autocomplete — filterable or free-form suggestions
• Radio — visible single-choice rows
• Textfield — open text beside Select in form rows

Common examplesCopy Anchor Link

Grouped optionsCopy Anchor Link

A labeled Select with field chrome, Select.Group sections, and a divider between groups is the default closed-choice pattern. Pass items so the trigger can resolve each value to a display label.

Beside TextfieldCopy Anchor Link

Equal-width form rows share a parent Stack with direction="row" and expandChildren — pair Select with Textfield for city/state or similar address fields.

Option addonsCopy Anchor Link

Select.Option addon takes a leading decorative node. Drive root addon from the selected value so the trigger shows the same icon. Set alignListWithTrigger={false} when options use a leading addon so the popup is not forced to the trigger width. Pass label when the option children are a multi-line stack so the accessible name stays short.

Long scrolling listCopy Anchor Link

When the option set outgrows the popup, the list scrolls inside the elevated surface and Base UI scroll arrows appear at the edges — no extra props.

In iframe previews, shadow roots, or custom overlay hosts, pass container on Select so the popup portals into that document instead of the default body.

Ask your agentCopy Anchor Link

Add a labeled timezone dropdown with four zones in two region groups and a divider between groups.