Checkbox

🧭 When to Use a Checkbox

Use a Checkbox when:

• Users can select more than one option from a group

• You want to enable granular control in filters, settings, or preferences

• A binary option (on/off) needs to be placed alongside other independent toggles

Avoid Checkboxes when:

• Only one selection is allowed — use a Radio Button

• The action is destructive or system-level — use a Switch or Button

🔲 Checkbox Item

The Checkbox Item is the interactive visual square that toggles between states. It doesn’t include text by default and is used when icon-only or custom label components are applied separately.

🎯 Statuses

• Default – The resting, neutral state

• Hover – Slight background/border change on pointer hover

• Focus – Visible outline or ring for keyboard users

• Disabled – Non-interactive, dimmed version of the checkbox item

These visual states follow your system's tokenized styling for consistency.

🎨 Types

• Unselected – Empty checkbox

• Selected – Checkmark visible inside the box

• Indeterminate – A horizontal line used when only some sub-options are selected (commonly used in “Select All” logic)

Indeterminate is visually distinct and should not be used as a user-selectable state — it’s a visual cue only.

📏 Sizes

• Large (lg) – Use for mobile layouts, onboarding, or form-heavy screens

• Medium (md) – Default system size, appropriate for most UIs

Sizing impacts the checkbox, label, and spacing tokens between elements.

🧩 Checkbox (Component)

The full Checkbox component combines:

• A Checkbox Item (interactive box)

• A Label (primary text, typically to the right)

• Optional Subtext (secondary explanation or helper content)

All parts are vertically aligned and spaced based on the selected size. These support the same types and statuses as the Checkbox Item alone.

You can toggle the subtext layer in Figma via a property setting or visibility toggle.

♿ Accessibility Considerations

From a design perspective:

• Ensure the Checkbox Item has strong visual cues for hover/focus/disabled

• Keep label text concise and always paired with its checkbox

• Use subtext sparingly to reduce noise and confusion

From a code perspective (if implemented):

• Use <input type="checkbox"> for the interactive element

• Connect the label using <label for=""> or wrap the input and text in a <label> tag

• For indeterminate states, set indeterminate = true via JavaScript (not HTML alone)

• Use aria-checked="mixed" for screen readers when indeterminate

✅ Best Practices

• Group related checkboxes vertically with consistent spacing

• Use indeterminate state only when reflecting a parent/child selection hierarchy

• Never leave checkboxes unlabeled — icons alone don’t provide enough clarity

• Pair checkboxes with hint or error text if used in form validation