Back to componentszyra-checkbox
Checkbox
Accessible checkbox with indeterminate state, label positioning, three sizes, and full Angular forms support.
API
All inputs and configuration options for zyra-checkbox.
| Prop | Type | Default | Description |
|---|---|---|---|
checked | boolean | false | Two-way bindable checked state via [(checked)] |
size | 'sm' | 'md' | 'lg' | 'md' | Size of the checkbox box and label |
label | string | '' | Visible label text |
labelPosition | 'left' | 'right' | 'right' | Side the label renders on |
disabled | boolean | false | Prevents interaction |
indeterminate | boolean | false | Shows dash icon for partial selection |
Accessibility
Built to meet WCAG 2.0 AA. These notes cover the key ARIA, keyboard, and interaction behaviours.
- Uses role="checkbox" on the interactive button with aria-checked
- Indeterminate state sets aria-checked="mixed"
- Keyboard: Space or Enter to toggle; Tab to focus