Switch

Switch toggles are elements that can get two simple states, each of them has an impact on the system and it can be switched on or off, there are no more options. If the switch toggle is on one state, the action to change it will modify to value of the element to the contrary.

Usage

  • Switch toggles should be used in place of radio buttons whenever the options are opposites of each other (i.e. yes/no, on/off, etc).
  • Whenever is possible stack the switch component vertically.
  • Switches have immediate effect over the application, changing preferences and configuration settings. Don't use a submit button.

Stacking

In some application the use of several switches based on the requirements could appear, that why we provide some indications in the case that the user needs to use stacked switches.

Label position

PositionDescription
Label beforeLabels before the switch indicate what the switch is for
Label afterLabels after the switch indicate the state of the switch