Toggle

An accessible toggle switch component for binary on/off states. Supports keyboard navigation with Space and Enter keys, and uses proper ARIA switch semantics.

Basic Usage

A simple toggle switch with a label.

Enable feature

Current state: Off

import { useState } from 'react';
import { AccessibleToggle } from '@a13y/react';

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

  return (
    <AccessibleToggle
      checked={enabled}
      onChange={setEnabled}
      label="Enable feature"
    />
  );
}

With Description

Provide additional context with a description.

Email notificationsReceive email updates about your account activity

Dark modeUse dark theme throughout the application

<AccessibleToggle
  checked={notificationsEnabled}
  onChange={setNotificationsEnabled}
  label="Email notifications"
  description="Receive email updates about your account activity"
/>

Disabled State

Toggles can be disabled to prevent user interaction.

Always enabledThis toggle is disabled and cannot be changed

Always disabledThis toggle is disabled in the off state

<AccessibleToggle
  checked={true}
  onChange={() => {}}
  label="Always enabled"
  disabled
/>

Props

Name	Type	Default	Description
`checked*`	`boolean`	-	Whether the toggle is in the on position
`onChange*`	`(checked: boolean) => void`	-	Callback fired when the toggle state changes
`label*`	`string`	-	Label text for the toggle
`description`	`string`	-	Optional description text shown below the label
`disabled`	`boolean`	`false`	Whether the toggle is disabled
`className`	`string`	-	Optional CSS class for the container
`style`	`React.CSSProperties`	-	Optional inline styles for the container

Accessibility Features

✓Uses role="switch" for proper semantics
✓aria-checked indicates current state
✓Keyboard accessible with Space and Enter keys
✓Clear visual focus indicators
✓Description associated via aria-describedby when provided