Switches

They are normally used to toggle a single item on or off, on mobile and tablet, or immediately activate or deactivate something.

Principles

Familiar: Switches have been in user interfaces for years and should work as expected.

Scannable: It should be visible when one switch is selected, and selected items should stand out more.

Efficient: They make it easier to compare available options.

When to use

• Use switches instead of radio buttons if each item in a set can be independently controlled.
• Use switches instead of checkboxes, especially on mobile, to turn items on and off.

Behavior

States

Switches have enabled, disabled, hover and pressed states.

Specs