Toggle switch

Principles

Use when

1. The input prompt needs to be run only between the two states. (e.g. switching a setting on or off)
2. Use when, represent a setting in a related page such as profile/general (administrative) settings.

Don't use when

1. if the input prompts multi-selection.
2. if the input (selection) will enable subsequent inputs after enabling the toggle switch. In such cases, consider using the checkbox.

Structure

1. Toggle switch (input) label
2. Toggle switch background
3. Handle (foreground)

Properties

Size

Toggle switch comes with two sizes:

• Default: The default is for when it’s wanted to be use in profile and company settings forms, results views.
• Large: The large size is to be used in mobile varieties.

States

Default

The default state is when value is on or off. If the component wanted to be control its boolean value, make sure to using the :checked property is in true or false.

Focused

While on focus state (or tab key) the toggle switch background takes a blue standard ring.

Disabled

When the toggle switch in a disabled state indicates that an input exists, but is not available in some situations. This can be used to keep the layout the same and let people know that an action may come up later.

Checked

When the toggle handle is switched to the right and the checked property is true, it indicates that the option is selected or enabled. When the toggle handle is switched to the left and the checked property is false, it indicates that the option is deselected.

Label (string)

The label in the toggle switch is for identifying the action or letting users know what will happen when enabling (or disabling) the toggle switch.

The label needs to be positioned to the left of the toggle switch.

Behavior

Interaction

When enabling the toggle switch, it’s not required to save the setting by pressing the save button. When it’s pressed, it’s activated that relevant action.

On the tab key, pressing enter and space will switch between states (on/off).

On some cases, when enabling or disabling the toggle switch, it should be show a (passive) modal to letting know to user the action which is important and cannot to be undone.

Transition

While pressing (or switching) the toggle switch, the handle motion transitions values are the same as in checkbox and radio.

Figma source