Input
Display options toggle
Use clear visual toggles for display options instead of confusing checkboxes
formselectinputaccessibility
Bad example
Good example
Description
When users need to select from only a few options, showing all choices upfront is more efficient than hiding them in a dropdown. A dropdown for 3 options means: click to open, scan, click to select. Visible options mean: scan, click. One interaction saved, zero cognitive load added.
Why it matters
- Efficiency: One click instead of two
- Clarity: Users instantly see what's available without interaction
- Comparison: Side-by-side options are easier to compare than a sequential list
- Touch-friendly: Larger tap targets than dropdown items
Choosing the right pattern
| Pattern | Best for |
|---|---|
| Radio buttons | Simple choices, compact space, form-like contexts |
| Selectable cards | Options with descriptions, visual emphasis, standalone selections |
| Segmented control | Binary or ternary choices, toolbar-style UI |
| Dropdown | 6+ options, space-constrained layouts, less important selections |
When to apply
- 2–5 mutually exclusive options
- Options are short and distinct
- The choice is important enough to deserve screen real estate
- Users benefit from comparing options visually
When not to apply
- 6+ options (consider a dropdown or combobox)
- Very limited horizontal space
- The selection is secondary to the main task
- Options change frequently or are data-driven
Published on Dec 17, 2025
Explore more examples
Forms
Dropdown usability
Replace long dropdowns with searchable select components for better usability
formselectinputaccessibility
View example
FormsInput auto-formatting
Automatically format inputs like phone numbers and credit cards as users type
forminputformatmobile
View example
FormsAvoid disabled submit buttons
Keep submit buttons enabled and show clear error messages on submit instead of silently disabling
formbuttonaccessibilitydisabled
View example