Switch

Info
Demos
Properties
Events

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

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"

/>