Designing Mobile Selection Controls

Checkboxes let users make multiple selections and toggle individual options. They show a checkmark when enabled and remain empty when disabled. An indeterminate state can indicate mixed states in multi-level lists.

While similar to toggle switches, checkboxes serve different purposes.

Use checkboxes for:

• Actions requiring final review and confirmation via Submit button
• Forms with additional steps after selection
• Multiple-choice options within one category
• Actions needing clear on/off states

Design checkboxes following standard control guidelines: recognizable shape, clear icons, and adequate touch targets.

Labels vary by context: brief for option lists, but can be longer for standalone checkboxes (like Terms and Conditions agreements).

Unlike checkboxes, radio buttons allow only one selection. They show empty circles for unselected and filled dots for selected states.

Key principles for radio button design:

• Use for two or more mutually exclusive options
• Align options vertically for better scanning — horizontal layouts need more space between buttons and labels
• Choose radio buttons over dropdowns for fewer than 5 options to reduce the interaction cost
• Set research-based default selections that match common user choices
• Make both button and label tappable
• Maintain standard circular design to ensure familiarity.^[1]

Toggle switches are selection controls that provide only 2 mutually exclusive options (usually On or Off) and always have a default value.

Since designers sometimes falsely replace toggle switches with radio buttons or checkboxes, it's essential to define the usage scenarios:

• Use toggles when selected options take an immediate effect. That's why we often use toggle switches for the Settings page where choices get applied instantly and it isn’t required for users to confirm their decision.
• Make sure the labels are direct and clear. Avoid using questions and formulate labels by saying what will happen when the switch is on. For example, the label "Show Notifications" is more straightforward than "Notifications."
• Use color contrast to signify the difference between On and Off states. The On state should be more contrasting so that even people with visual impairments can notice the difference.^[2]

Dropdown menus show predefined options on tap. Basic dropdowns allow single selection, while some enable multiple selections with tags appearing at the top.

Research suggests caution with dropdowns: they hide options, can overwhelm users when expanded, and require significant interaction effort, especially with long scrolling lists.

Consider these alternatives:

• Optimize option lists: For lengthy dropdowns, add auto-suggest search and prioritize frequent options at the top
• Use simpler controls: For 5 or fewer options, use radio buttons to make choices immediately visible
• Consider text input: Though typing requires effort, it's often faster than dropdown selection for familiar data like birth dates
• Set smart defaults: Include common selections based on user research to reduce interaction steps
• Automate when possible: Let systems detect information automatically (like card type from number) rather than asking users.^[3]

Mobile offers two picker types:

• Input pickers: For manual date entry, best for distant past/future dates (like birthdates)
• Calendar pickers: Dialog-based selection, ideal for dates within a year of the current date to avoid excessive scrolling

Apple's alternative uses bottom-screen wheel scrollers for medium-sized lists with logical ordering.^[4]

Key design principles for calendar pickers:

• Enable clear navigation: Show all months of the current year on one screen and years on separate screens. Avoid nested dropdowns.
• Distinguish dates: Clearly differentiate the selected date from the current date (varies by platform — Google Calendar emphasizes the current date, iOS the selected).
• Handle invalid dates: Disable unavailable dates using a grey color or making them untappable.

Slider controls are UI components for adjusting settings such as volume and brightness, selecting the price range, or applying image filters. They take immediate effect and allow users to fine-tune the value by moving the handle — called 'thumb' — along the 'horizontal track'. As a slider moves from left to right (from right to left in right-to-left languages like Arabic) and its value increases, the portion of track between the minimum value and the thumb fills with color.

On mobile, designers should be careful with sliders, making sure they're easy to handle. The thumb should have a proper touch target size so even older people or individuals with motor disabilities can drag it without effort.

You can customize the track color, thumb icon, and left and right icons representing the maximum and minimum values to reinforce your brand style and increase recognition of the feature.

Sliders aren't the best solution when the preciseness of value matters. Consider using radio buttons or a simple input field to offer more precise values and minimize the interaction cost.