Toggle switch

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




Figma component

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


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.



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




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.



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.


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


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.


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.


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