atom · stable · since 2026-09
Switch
Purpose
A setting that applies at once, as a button with role="switch" and aria-checked written from the state. Its name is its label, inside it. No submit button: the caller acts on onchange.
When to use, when not
Use it for a preference that takes effect the moment it is flipped: show the criterion numbers, sync automatically. Not for a choice submitted with a form (Checkbox), nor for anything that needs a confirmation.
Anatomy
- The button, holding the label and the drawing.
- The label, first, as the setting’s name.
- The track and the thumb, hidden from assistive technology.
- The hint, under, tied by
aria-describedby.
Props
| Name | Type | Default | What it does |
|---|---|---|---|
id | string | The control's id, for a form that references it. | |
label | string | The visible label: the setting, as a noun phrase. It is the switch's name. | |
checked? | boolean | undefined | On or off; bindable, absent reads as off. | |
onchange? | (checked: boolean) => void | Called with the new state, at once: a switch has no submit. | |
hint? | string | undefined | A help sentence, announced with the control. | |
disabled? | boolean | false | Unavailable. |
States
Off, on, with a hint, and unavailable.
disabled
Light
Indisponible sur cette page : le site refuse la capture.
Dark
Indisponible sur cette page : le site refuse la capture.
320 px, light
Indisponible sur cette page : le site refuse la capture.
320 px, dark
Indisponible sur cette page : le site refuse la capture.
216 px, light
Forced colours, captured
on
On at first render.
Light
Dark
320 px, light
320 px, dark
216 px, light
Forced colours, captured
plain
A button with role switch and aria-checked written from the state. The effect is immediate; here the region says it.
Light
Dark
320 px, light
320 px, dark
216 px, light
Forced colours, captured
withHint
Light
Chaque réponse est envoyée à l'application dès qu'elle est saisie.
Dark
Chaque réponse est envoyée à l'application dès qu'elle est saisie.
320 px, light
Chaque réponse est envoyée à l'application dès qu'elle est saisie.
320 px, dark
Chaque réponse est envoyée à l'application dès qu'elle est saisie.
216 px, light
Forced colours, captured
Accessibility contract
- Role and name:
switch, named by its label text;aria-checkedsays on or off. - Keyboard, focus: Tab reaches it, Enter and Space flip it; the ring is the system’s.
- Live regions: none; the switch announces its own state. The page says the consequence its own way when it matters.
- Forced colours: the track and the thumb take ButtonText, Highlight and HighlightText.
Content rules
French. The label is the setting as a noun phrase (“Numéros de critère”), never a verb that would change with the state.
Do and don’t
- Do act in
onchange; a switch that waits for a button is a checkbox. - Do not write “Activer” on a switch: the state is already said.
- Do not announce the flip in a live region; the control already does.
Examples
<Switch id="numbers" label="Numéros de critère" bind:checked={showNumbers} onchange={save} />Surfaces
- Extension: the panel’s display settings, when it is on Svelte.
- App: the notification preferences; not ported yet.
Related
Checkbox.
Decisions
- 2026-09-24: first written as a native checkbox with the switch role, the other implementation the site’s demo shows. The product’s own engine refused it on the design site: ACT rule 4e8ab6 requires
aria-checkedon any element with the switch role, and ARIA in HTML forbids writing it on a native checkbox. The button carries the attribute without conflict, and the state cannot go stale since it is written at every render.
Criteria held by construction
- 7.1, Chaque script est-il, si nécessaire, compatible avec les technologies d'assistance ?
A button with the switch role and aria-checked written from the state on every render: the attribute cannot go stale, and the product's engine checks it is there. - 7.3, Chaque script est-il contrôlable par le clavier et par tout dispositif de pointage ?
A button toggles on Enter and Space and Tab reaches it; nothing is written by hand for the keyboard. - 3.1, Dans chaque page web, l'information ne doit pas être donnée uniquement par la couleur. Cette règle est-elle respectée ?
The state is told by the thumb's position as much as by the track's colour, and under forced colours by the system's palette.
Tokens it reads
- Colour:
--rl-action,--rl-ink,--rl-ink-soft,--rl-line,--rl-line-control,--rl-on-fill,--rl-surface - Typography:
--rl-text-sm - Spacing:
--rl-space-1,--rl-space-4 - Layout:
--rl-border - Motion:
--rl-duration-fast,--rl-ease