#Switch

#Description

Also known as a toggle switch or a toggle.

The Switch component (toggle) is a digital on/off switch. Toggle switches are best used for changing the state of system functionalities and preferences. "Toggles may replace two radio buttons or a single checkbox to allow users to choose between two opposing states." - Source

May may also check out the Checkbox component.

#How it should work

"Toggle switches should take immediate effect and should not require the user to click Save or Submit to apply the new state. As always, we should strive to match the system to the real world." - Source

#When not to use it

Don't use it if the user is required to click save or update to apply the new state.

#Good practices

"The toggle labels should describe what the control will do when the switch is on; they should not be neutral or ambiguous. When in doubt, say the label aloud and append “on/off” to the end. If it doesn’t make sense, then rewrite the label" - Source

The label should describe what the toggle will do when the switch is on.

#Demos

#Unchecked Switch

<Switch label="Switch" on_change={onChange} />

#Checked Switch

<Switch
  label="Label:"
  label_position="left"
  checked
  on_change={({ checked }) => console.log(checked)}
/>

#Checked Switch with error message

<Switch label="Switch" checked status="Error message" />

#Switch with suffix

<Switch
  label="Switch"
  checked
  suffix={<HelpButton title="Modal Title">Modal content</HelpButton>}
/>

#Switch in different sizes

As for now, there are two sizes. medium is the default size.

<Switch size="medium" label="Medium" right="large" checked />
<Switch size="large" label="Large" right="large" checked />
<Switch size="large" label="Large" />

#Switch in disabled state

<Switch checked disabled label="Disabled" />