Craft
Anatomy of a combobox
- Kitchen
- Front of House
Spatial rhythm
Spacing and grouping
The spacing reflects the hierarchy of the elements. In addition to that, the eye groups the visual elements by proximity before the brain starts reading a word. The top and bottom are uneven to compensate for optical alignment.
Rule
The space between an item and its parent is wider than the spacing among sibling items.
Height and overflow
A control's height is a promise to everything beside it. Once a filter row agrees on 40, every control in that row holds it, whatever it is asked to contain. How many selections fit is a question about width. The combobox measures the chips and shows as many as fit.
Rule
The control cannot grow. A row where one control changes height moves every control beside it, every time someone picks an option.
Judgement
Three ways to handle what does not fit, and only one of them is quiet. Growing the control moves the row. Scrolling the chips cuts one in half, which reads as a fault. I count what is left over, because it does neither.
Colour and contrast
Edge and background
The combobox is designed for a white background, so it sits on a white panel here. Its edge is 3.4 to 1 against that white. On this page's background, the same edge would drop to 3.1.
Rule
A control's edge needs 3 to 1 against the colour beside it. The site's hairline grey is 1.3 to 1 against white, so the combobox uses a darker grey.
Text contrast
The control holds three kinds of text. The label is 14.4 to 1 against white, and the chip labels are 12 to 1 against their pale blue. The help text is an instruction that has already been read, so it is lighter, at 6.9 to 1.
Rule
Text needs 4.5 to 1 against its background. On white, the lightest grey that passes is #767676. One step lighter, #777 fails at 4.48.
Focus ring
When the combobox has focus, its edge turns blue and a 2px blue ring appears around it. The brand blue is 2.9 to 1 against white, so the edge and the ring use a darker blue, at 4.7 to 1.
Rule
A focus indicator is held to the same 3 to 1. Edge and ring together make a 3px blue line, and it passes against white.
Semantics and accessibility
Field label
The label "Location" does three jobs. It names the field on screen. It is linked to the input, so a screen reader announces the combobox as "Location". The list borrows the same label, so the listbox is announced as "Location" too.
Rule
Each of the three can break on its own. A placeholder used as the label disappears as soon as someone types. Without the link, a screen reader announces an unnamed combobox. Without the borrowed label, the list opens with no name.
Typed text and value
Typing "war" narrows the list to the two wards. The selected values, Kitchen and Front of House, are held as chips and never appear in the text box. Someone can type, change their mind and leave the field, and the selection stays as it was.
Rule
The text in the box is only a search. The value is the set of chips, and typing never changes it.
States and failure modes
Four states
A status colours the edge and the message underneath, and adds an icon. Nothing else changes. Each status has its own icon shape: a diamond for error, a triangle for warning, a circle for success.
Rule
All four states take the same space, a 40px control and one line of message. Every status edge is at least 3 to 1 against white.
Help text and status
The help text and the status message both belong on the line under the control, and only one fits. Here the error message has replaced the help text, and the line keeps its height.
Rule
The line under the control keeps its height when it is empty, so a message can appear without moving anything below it.
Judgement
I let the status take the line and give it back when the status clears. That hides the instruction while someone is fixing an error. Showing both would make the field taller than its neighbours. I have not found a version of this I am happy with.