Selection field
Dropdown
Single or multiple selection in a field you can read at rest — chips, a limit, and a panel you may replace entirely.Reviewers are notified once the pull request opens
Anatomy
The parts that live in the field. The panel is teleported into the overlay host, so it is named here without a line pointing at it.
Two of five
- 1
Root
Positions the panel and turns any click in the box into a toggle.
- 2
Field box
The text field itself, readonly: it displays the selection rather than accepting text.
- 3
Label
Positioned by labelPlacement, never animated between positions.
- 4
Chips
One per selected value in multiple mode, each removable by click or keyboard.
- 5
Clear
Appears only when there is something to clear and mandatory does not forbid it.
- 6
Arrow
Decorative and aria-hidden: the field is the control, so a second focusable toggle would only duplicate it.
- 7
Support line
Helper text, or the error message that replaces it. Reserved height, so nothing moves when an error appears.
- 8
Panel
A menu surface holding the listbox. Teleported, width-matched to the field, capped by maxHeight.
- 9
Row
A list item with role="option". Selection, disabled state and the keyboard highlight all land here.
Every axis, live
The same demo the playground runs, with one control per axis. Open the panel while you change them — most of what can break, breaks in combination.
Max needs multiple
A single-select field holds one value, so a limit has nothing to limit. The control appears only in multiple mode, and the component warns in dev if you set it anyway.
Row slots keep the row
The #item slot replaces the body of a row, not the row: its role, selection and keyboard behaviour stay with the component.
Placement and density
`labelPlacement` and `density` behave exactly as in the text field, and the panel matches the field's width in every combination.
Clearable and mandatory
Clear appears only when there is something to clear and `mandatory` allows it; with `mandatory` the last value cannot be removed.
Read only is not disabled
Read only keeps the value readable and focusable but will not open the panel; disabled takes the field out of the interaction.
Two axes at once
Shape against scale. A single field looks right at almost any setting; the pairs are where a boundary and a height stop agreeing.
VariantDensity
Variant / Density
compact
default
comfortable
filled
outlined
States
Five states, one property each. Focus is a colour change — the kit never thickens a border or animates a label into place.
Reviewers are notified once the pull request opens
Rest
Placeholder or the selected title. The label sits where labelPlacement put it and stays there.
Hover
A state layer over the field, and over the row under the pointer at 8%.
Focused
The boundary takes the primary role. No ring, no width change — both would have to be paid back in padding.
Open
aria-expanded flips, the arrow rotates, and the virtual focus lands on the current value rather than the top of the list.
Error
The variant colours the property it already owns, and the support line carries the message — colour is never the only carrier.
Disabled
The same properties at the disabled opacity, and the panel cannot be opened at all.