The selection state is applied after the user has selected the element. The selected element should be clearly distinguishable from the other elements.

Variants

The following selection states variants are available:

• Selected
• Unselected
• Indeterminate (partially selected)

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.

  Use:

• If an item is selected.
• If the component can be “checked”.

Unselected

The unselected state is applied when the element is not selected – the element is in its regular state.

  Use:

• If a UI element is not selected.

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.

  Use:

• If the parent in a tree has a mix of selected and unselected children, show the parent in the indeterminate state.

  Don’t Use:

• If the use case requires the element to be either selected or not.

Related Links