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 |
Tokens
CSS custom properties zyra-checkbox reads at runtime — override any of these in your own stylesheet after @use 'zyra-ng-ui'; to restyle it without touching the component itself.
| Token | Default points to | Description |
|---|---|---|
Background--zyra-color-checkbox-bg | var(--zyra-color-input-bg) | Fill color of the box when unchecked. |
Border--zyra-color-checkbox-border | var(--zyra-color-input-border) | Border color of the box when unchecked. |
Focus shadow--zyra-checkbox-focus-shadow | var(--zyra-input-shadow-focus) | Ring shadow shown on keyboard focus. |
Checked background--zyra-color-checkbox-checked-bg | var(--zyra-color-primary) | Fill color of the box when checked or indeterminate. |
Checked border--zyra-color-checkbox-checked-border | var(--zyra-color-primary) | Border color of the box when checked, indeterminate, or hovered. |
Mark--zyra-color-checkbox-mark | var(--zyra-color-foreground-inverse) | Color of the check/dash icon drawn inside the box. |
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