Toggle Component Playground

Interactive playground to test all Toggle props and variants

Props

Optional: HTML id attribute for the toggle

Label

Optional: Text label displayed next to the toggle

Checked

Disabled

State: OFF

Disabled: No

Code

<Toggle id="toggle-example" checked={false} onCheckedChange={(checked) => { /* handle toggle */ }} />

Props (JSON)

{
  "checked": false,
  "disabled": false,
  "onCheckedChange": "(function)",
  "id": "toggle-example"
}

All States

Checked

Unchecked

Disabled (Checked)

Disabled (Unchecked)