Search a known list and choose one value. Select handles short fixed lists; Combobox adds editable queries and explicit selection, while multiple values belong to MultiSelect.
Type a city or region code, move with the arrow keys and commit with Enter. Escape restores the committed label; Tokyo remains visible but unavailable.
This local demo simulates a delayed request. Search for a region, use an unmatched query for no results, or type “offline” to trigger failure and retry. Production consumers own requests and discard stale responses.
| Example | Axis / state | Usage |
|---|---|---|
| Small | Shared interactive size and button typography. |
| Medium | Shared interactive size and button typography. |
| Large | Shared interactive size and button typography. |
| Invalid | Field error is separate from retrieval failure. |
| Read-only | Value remains selectable; changes are unavailable. |
| Disabled | Value remains visible; control leaves the tab order. |
| Verdict | Rule |
|---|---|
| Do | Keep embedded hover ink-only; use the shared inset plate for press and preserve persistent selection. |
| Do | Use Combobox to search and commit one known value; use Select for a short fixed list and MultiSelect for multiple values. |
| Do | Give the input a visible FormField label or an accessible name; placeholder is never its label. |
| Do | Keep query, highlighted suggestion and committed value separate. Commit only by explicit option activation; Escape, Tab and outside dismissal restore the committed label. |
| Do | Keep DOM focus on the input during option navigation; aria-activedescendant references one visible available option. |
| Do | Keep disabled options visible, skip them during keyboard navigation and guard pointer activation. |
| Do | Keep the panel open during loading or retrieval failure. Preserve results for context but block stale-option commits. The host cancels or discards outdated async responses. |
| Do | Announce loading, result count, no matches and failure through one polite status region. Field validation uses aria-invalid and aria-describedby independently. |
| Do | Keep native text editing and IME composition. Enter during composition never selects or submits. |
| Do | Clear through a named sibling button. Required means a committed value is required; clearing may leave an invalid field. |
| Do | Flip above when the viewport has more room there, retain anchor width and cap scrolling to available space. Re-evaluate on scroll and resize; a containing modal owns outer focus confinement. |
| Don’t | Do not accept arbitrary typed text as a value in this contract. Free-text token creation requires an explicit separate contract. |
| Don’t | Do not put action buttons inside options or listboxes; feedback and retry are siblings of the listbox. |