Deep dive · 02
One question,
five different controls
“Let people choose a region” — there are at least five controls that could do this. Click through and see why you cannot just pick any of them.
How many are they choosing from?
The count decides the control. Press each to compare.
Segmented control or radio buttons. Seeing every option at once is fastest. There is no reason to hide them.
Radio buttons. Still better shown in full — collapsing into a select costs an extra click.
Select. From about here it is better to collapse the list. Note, though, that a native select cannot be restyled — matching the mockup means building your own, which is separate effort.
Combobox. Try typing just “k”. Faster than scrolling dozens of entries. That said, it is considerably harder to build than a select.
Fewer options stay expanded; more options get collapsed or given search. And the moment you collapse them (select, combobox) the effort goes up — put that in the quote.
When does it take effect?
They look similar but behave completely differently. Change each one.
Switch takes effect now
Saves as soon as you change it
Checkbox takes effect on save
A settings screen built with Checkboxand no save button. People tick the box, assume it is done and leave → a flood of “my settings will not save” tickets.
If it must take effect the moment it changes, use a Switch; if it is a form submitting several things at once, use checkboxes plus a save button.
A switch takes effect now; a checkbox takes effect on save. That one line removes a large share of QA issues. Always state which one when handing over a mockup.
Can they choose more than one?
Round (radio) means one; square (checkbox) means several. The shape is the rule, so people know before they press.
Radio one only
Once chosen, you cannot return to nothing selected. That is why a “prefer not to say” option is sometimes needed.
Checkbox several
All of them can be cleared. Whether zero selections is a valid state has to be decided during planning.
Do not change the shapes. Make radios square or checkboxes round and people mispredict whether multiple selection is allowed.
Where do you tell them it is wrong?
The same error shown two ways. Try each.
Toast ✗ Bad
There is no telling which field is the problem. And it disappears shortly, with no way to see it again.
Inline ✓ Good
It sits where the problem is and tells you what to do about it.
Errors always attach where the problem is. And rather than “an error occurred”, write “what to fix and how”.
The whole thing on one page
When in doubt, read this table.
| Situation | Control to use | Watch out |
|---|---|---|
| One of 2–3 | Segmented · radio | keep them all visible |
| One of 4–7 | Radio | pre-select a default |
| One of 8–20 | Select | a native select cannot be restyled |
| Dozens or more | Combobox · autocomplete | harder to build · needs debouncing |
| Several at once | Checkbox · filter chips | decide whether a save button is needed |
| On/off, effective now | Switch | saves directly, no save button |
| Adjusting a quantity | Number stepper | typing must also work |
| Setting a range | Range slider | two handles need custom work |
| A date | Date picker | a span needs a range picker |
Choosing a control is not taste — it follows from number of options × when it saves × whether multiple selection is allowed.
Now ask for it like this
This is the notification settings screen. Build each item as a switch (toggle) and have it save the moment it changes. There is no save button.
Make the terms agreement a checkbox and have it submit all at once when [Sign up] is pressed. Leave the button disabled until the required items are ticked, but add a note below explaining why it is disabled.
The bank list has more than 20 entries, so build it as a combobox (searchable select) rather than a select. Apply a 0.3-second debounce after typing to narrow the options.
Show form errors inline below the field, not as a toast. Validate when focus leaves the field.
Add input masking to the phone number field, so that typing digits alone is tidied automatically into the 010-1234-5678 format.
When a request contains ① the control name ② when it saves ③ when it validates, it rarely has to be built twice.
WHY THIS MATTERS
One control changes
the whole feature.
Swap a checkbox for a switch and the save logic changes; swap a select for a combobox and the effort multiplies. You have to be able to say “use this control”, not “pick something”.