Skip to content
Home

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" />