Checkbox with label

Updated 2026-05-14

Overview Content Accessibility Code

Confidence anatomy medium variants medium motion high a11y high content high

Overview

Used for binary choices (on/off) or when a user can select multiple options from a list of related items.

Anatomy

Anatomy diagram coming from Figma

1. 1
   Label

   caller-supplied text bound to the control via for/aria-labelledby
2. 2
   Required indicator

   visible asterisk; aria-required carries the semantics
3. 3
   Control

   the input/select/checkbox/radio/toggle element
4. 4
   Helper text

   optional persistent guidance below the control
5. 5
   Validation message

   error/warning/success; replaces helper text when active
6. 6
   Leading icon (optional)

   decorative or semantic hint inside the control
7. 7
   Trailing icon (optional)

   often interactive — clear, reveal, dropdown caret

Variants

Selected \ State	Default	Hover	Focus	Pressed	Disabled
Yes	—	—	—	—	—
Indeterminate	—	—	—	—	—
No	—	—	—	—	—

Motion

State Transitions

Slug: state-transitions

focus-ring fade-in on focus; opacity transition on disabled

Resources

• Open in Figma
• Knowledge source