Headless / Selection

Selection

The pick-a-value behaviours. Each one captures a choice — a boolean, one option, several — and wires the ARIA for it without imposing a look.

Updated 3 days agoEdit on GitHubWeb & native

The pieces

ComponentCapturesShape
CheckboxA boolean (or mixed)A native <input>
RadioGroupOne of a small setNative <input>s, grouped
SwitchA boolean on/offA native <input>, role="switch"
SelectOne of manyA button-triggered listbox
ComboboxOne of many, typedA filterable input + listbox
MultiSelectSeveral of manyA chip input + listbox
SearchA free-text queryA Combobox in a search landmark

Two groups

The family splits in two. Native-input controls — Checkbox, RadioGroup, Switch — render a real <input>. They take part in native form submission, browser autofill, and form reset for free; you style around the input, you do not replace it.

Listbox controls — Select, Combobox, MultiSelect, Search — share the WAI-ARIA combobox / listbox pattern: role="combobox" on the input or trigger, role="listbox" on the popup, role="option" on each row, and the same arrow-key navigation throughout. They are compound components you assemble from parts.

Which listbox control

The four listbox controls differ by what the user can do:

  • Select — pick one, from a button. No typing.
  • Combobox — pick one, with type-to-filter.
  • MultiSelect — pick several, with chips and a filter.
  • Search — a Combobox framed as site search, wrapped in a search landmark.

Combobox is the base; Select, Search, and MultiSelect are it with one behaviour changed.