role combobox

Select draft v0.1.0

Lets people choose one option from a list that opens on demand.

A select shows the current choice in a closed box and opens a list of options when activated; the browser or the platform renders the list, its keyboard interaction and its announcements. It fits a choice among many known values (a country, a time zone, a sort order) where showing every option at once would take too much room. Two to about six options worth reading side by side are a Radio group; a list of actions is a Dropdown.

Decisions

From decisions in packages/components/specs/components/select.spec.json, newest first. Every active decision is implemented by the spec, the tokens, the web implementation and the guidelines.

Color

The control is a box on the default surface outlined in the accent neutral border color; hover tints it with the surface hover color and keeps the border; invalid takes the base error border; disabled takes the shared disabled colors. Value text is primary, the placeholder tertiary, the description secondary, the error message the error text color.

The Figma library maps no color to form controls. The accent neutral border is the lightest neutral border that keeps 3:1 against the surface in both modes (WCAG 1.4.11); the hover tint reuses the surface's own hover step.

field-colors · 2026-10-03 · v0.1.0

select.control.background.*select.control.border-color.*select.control.color.*

WCAG 1.4.11 Non-text Contrast (AA)

Size

Three sizes from the Figma library's space and body scales: small (32 px high, 8 px inline padding, 14 px text), medium (40, 12, 16, the default) and large (48, 16, 20); the border is 0.6 px (stroke-width.sm) and the corners 4 px (corner-radius.xs) at every size; label, description and error message keep 14 px.

sizes · 2026-10-03 · v0.1.0

select.control.min-height.*select.control.padding-inline.*select.control.typography.*select.control.border-widthselect.control.border-radius

Anatomy

A field always has a visible label above the control; help text goes under the control as the description, and the error message under it while the field is invalid. Both are exposed as the control's description.

label-description-error · 2026-10-03 · v0.1.0

WCAG 3.3.2 Labels or Instructions (A)WAI tutorials: Labeling controls WAI tutorials: Form instructions (required fields, placeholder text, aria-describedby)APG: Describing with aria-describedby
A chevron (expand_more, the icon font) sits over the end edge of the control at 16, 20 or 24 px by size, 8 px from the edge; the control reserves 28, 36 or 40 px of end padding for it. It follows the value color and is hidden from assistive technology.

chevron-indicator · 2026-10-03 · v0.1.0

select.indicator.*select.control.padding-inline-end.*

WCAG 1.1.1 Non-text Content (A)WAI-ARIA 1.2: aria-hidden

Behaviour

The select is the platform's native select: the component styles the closed box and its chevron only; the opened list, its keyboard interaction and its announcements belong to the browser or the platform and are not specified here.

A custom list needs script to be accessible (focus management, arrow keys, type-ahead), and the web implementation ships none.

native-list · 2026-10-03 · v0.1.0

ARIA in HTML: select element (role combobox as a drop-down box)HTML: the select element