Nav open / close arrow


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.
    The selection should be displayed in a vertically compact way.

Use Radio Buttons When:

  • The user must select only one of ≤5 options.
    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.
    The range of possible values are smoothly distributed (approximating an analog selection).
    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).
    The available actions are substitutes for each other.

Test Your Knowledge!

Last Updated

Oct 10, 2019