Toggles

Toggles provide a quick way to switch between enabled or disabled states, and view the current setting. Use toggles when you need to turn something on or off instantly (For example, when enabling public access). If a physical switch would work for the action, a toggle is usually the best component to use.

Toggles should never require the user to press a button to save or apply the setting change. If you need the user to press a submit button, use checkboxes instead.

Styles and usage

Function Style Usage
On/off
Turn something on or off instantly
Disabled
A toggle is disabled when a selection has already been made outside of the current context that negates the need for the toggle. Hovering over the disabled toggle shows a tooltip with the current state.