Selection · §5.6

Checkbox

Independent choices and consent.

State
Theme
Contrast
Language
Motion
Text size

Code

<Checkbox id="consent" /><FieldLabel htmlFor="consent">I agree to share these updates</FieldLabel>

Accessibility

  • The label is clickable; 44 px hit area around an 18 px box.

Usage

Do

  • Group related options in a fieldset.

Don't

  • Never pre-tick consent.

Platforms

Web
apps/web/components/ui/checkbox.tsx
iOS
SwiftUI Toggle(.checkbox) / custom
Android
Compose Checkbox