Checkbox

A checkbox lets users toggle an option on or off, or select multiple items from a set, using a native input element paired with a visible label.

Demo

Interact with the checkboxes below using a mouse or keyboard. Press Tab to move focus to a checkbox and Space to toggle its checked state. Try both the simple labeled variant and the variant with additional description text.

Scenario: Checkbox with label

Scenario: Checkbox with additional state information

What to Observe

• Each checkbox receives a visible focus ring when navigated to with the keyboard.
• The label is programmatically associated with the input so screen readers announce the full control name.
• In the second scenario, supplemental description text is linked via aria-describedby and read after the label.
• The checked and unchecked states are communicated to assistive technology without requiring visual cues alone.
• Clicking anywhere on the label text toggles the checkbox, increasing the effective click target.

Anatomy

[Anatomy image placeholder — will be added when assets are available]

1. Input element — The native <input type="checkbox"> that holds the checked state and receives keyboard focus.
2. Label — A <label> element associated with the input via for/id, providing the accessible name.
3. Description text — Optional hint or context copy linked to the input via aria-describedby.
4. Error message — Inline validation text that can also be linked via aria-describedby when the field is invalid.
5. Group container — A <fieldset> with a <legend> used when multiple checkboxes form a logical set.

Accessibility Behavior

• The checkbox must have a visible, programmatically associated label — never rely on placeholder text or visual positioning alone.
• Focus must be clearly visible on the checkbox control when navigated to with a keyboard.
• Pressing Space must toggle the checked state; no other key should be required.
• Any supplemental hint text or error message must be linked to the input so screen readers announce it automatically.
• When checkboxes belong to a group (for example, a list of preferences), the group must be wrapped in a <fieldset> with a <legend> that names the group.
• An indeterminate state, when used, must be set programmatically and communicated to assistive technology.

Common Mistakes

• Using a custom <div> or <span> as a checkbox without adding the correct ARIA role, state, and keyboard handling.
• Omitting the for/id association between label and input, making the control anonymous to screen readers.
• Hiding the native input visually without ensuring it remains keyboard-focusable and accessible.
• Placing hint or error text in the DOM without linking it to the input via aria-describedby.
• Grouping related checkboxes in a plain <div> instead of a <fieldset>/<legend>, so the group name is never announced.

Why This Matters

Checkboxes are among the most common form controls on the web. When they lack proper labeling or keyboard support, users who rely on screen readers hear nothing meaningful when they focus the control, and users who navigate by keyboard cannot interact at all. This creates a complete barrier to submitting forms — affecting sign-ups, preference settings, consent flows, and any other interaction that depends on binary choices.

Accessibility Validation

This component is validated against internal accessibility criteria aligned with WCAG standards, using our internally developed system, Resonance Specs.

To learn more, please contact us.

Code

Scenario: Checkbox with label

Scenario: Checkbox with additional state information

Reference Implementation

• Back to Home
• GitHub Code