Selecting Things

Overview

Fabric has numerous components build for making selections. Using the correct component for the context is critical, as it has implications for how the user will interpret the selection and its impact.

‍

‍

Use Dropdowns When:

• The user can select only one of multiple options.
  and
  The selection should be displayed in a vertically compact way.

‍

‍

Use Radio Buttons When:

• The user must select only one of ≤5 options.
  and
  There is enough vertical space and a need to display all options at once.

‍

‍

Use Checkboxes When:

• The user can select any number of multiple options.
  

‍

‍

Use Switches When:

• The user must toggle a setting between 'On' and 'Off.'

‍

‍

Use Sliders When:

• The user must select a single value within a range.
  and
  The range of possible values are smoothly distributed (approximating an analog selection).
  and
  There is sufficient horizontal space to allow for easy selection of discrete values.

‍

‍

Use Default Action or Dropdown Buttons When:

• The user can perform one of multiple related actions (not settings).
  and
  The available actions are substitutes for each other.