Skip to content
Browse the guide
Components

Selection

Match checkboxes, radio groups, switches and options to the decision.

On this page

Choose a selection control by the decision it represents. A checkbox chooses independently; a radio group chooses one of several options; a switch changes a setting; a select compresses a list when space and scanning needs justify it.

#Match the choice

Use checkboxes when more than one option may apply, including an explicit mixed state for a parent selection where needed. Use radio buttons when comparing a small set of mutually exclusive choices benefits from seeing them together.

A switch usually applies a setting directly. If a form defers all changes until Save, make that workflow clear rather than implying immediate application. A segmented control fits a small, closely related set; it is not automatically a tablist. Tabs switch associated panels, while a group of filter choices follows its own selection semantics.

#Keep labels and state explicit

Make the label part of the target when native semantics permit. Explain a choice in nearby text rather than hiding necessary information in hover-only help. A selected state must remain identifiable when focused, hovered or disabled.

For large or searchable option sets, a combobox can help, but it requires complete keyboard, active-option and popup behavior. Do not replace a usable native select with a custom list solely for appearance.

#Handle group operations

“Select all” must state whether it affects visible results, the current page or the entire result set. Preserve selection intentionally when filters change; show a count and a way to clear it. Hidden selected items should not become a surprise when a bulk action runs.

#Verify

Test arrow-key radio navigation, Space activation, labels, mixed state, disabled options and long text. For custom options, verify focus and active selection separately. Master UI implementations: Checkbox, Radio, Switch and Combobox.