Skip to content
design system
Thème d’affichage, actuellement Auto

atom · stable · since 2026-09

Checkbox

Purpose

A checkbox with its label, native. The browser gives the focus, the Space key, the state to assistive technology and a mark that says it without colour; the component ties the label, the hint and the error so none can be left aside.

When to use, when not

Use it for a yes-or-no choice inside a form, submitted with it, and for a list of independent options. Not for a setting that applies at once (Switch), not for an exclusive choice (RadioGroup).

Anatomy

  1. The control, native, sized and tuned by accent-color.
  2. The label, with the required mark when needed.
  3. The hint and the error, under, tied by aria-describedby.

Props

Props of Checkbox
NameTypeDefaultWhat it does
idstringThe control's id; the label's `for` is the same value.
labelstringThe visible label: what checking means.
name?stringThe name sent with the form.
value?stringThe value sent when checked.
checked?boolean | undefinedChecked or not; bindable, absent reads as unchecked.
hint?string | undefinedA help sentence, announced with the control.
error?string | undefinedThe error message; its presence alone marks the control invalid.
required?booleanfalseRequired: the word goes into the accessible name and the attribute onto the control.
disabled?booleanfalseUnavailable. Prefer a reason written next to it, as Button does, when there is one.

States

Plain, checked, with a hint, required, in error, and unavailable.

checked

Light
Dark
320 px, light
320 px, dark
216 px, light
Forced colours, captured
Checkbox, story checked, as Chromium renders it with forced colours active

disabled

Light

Aucun média sur les pages de l'échantillon.

Dark

Aucun média sur les pages de l'échantillon.

320 px, light

Aucun média sur les pages de l'échantillon.

320 px, dark

Aucun média sur les pages de l'échantillon.

216 px, light

Aucun média sur les pages de l'échantillon.

Forced colours, captured
Checkbox, story disabled, as Chromium renders it with forced colours active

error

aria-invalid on the control, the message tied by aria-describedby and read as an alert.

Light
Dark
320 px, light
320 px, dark
216 px, light
Forced colours, captured
Checkbox, story error, as Chromium renders it with forced colours active

plain

Light
Dark
320 px, light
320 px, dark
216 px, light
Forced colours, captured
Checkbox, story plain, as Chromium renders it with forced colours active

required

The asterisk is hidden from assistive technology; the word "(obligatoire)" is in the name.

Light
Dark
320 px, light
320 px, dark
216 px, light
Forced colours, captured
Checkbox, story required, as Chromium renders it with forced colours active

withHint

Light

Les onze critères du thème 11.

Dark

Les onze critères du thème 11.

320 px, light

Les onze critères du thème 11.

320 px, dark

Les onze critères du thème 11.

216 px, light

Les onze critères du thème 11.

Forced colours, captured
Checkbox, story withHint, as Chromium renders it with forced colours active

Accessibility contract

  • Role and name: a checkbox, named by its label; “(obligatoire)” in the name when required.
  • Keyboard, focus: Tab reaches it, Space toggles; the ring is the system’s.
  • Live regions: the error is role="alert", so a correction is announced without moving the focus.

Content rules

French. The label says what checking means, as a statement (“J’accepte que le rapport soit publié”) or a noun (“Formulaires”). The error says what to do (“Cochez la case pour publier le rapport.”).

Do and don’t

  • Do keep several checkboxes of one question in a fieldset with a legend; RadioGroup shows the shape.
  • Do not redraw the control with display: none on the input.
  • Do not use a checkbox for a setting that applies at once; that is Switch.

Examples

<Checkbox id="publish" label="Publier le rapport" bind:checked={publish} hint="Lisible par toute personne qui a le lien." />

Surfaces

  • App: the settings, the sharing options, the admin forms; not ported yet.

Related

RadioGroup, Switch, Field.

Decisions

  • 2026-09-24: native control, accent-color, as the site’s cases-à-cocher demo argues; redrawing would cost the mark and the system’s focus ring for nothing.

Criteria held by construction

  • 11.1, Chaque champ de formulaire a-t-il une étiquette ?
    The label's for and the control's id come from one prop, so a checkbox cannot be rendered without its label.
  • 11.10, Dans chaque formulaire, le contrôle de saisie est-il utilisé de manière pertinente ?
    The error is tied by aria-describedby and aria-invalid together, and read as an alert without moving the focus.
  • 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 native mark says the checked state as a shape; accent-color only tunes the colour.

Tokens it reads

  • Colour: --rl-action, --rl-ink, --rl-ink-soft, --rl-nc, --rl-focus, --rl-focus-offset, --rl-focus-width
  • Typography: --rl-weight-bold, --rl-text-sm
  • Spacing: --rl-space-1, --rl-space-1-5, --rl-space-2-5
  • Layout: --rl-border-strong

Seen in patterns