Selection States
Foundations / Interaction / States / Selection States
Intro
The selection state is applied after the user has selected the element. The selected element should be clearly distinguishable from the other elements. The following selection states variants are available: selected, unselected, and indeterminate.
Selected
The selected state shows that the UI element is currently selected.
It is only available for selectable components, such as checkboxes, radio buttons, items, switch, segmented buttons, toggle button, or tokenizer.
Toggle button, radio button, checkbox, switch – selected
Unselected
The unselected state is applied when the element is not selected – the element is in its regular state.
Toggle button, radio button, checkbox, switch – unselected
Indeterminate
The indeterminate state is specific to multi-selection cases. It shows a state where no selection has been made, or the accumulated state for a list of checkboxes when only some of them are checked.
Checkbox – indeterminate
- If the parent in a tree has a mix of selected and unselected children, show the parent in an indeterminate state.
- Don’t use the intermediate state if the use case requires the element to be either selected or not.