Radio group
Users must choose exactly one option.
- Type
- UI-UX
- Sources
- 3
- Trail checked
standardSingle-choice form control
Test in lab 20 documented entries 1 anti-pattern check
Selection And Choice
Choice controls, object pickers, ranges, menu actions, bulk selection, and commands.
Browse all problem familiesLearn the family
How does the interface help a person understand and commit to a choice?
Choice controls express how many options are available, how many may be selected, and when the selection takes effect. The control should reveal the meaning and consequence of each choice.
Use this method
- List the options and their consequences.
- Choose a control for single or multiple selection.
- Show the current selection and when it takes effect.
- Check keyboard use, labels, and correction.
Compare the outcome
Strong: A booking form shows room types as labeled radio choices with capacity and price beside each option.
Weak: A booking form hides price differences inside a compact menu and shows the charge only after the visitor continues.
Try it: Take one choice screen and identify the choice set, selection count, default, consequence, and correction route.
Read these patterns first
- Radio groupUsers must choose exactly one option.
- Checkbox groupUsers can choose zero, one, or many options.
- SelectThe user chooses one option from a moderate known list.
Complete study route · 20 entries
Work through the family in order
Begin with the core behavior, apply it in different contexts, then review cases that reveal the quality boundary. Open each entry for its decision rule, states, example, and source trail.
0 of 20 studies complete
Start this family →5 entries
Build the foundation
Learn the shared task and the core interaction choices.
Checkbox group
Users can choose zero, one, or many options.
- Type
- UI-UX
- Sources
- 3
- Trail checked
standardMultiple-choice form control
Test in lab Select
The user chooses one option from a moderate known list.
- Type
- UI-UX
- Sources
- 3
- Trail checked
standardSingle-choice dropdown control
Test in lab Toggle switch
A single setting, feature, preference, or hardware-like control has two clear states.
- Type
- UI-UX
- Sources
- 3
- Trail checked
standardImmediate binary setting control
Test in lab Button group
A form, dialog, panel, card, or workflow footer needs two to four related visible commands.
- Type
- UI-UX
- Sources
- 4
- Trail checked
establishedGrouped visible action buttons
Test in lab 14 entries
Apply the patterns
Choose a specialized form for the context and follow its complete behavior.
Segmented control
There are a few mutually exclusive modes.
- Type
- UI-UX
- Sources
- 3
- Trail checked
standardCompact mode selector
Test in lab Multi-select
Users choose many values from a long predefined list.
- Type
- UI-UX
- Sources
- 3
- Trail checked
establishedMulti-value picker widget
Test in lab Combobox
Users choose one value from a large, dynamic, or filterable option set.
- Type
- UI-UX
- Sources
- 4
- Trail checked
standardSingle-value input widget with owned popup
Test in lab Listbox
Users choose one option from a visible static list.
- Type
- UI-UX
- Sources
- 2
- Trail checked
standardVisible selectable option list
Test in lab Object picker
Users assign, link, reference, invite, route, or attach an existing entity.
- Type
- UI-UX
- Sources
- 5
- Trail checked
establishedExisting-entity lookup and selected-object confirmation
Test in lab Chip selection
Users answer a lightweight choice question from a small set of short labels.
- Type
- UI-UX
- Sources
- 4
- Trail checked
establishedCompact selectable chip group for short choice answers
Test in lab Slider
Users adjust one bounded value such as brightness, volume, opacity, zoom, intensity, cost tolerance, or preference strength.
- Type
- UI-UX
- Sources
- 5
- Trail checked
standardSingle-value bounded range control
Test in lab Range slider
Users need a lower and upper bound on one numeric scale.
- Type
- UI-UX
- Sources
- 5
- Trail checked
standardTwo-boundary numeric range control
Test in lab Spinbutton / numeric stepper
Users adjust a small bounded count such as guests, copies, items, seats, nights, minutes, retries, or quantity.
- Type
- UI-UX
- Sources
- 5
- Trail checked
standardBounded incrementable numeric-value control
Test in lab Tree selection
Users choose one or more values from a meaningful hierarchy.
- Type
- UI-UX
- Sources
- 4
- Trail checked
standardHierarchical expandable selection tree
Test in lab Transfer list
Users build a selected set by moving items from an available collection to a selected collection.
- Type
- UI-UX
- Sources
- 4
- Trail checked
establishedTwo-pane item transfer and selected-set review
Test in lab Action menu
A resource, row, card, selected set, or local page object has several contextual commands.
- Type
- UI-UX
- Sources
- 4
- Trail checked
establishedContextual command list for a resource or selection
Test in lab Action sheet
A user-initiated action has a few immediate valid outcomes.
- Type
- UI-UX
- Sources
- 4
- Trail checked
standardPlatform-presented action choice sheet
Test in lab Menu / menubar
A complex application or editor has many stable commands organized into known groups.
- Type
- UI-UX
- Sources
- 4
- Trail checked
standardPersistent composite command bar with menus and submenus
Test in lab 1 entries
Review the quality risks
Study failure cases and identify the better recovery route.
Inaccessible custom select
Use this anti-pattern entry to audit custom dropdowns, styled select replacements, portal menus, command-palette-like selectors, and generated UIs that imitate native controls.
- Type
- UI-UX
- Sources
- 5
- Trail checked
anti-patternBroken custom widget anti-pattern
Test in lab Try another phrase
Try fewer words, clear the filter, or search across all pattern families.
Search all patterns