Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Table of Contents

...

The switch must start with a default selection.

Content

The switch consists of:

  • Main button area, including:

    • a colored background, which changes when the state is changed.

    • a round toggle button, which moves between the two sides when the state is changed.

    • (optional) a label within the button area, describing the current state. This can be either ✓ and ☓, or On and Off.

  • A preceding label, describing what the switch will do when it is in the On state (e.g. Show only employees).

...

  • when a change is required immediately after the user toggles the switch.

  • where there are On / Off options.

  • when you want to emphasize an action, for example in a ribbon.

Don’t use:

  • where there are more than 2 options.

  • where the user has to perform several actions before the change will become effective → use Check Boxes instead.

  • Inside a form → use Radio Buttons or a single Check Box instead.

...

Design

Code

...