Switch

Alpha

An accessible toggle switch with label, checked state management, and CSS variable theming.

Import

import { Switch } from "@compa11y/react";

Usage

Example.tsx

import { useState } from "react";
import { Switch } from "@compa11y/react";

function Example() {
  const [enabled, setEnabled] = useState(false);

  return (
    <Switch
      checked={enabled}
      onCheckedChange={setEnabled}
    >
      Enable notifications
    </Switch>
  );
}

Features

Toggle on/off state
Accessible label
Keyboard activation with Space and Enter
CSS variable customization for colors and sizing
aria-checked attribute

Props

Switch component props
Prop	Type	Default	Description
`checked`	`boolean`	`false`	Controlled checked state
`onCheckedChange`	`(checked: boolean) => void`	-	Called when checked state changes
`disabled`	`boolean`	`false`	Disables the switch
`children`	`ReactNode`	-	Label text

Keyboard Interactions

Accessibility

All keyboard interactions follow WAI-ARIA best practices and work without any additional configuration.

Keyboard shortcuts for Switch
Key	Action
`Space`	Toggles the switch
`Enter`	Toggles the switch

CSS Customization

Override these CSS custom properties to customize the appearance.

CSS custom properties for Switch
Variable	Description	Default
`--compa11y-switch-bg`	Background when unchecked	`#d1d5db`
`--compa11y-switch-checked-bg`	Background when checked	`#10b981`
`--compa11y-switch-thumb-bg`	Thumb color	`white`
`--compa11y-switch-width`	Switch width	`3rem`
`--compa11y-switch-height`	Switch height	`1.75rem`