Combobox
An input on a rule that filters a layer of options as you type.
Truckstop Go2023
Grainger2025
ThermoFisher Scientific2024
Basic.Space2021
City of San Diego2020
Geisel Library2019
No match
States
-
Rest
nothing typed
A muted glyph, a placeholder, a resting chevron cell.
- Truckstop Go2023Grainger2025ThermoFisher Scientific2024Basic.Space2021City of San Diego2020Geisel Library2019No match
Matches
typed “ge”, aria-expanded
The layer holds the matches in order; the first is highlighted.
- Truckstop Go2023Grainger2025ThermoFisher Scientific2024Basic.Space2021City of San Diego2020Geisel Library2019No match
No match
typed “zz”
One muted row says so; nothing is highlighted.
Anatomy
| Field | a muted search glyph, the input, a chevron cell, on one ink rule |
|---|---|
| Layer | paper and a 1px --ink frame, half a module under the field |
| Options | two modules tall, the name in the clean cut at 16/24, the year as a label on the right |
| Highlight | the highlighted match is a --state fill running to the frame |
| Filtering | matches keep their order; none leaves one muted row, “No match” |
| Keys | typing opens it; arrows move the highlight; Enter chooses; Escape closes |
| Opening | the menu burn, 300ms; reduced motion cuts |
Decisions
-
Order stays
Matches keep the list’s order instead of being re-ranked as you type, so the rows under the pointer don’t jump.
-
The highlight is current
The highlighted match is the --state fill: it is the one Enter will choose, the current item, so it takes the current item’s fill.
-
The one framed surface
The list is a layer over the page, so it keeps the 1px ink frame every other item gave up.