Checkbox

Updated 2 months ago
Components
Tokens-backed WCAG 2.2 AAA target Focus-visible

Boolean choice. Use when each option is independent of the others.

Rendered from components/checkbox/recipe.json

When to use Checkbox

Use a checkbox for boolean choices where each option is independent of the others ("Email me when a report finishes", "Include archived records").

For mutually-exclusive choices from a fixed set, use radio buttons (subsequent milestone) or a select.

For binary on/off settings that take effect immediately, prefer a switch — the visual semantics communicate "this is live" better than a checkbox does.

The native <input type="checkbox"> is hidden visually but kept in the accessibility tree; the styled <span> is decorative. This pattern preserves keyboard activation (Space toggles) and screen-reader announcement.

Important Information

Design System disclosure

This site provides open-source design tokens, documentation, and self-hostable software published by Woodfine Capital Projects Inc. Information here is for general reference only and does not constitute an offer, warranty, or a guarantee of fitness for any particular purpose. Statements regarding planned, intended, or targeted future features are forward-looking and subject to change without notice; they are not undertaken to be updated except as required by law.