id: checkbox
label: Checkbox
family: family-b-selection
category: Form
intent: Toggle a boolean value
description: Checkbox input
composable: false
capabilities: Disabled
required_parts: []
optional_parts: []
tags: ["checkbox", "check", "tick", "selection", "multiple"]
keywords:
pain: Checkbox state desyncs between UI and internal state
promise: Selection state (checked/unchecked/indeterminate) drives visual and aria-checked contract
why: |
CheckboxPrimitive maps ActivityState to checked and ARIA attributes. This ensures UI and accessibility stay in sync. The contract prevents mismatched boolean and DOM state.
rules: ["CR-001", "CR-004"]
use_cases: ["forms", "multi-selection"]
related: ["form", "input", "input_group", "input_otp", "textarea", "field", "label", "form_error_summary"]
file: checkbox_ui.css
tokens: checkbox-*, size-*, radius-*, motion-*, state-*
foundation: size, radius, motion, interaction
states: ["active", "focus", "disabled"]
island: checkbox_boundary.rs
pillar: form
badges: ["SSR Safe", "Hydration Safe", "Token Driven", "Deterministic API", "Zero Drift", "Island Architecture"]
before: |
// ❌ Typical
view! {
<input type="checkbox" checked=state />
}
after: |
// ✅ CanonRS
view! {
<Checkbox checked=true>"Remember me"</Checkbox>
}
boundary_type: init
block: []
blocks_primitives: [stack]