Combobox
Default 32px field · Input focus treatment · Select-aligned menu anatomy
Single select
InputGroup anatomy. Placeholder and filled values share the same 32px shell.
RestingHoverFocusInvalidInvalid + focusDisabled
Open menu
Selection uses a checkmark; hover uses a fill; keyboard focus adds the shared popup outline.
Selected, not hovered
Unselected, hovered
Unselected, keyboard focus
No results
Multi-select
Resting
FDM
SLA
Focus
FDM
SLA
Disabled multi-select
Selected values remain visible.
FDM
SLA
On card
The same field and popup tokens, with the surrounding card color used in the invalid-focus gap.
Focus
Invalid + focus
Choose an available production route.
Multi-select focus
FDM
SLA
Implemented locally: full-field popup anchoring, editable search, accessible clear/remove controls, shared invalid-focus styling, and matching Storylite examples. Changes are not yet committed.
Additional state coverage
Remove hover
FDM
Remove keyboard focus
FDM
Multi-select invalid
FDM
SLA
Invalid + focus
FDM
SLA
Wrapped selections
FDM production
SLA prototyping