Switch

atoms

Toggle switch — 36×20 pill, teal when on, neutral when off. role='switch' with aria-checked.

ARIA Role: switch

Demo

Demo for Switch (atoms)

Toggle switch — 36×20 pill, teal when on, neutral when off. role='switch' with aria-checked.

Props

PropTypeRequiredDefaultDescription
checkedbooleanYes—
onChange(checked: boolean) => voidYes—

TypeScript Interface

interface SwitchProps {
  checked: boolean;
  onChange: (checked: boolean) => void;
  label: string;
  disabled?: boolean;
  id?: string;
}

Assertions (NASA Rule 5)

  • [type]checked and onChange required(NASA Rule 5)
  • [aria]role='switch' aria-checked (NOT role='checkbox' — semantic distinction)(WAI-ARIA Switch Pattern)

Usage

Import

import { Switch } from '@epasslive/design-system'

Basic

<Switch />

With Variants

<Switch variant="primary" size="md" />