Switch

Build switches from native checkbox inputs or buttons with role="switch"; button switches must manage aria-checked.

Enable notifications

Show codeHide code

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

Button

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

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.

Target size

The switch has a minimum target size of 24px.

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.