Skip to content
Home

Switch

Info
Demos
Properties
Events

Demos

Unchecked Switch

Code Editor
<Switch
  label="Switch"
  on_change={({ checked }) => console.log(checked)}
/>

Checked Switch

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

Checked Switch with error message

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

Switch with suffix

Code Editor
<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.

Code Editor
<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

Code Editor
<Switch checked disabled label="Disabled" />