i

Select

Choosing · researched

A closed field that opens a list so a person picks one option from a set.

molecule · Carbon: Dropdown / Select · also called Dropdown, Drop-down list, Dropdown list

Carbon splits native Select from custom Dropdown; merged here because the job is identical. "Dropdown" is avoided as a name because Ant Design and Primer use it for a menu of actions.

Each block is the real component from that system’s own package, in an isolated frame. They are live: hover, focus and press them. Frames are drawn on white so systems compare on one ground, and a font a system licenses only for its own site (GOV.UK’s Transport) falls back to what the system itself specifies.

Ant Design

Select native: partly antd 6.6.5
Variants
outlined, filled, borderless, underlined
Sizes
large, medium, small
States documented
default, disabled, loading, error
Accessibility guidance
yes

Docs position it as an alternative to native select; supports mode multiple/tags and showSearch. Native-element answer is from docs prose, rendered markup not inspected.

1 corrected on re-read
  • builds_on_native: "no" → "partly" rc-select renders <input role=combobox> in a div wrapper, not <select>

docs ↗ · code ↗

Carbon

Select native: yes @carbon/react 1.117.0
Variants
Default, Inline select
Sizes
small (sm), medium (md), large (lg)
States documented
default, hover, focus, error, disabled
Accessibility guidance
yes

Source wraps a native select element. The docs page states the opened list appearance depends on the browser. Also documents warning, skeleton, read-only, open.

2 corrected on re-read
  • variants: ["Default","Inline select","fluid"] → ["Default","Inline select"] usage.mdx Variants table lists Default and Inline select; 'fluid' is a separate FluidSelect component
  • sizes: ["extra small (xs)","small (sm)","medium (md)","large (lg)"] → ["small (sm)","medium (md)","large (lg)"] Docs: three sizes sm/md/lg; source union also has xs

docs ↗ · code ↗

GOV.UK

Select native: yes govuk-frontend 6.5.1
Variants
—
Sizes
—
States documented
default, error, disabled
Accessibility guidance
no

Page has a 'Known issues and gaps' section on user difficulty with selects and advises against multi-select.

docs ↗ · code ↗

Material Web

Select native: no @material/web 2.5.0
Variants
md-filled-select, md-outlined-select
Sizes
—
States documented
default, disabled, error
Accessibility guidance
no

Described as analogous to native select, but source uses md-menu with role=combobox and role=listbox, not a <select>. The Accessibility section is an unfilled template placeholder.

1 corrected on re-read
  • states_documented: ["default","error"] → ["default","disabled","error"] API tables list disabled, error and error-text props; no state gallery

docs ↗ · code ↗

Primer

Select native: yes @primer/react 38.40.1
Variants
—
Sizes
small, medium, large
States documented
error, disabled
Accessibility guidance
yes

Native select element confirmed in source and docs. Separate SelectPanel component exists as a non-native overlay picker.

docs ↗ · code ↗

Spectrum

Picker native: partly @spectrum-web-components/button 1.12.4
Variants
—
Sizes
S, M, L, XL
States documented
default, hover, focus, disabled, error
Accessibility guidance
yes

Spectrum calls the select/dropdown control Picker. SWC 1st-gen uses a native <button> trigger with a custom menu/listbox, not a <select>. Has an isQuiet boolean.

docs ↗ · code ↗

USWDS

Select native: yes @uswds/uswds 3.14.0
Variants
multiple select
Sizes
—
States documented
default, disabled
Accessibility guidance
yes

Renders a native select element.

docs ↗ · code ↗

Platform facts

Native elementselectSpec content model: zero or one button element if a drop-down box, followed by zero or more option, optgroup, hr, script-supporting, noscript or div elements. Content attributes: autocomplete, disabled, form, multiple, name, required, size. disabled applies to select and optgroup (spec) and option. MDN: the button may nest a selectedcontent element (BCD: Chrome/Edge 135, Safari 27, Firefox not). appearance: base-select opts into customizable select (BCD: Chrome/Edge 135, Firefox 149, Safari 27) and is CSS, not in the WHATWG HTML spec. :open for select: Chrome/Edge 133, Firefox 136, Safari 26.5.
Baselinewidely · 2015-07-29
APG patterncombobox
ARIA rolelistbox
Shipped by7 of 7 systems

Anatomy

  1. label — label element; plain term.
  2. select — The control; closed it shows the selected value, open it shows the options.
  3. option — HTML element name.
  4. optgroup optional — Labeled group of options.
  5. separator (hr) optional — Allowed child per MDN.
  6. button optional — Spec content model allows one leading button child for a drop-down select; MDN: it nests a selectedcontent element. Also the spec allows div children.

Keys the APG binds

  • Closed combobox. Down ArrowOpens the listbox if it is not already displayed without moving focus or changing selection. DOM focus remains on the combobox.
  • Closed combobox. Alt + Down ArrowOpens the listbox without moving focus or changing selection.
  • Closed combobox. Up ArrowFirst opens the listbox if it is not already displayed and then moves visual focus to the first option. DOM focus remains on the combobox.
  • Closed combobox. EnterOpens the listbox without moving focus or changing selection.
  • Closed combobox. SpaceOpens the listbox without moving focus or changing selection.
  • Closed combobox. HomeOpens the listbox and moves visual focus to the first option.
  • Closed combobox. EndOpens the listbox and moves visual focus to the last option.
  • Closed combobox. Printable CharactersFirst opens the listbox if it is not already displayed and then moves visual focus to the first option that matches the typed character. If multiple keys are typed in quick succession, visual focus moves to the first option that matches the full string. If the same character is typed in succession, visual focus cycles among the options starting with that character.
  • Listbox popup. EnterSets the value to the content of the focused option in the listbox. Closes the listbox. Sets visual focus on the combobox.
  • Listbox popup. SpaceSets the value to the content of the focused option in the listbox. Closes the listbox. Sets visual focus on the combobox.
  • Listbox popup. TabSets the value to the content of the focused option in the listbox. Closes the listbox. Performs the default action, moving focus to the next focusable element. Note: the native select element closes the listbox but does not move focus on tab. This pattern matches the behavior of the other comboboxes rather than the native element in this case.
  • Listbox popup. EscapeCloses the listbox. Sets visual focus on the combobox.
  • Listbox popup. Down ArrowMoves visual focus to the next option. If visual focus is on the last option, visual focus does not move.
  • Listbox popup. Up ArrowMoves visual focus to the previous option. If visual focus is on the first option, visual focus does not move.
  • Listbox popup. Alt + Up ArrowSets the value to the content of the focused option in the listbox. Closes the listbox. Sets visual focus on the combobox.
  • Listbox popup. HomeMoves visual focus to the first option.
  • Listbox popup. EndMoves visual focus to the last option.
  • Listbox popup. PageUpJumps visual focus up 10 options (or to first option).
  • Listbox popup. PageDownJumps visual focus down 10 options (or to last option).
  • Listbox popup. Printable CharactersFirst opens the listbox if it is not already displayed and then moves visual focus to the first option that matches the typed character. If multiple keys are typed in quick succession, visual focus moves to the first option that matches the full string. If the same character is typed in succession, visual focus cycles among the options starting with that character.

The seven states

default Closed, showing the selected or first option.
hover Pointer-only CSS state.
focus Focusable; the browser-drawn popup opens from it.
active Open (CSS :open, single-select) is the nearest to a held state; momentary press otherwise.
disabled disabled on select, optgroup or option.
error required with no choice fails validation.
loading n/a — Not defined by HTML; async option loading is an author concern.

Every cell was read twice, the second time from raw sources by a separate pass. 4 of 35 fields changed on the second read — open any “corrected” note to see what it said before.