Switch

Implemented

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

Categoryatoms

Sourcepatterns/atoms/switch.html

AI HintImmediate binary on/off — role=switch + aria-checked, the effect applies on toggle. For form selections gathered and applied on submit, use Checkbox; hideLabel keeps only the accessible name.

Boolean on/off toggle for settings, feature flags, and instant-apply preferences. FR-CA: Interrupteur marche / arrêt.

Switch

Interactive atom (Family 1 — Tier 1)

Immediate binary on/off — toggling applies the change instantly (settings, preferences, feature flags). For selections gathered with a form and applied on submit (acknowledgment, multi-select), use Checkbox instead: switch = instant effect, checkbox = selection submitted with the form.

This component supports light and dark mode.

Interactive demo

notify = true · dark = false

Usage

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

const [notify, setNotify] = useState(true)

<Switch checked={notify} onChange={setNotify} label="Notifications par courriel" />

Switch vs Checkbox

Switch: immediate binary on/off — the toggle is the action (role="switch", aria-checked).
Checkbox: selection or acknowledgment gathered with a form and applied on submit.
If a Save/Submit step must happen for the change to count, it is a Checkbox, not a Switch.

Accessibility

Renders a native <button role="switch"> with aria-checked.
Space toggles; focus ring uses focus-visible:ring-2.
44px tap target via var(--ep-tap-min) — row-level min-height plus an invisible pseudo-element hit area on the button (holds with hideLabel).
OFF track uses the --ep-neutral-500 token: non-text contrast ≥3:1 against surface and thumb, in light and dark themes (WCAG 1.4.11).

Props

Prop

Type

Default

Description

checked*

boolean

—

Controlled toggle state (aria-checked).

onChange*

(checked: boolean) => void

—

Toggle handler — apply the new state immediately.

label*

string

—

Visible and announced label.

hideLabel

boolean

false

Hides visible text, keeps the accessible name; control alone still meets the 44px tap target.

disabled

boolean

false

Disables interaction.

id

string

—

Override the auto-generated id.

Props

Preview

Switch

Prop

Type

Required

Default

Description

checked

boolean

Required

—

No description.

onChange

(checked: boolean) => void

Required

—

No description.

label

string

Required

—

Visible label for the control.

hideLabel

boolean

Optional

false

Synced from source — no interface JSDoc yet; document on `Switch.tsx`.

disabled

boolean

Optional

false

Disables the control.

Quick use:<Switch />

Accessibility

ARIA roleswitch

Usage

Import

tsxSnippet

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

Example 1

tsxSnippet

<Switch />

Example 2

tsxSnippet

<Switch variant="default" />

Anti-patterns

— Do not compose atoms directly — use molecules instead

— Avoid inline styles on atoms