Component · input.checkbox
Checkbox
A dual-state or tri-state control for selecting an option independently of others.
Informative mappings only. Platform examples below describe possible target primitives. This release does not ship adapters for React, Swift, Android or any other platform.
Anatomy
| Part | Required | Description |
|---|---|---|
input | yes | The checkable box affordance. |
label | yes | Visible text naming the option. |
States
- default
- hover
- focus-visible
- checked
- unchecked
- mixed
- disabled
Keyboard
- Space toggles the checkbox when focused
Accessibility
Expose a checkbox role with checked, unchecked, or mixed state. The name comes from the associated label. Group related checkboxes with a visible group label when they form a set.
Motion
Checkmark may draw in quickly; under reduced motion, set the checked glyph instantly.
Platform mappings
web
web
Native input type=checkbox with label; aria-checked for custom mixed states.
apple
apple
SwiftUI Toggle with checkbox style or UIKit UISwitch alternatives only when the contract matches.
android
android
Compose Checkbox with labeled semantics.