# Switch

> A checkbox with role="switch" drawn as a toggle.

Page: https://pico.rusticstack.com/docs/forms/switch

Add `role="switch"` to a checkbox and it is drawn as a toggle. It is still a checkbox, so it submits and works with the keyboard the same way, and the role tells assistive technology it is a switch.

**Example: Switch**

```html
<fieldset>
  <label>
    <input name="terms" type="checkbox" role="switch" />
    I agree to the Terms
  </label>
  <label>
    <input name="opt-in" type="checkbox" role="switch" checked />
    Receive news and offers
  </label>
</fieldset>
```

## Disabled and invalid

**Example: Disabled and invalid**

```html
<fieldset>
  <label>
    <input type="checkbox" role="switch" disabled />
    Disabled
  </label>
  <label>
    <input type="checkbox" role="switch" checked disabled />
    Disabled, on
  </label>
  <label>
    <input type="checkbox" role="switch" aria-invalid="true" />
    Invalid
  </label>
</fieldset>
```

## Customization

| Variable | Default | Description |
| --- | --- | --- |
| `--pico-switch-background-color` |  | Track color when off. |
| `--pico-switch-checked-background-color` | `var(--pico-primary-background)` | Track color when on. |
| `--pico-switch-color` | `oklch(1 0 0)` | Thumb color. |

The track is `2.25em` by `1.25em`, so the switch scales with the font size. See also [Checkboxes](/docs/forms/checkboxes).