Toggle

Toggle is a control that is used to quickly switch between two possible states. Toggles are only used for these binary actions that occur immediately after the user “flips” the toggle switch. They are commonly used for “on/off” switches.

Properties

NameTypeDefault
label

React.ReactNode

Provide a label for the input which will be shown next to the toggle.
error

boolean

Add styles to show the toggle has errors
className

string

Classes to set to the label of the toggle.

The Toggle supports margin styled-system props.

Behaviour

  • Use toggle to swap the state of a functionality or preference (usually between „on“ and „off“)
  • For multi-state scenarios consider radio buttons or checkboxes
  • Toggles should take affect automatically (without saving)

Technical Information

Inside the toggle component is a checkbox and therefore the api and usage works similarly. For example, instead of passing the value prop, the checked prop must be used instead.

Playground