Toggle

A toggle is an interactive element that allows users to switch between two states or options with a single action

When to use

To trigger actions that have a near immediate effect, such as view/hide, enable/disable turning something or on/off.

Don’t use a toggle to trigger actions that don’t have immediate effect. In that scenario use a checkbox instead.

Best practice

Toggle settings should be simple self-explanatory actions and not require too much explanation.

If using icons in toggle, use a crossed out icon on the disabled side.

Placement

A toggle is typically used in user settings or in a form. When building more extensive forms please make sure to use the pattern Forms. In settings, the toggle can be a part of it's own section with a title and description around it providing context.

State

A toggle has 3 different type of states: Default, Active and Disabled:


Default (OFF)	Active (ON)	Disabled (OFF/ON)
The default state indicating a toggle setting is off	The state indicating a toggle setting is on	To be used when a toggle setting is unavailable to the user

Variants

There are 2 different variations of the toggle: Icon or Small


With icon	Small
To be used in cases where the toggle setting requires extra clarity. Example: view/hide.	Smaller 20x20px version to be used in case of limited space

Accessibility

WIP