Toggle switch

A toggle switch is an input item can be used to enable or disable certain settings.

Status

Status

Healthy

Figma component

Includes a link to a Figma component that has been imported to Supernova

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 these cases, consider using the checkbox.

 

Structure

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

 

Properties

Size

Toggle switch comes with two sizes: default and large. The default option is for when it’s wanted to be use in profile and company settings forms, results views.

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 (boolean)

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

Label (boolean)

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

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 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.