Select

C-12WCAG 2.2 AA · Passed #405

Every option-picking control: plain select, combobox, async suggest, multi-select. The trigger is a Field control; the listbox is a Menu. Gated on useCombobox (P-14) for behavior; the visual contract is complete here.

Axis	Values
`mode`	select · combobox · suggest (async) · multi
`.qf-select__trigger[aria-expanded]`	chevron rotates
`.qf-listbox` · `__option[aria-selected]` · `[data-state=active]` · `__group` · `__empty`	listbox parts
`.qf-select__chips`	multi-select value chips inside the control

Document type

Assignee (combobox)

Tags (multi)

Finance Q3

Native fallback

Select: editable

C-12 Office

The editable combobox of the ribbon and the formula bar: a text input with role="combobox" plus a chevron that opens the list. The roving toolbar yields ←/→ to the caret inside it.

Axis / element	Values
`data-editable`	on `.qf-select`
`data-width`	font · size · zoom · namebox · format
`data-size`	xs (ribbon) · sm (default)
`__input` · `__toggle`	parts
`.qf-listbox__option[data-preview]`	a font or style previewed in its own face

Guidance

When to use

Use a select to pick one value from a known list, such as a document type.
Use the combobox mode when the list is long and typing to filter is faster, such as picking an assignee.
Use suggest mode when options come from the server as the user types.
Use multi mode to pick several values; the chosen values show as chips in the control.
Use the editable select (data-editable) in the office ribbon and formula bar for font, size, zoom and the name box, where users also type a value.

When to consider something else

If there are five or fewer options and space allows, use radio toggles so all options are visible. See Toggle.
If the list is the main content and stays open, use a list. See List.
If the items are actions, not values, use a menu. See Menu.
If the value is a date, use a date picker. See DatePicker.

Usability

Do

Use a placeholder such as "Select a type…" only when no default makes sense.
Group long lists with .qf-listbox__group headers.
Show a clear empty state ("No results for…") and a loading state in suggest mode.
Highlight the matched text in combobox results.

Don’t

Don't use a select for two options; use a checkbox, switch or radios.
Don't change other fields or the page when the active option moves; act only on selection.
Don't close a multi select after each pick.

Accessibility

Keyboard

Select keyboard
Keys	Action
`Enter or Space`	On a closed trigger, opens the list; Space types a space in a text combobox instead.
`Arrow Down or Arrow Up`	Opens the list if needed and moves the active option, wrapping; focus stays on the trigger.
`Enter`	Selects the active option; a single select closes, a multi select toggles the option and stays open.
`Escape`	Closes the list without changing the value.
`Ctrl+Arrow Left or Ctrl+Arrow Right`	In the ribbon's editable select, leaves the text input for the previous or next ribbon group; plain arrows move the caret.

Roles and names

The trigger has role="combobox", aria-haspopup="listbox", aria-expanded and aria-controls; a text trigger adds aria-autocomplete="list".
The popup is role="listbox" named by the field label; options are role="option" with aria-selected; multi adds aria-multiselectable="true".
The active option is set with aria-activedescendant on the trigger, so each option needs an id.
Loading sets aria-busy="true"; the empty row is an aria-disabled option.
In the editable select the input is the combobox with aria-label; the chevron button has its own name and tabindex="-1".

Focus

DOM focus stays on the trigger or input; data-state="active" draws the virtual focus in the list.
When the list closes, focus is on the trigger.
In multi mode, each chip's remove button is reachable by Tab; after removing a chip, the binding must move focus to the input.

Other requirements

Announce the number of results in combobox and suggest modes through a polite live region (4.1.3).
The selected option shows a fill and text color, not color alone; add a check mark where several are selected (1.4.1).
The a11y report lists the trigger value text and mark highlight as dark-theme contrast debt (1.4.3).
The native <select> fallback is fully accessible; use it where the custom list adds nothing.

Test your implementation too. This guidance covers the element as specified here. How a screen composes it (labels, order, announcements) still needs its own keyboard and screen reader check.

Accessibility tests

WCAG 2.2 AA · Passed

Passed the gate (run 358b316 on 2026-10-22): no finding in any theme. Awaiting a person’s approval of the checklist below.

Select test checklist
Area	Automated	A person checks
General	Passed	Color is never the only cue, text alternatives say the same thing as the graphic, and the element reads the same in the light and the dark theme.
Zoom	Passed	At 200% zoom, at 320 CSS pixels wide and with the WCAG text-spacing overrides, nothing is lost, clipped or overlapping.
Keyboard	Passed	Every row of the Keyboard table works, focus is always visible and never trapped, and the tab order follows the reading order. (5 rows)
Screen reader	Passed	With NVDA or JAWS on Windows and VoiceOver on macOS, names, roles and states are announced as Roles and names says, and changes are announced once. (5 items)

Approving. When the checklist passes on the checked run, record it with bun run a11y:approve -- select --by "Your name" and commit a11y/approvals.json with the rebuilt pages. All test status

Package

Consumers link one stylesheet, css/classic/index.css, which includes every element. The files below are where this element is defined.

Select package
Source	`css/classic/components/inputs.css`
Specimens also use	Avatar · Box · Card · Chip · Control · Field · Icon · Table · Text · Toolbar
Sprites	`sprites/icons.svg` · `sprites/office-icons.svg`
React	Not yet available: the React binding has not started.

Latest updates

Select latest updates
Date	Version	Breaking	Description
2026-10-02	0.1	No	Extend Tooltip, Menu, Select, Tabs and Toolbar for office surfaces

All release notes