Switch

Switches toggle a setting on or off, taking effect immediately. Unlike checkboxes, switches are not submitted with a form — they act on interaction. Built with @volvo-cars/css using native HTML elements and role="switch".

Enable notifications

<label class="flex-row gap-x-16 items-center justify-between">
  Enable notifications
  <input type="checkbox" role="switch" />
</label>

Elements

A switch can be built with either an <input type="checkbox"> or a <button>. Both require role="switch".

Checkbox input

The simplest approach — the browser manages checked state natively. No JavaScript needed for basic usage.

Enable notifications

<label class="flex-row gap-x-16 items-center justify-between">
  Enable notifications
  <input type="checkbox" role="switch" />
</label>

Button

Use a <button type="button"> when you need full control over toggling. You must manage aria-checked yourself.

Enable notifications

<label class="flex-row gap-x-16 items-center justify-between">
  Enable notifications
  <button type="button" role="switch" aria-checked="false"></button>
</label>

Grouping and layout

Wrap related switches in a flex-col gap-16 container. Place the label first and the switch after, using justify-between to push them apart.

Enable notifications Marketing emails Product updates

<div class="flex-col gap-16">
  <label class="flex-row gap-x-16 items-center justify-between">
    Enable notifications
    <input type="checkbox" role="switch" />
  </label>
  <label class="flex-row gap-x-16 items-center justify-between">
    Marketing emails
    <input type="checkbox" role="switch" />
  </label>
  <label class="flex-row gap-x-16 items-center justify-between">
    Product updates
    <input type="checkbox" role="switch" checked />
  </label>
</div>

Accessibility

Key responsibilities from the WCAG audit:

• Always set role="switch" — required for screen readers to announce the element as a switch instead of a checkbox.
• Always provide a label — wrap the switch in a <label>, or use aria-label / aria-labelledby.
• Manage aria-checked on buttons — for <button> switches, toggle aria-checked between "true" and "false". Checkbox inputs handle this natively.
• No unexpected side effects — toggling a switch should not cause disorienting changes elsewhere on the page without notifying the user (WCAG 3.2.2, flagged for attention).
• Keyboard — focusable via Tab, toggled with Space (checkbox) or Space/Enter (button).
• Avoid disabled switches — disabled switches are hidden from screen readers. Prefer explaining why a setting is unavailable instead.