Checkbox
stable 1.5 kB<hk-checkbox>A checkbox with a real third state. A parent bound to a group reports indeterminate when its children disagree, which is the case most implementations skip.
#boolean#indeterminate
Live demo
Running in this page — interact with it.
Inputs
| Name | Type | Default | Description |
|---|---|---|---|
| checked | boolean | false | Model value. Two-way bindable. |
| indeterminate | boolean | false | Renders the mixed state. Independent of checked. |
| label | string | '' | Accessible label, rendered unless labelHidden is set. |
| disabled | boolean | false | Blocks interaction and dims the box. |
Outputs
changedEventEmitter<boolean>Emits the new value on toggle.
Keyboard
- Space Toggles the value
- Tab Moves focus in and out
Theming
Component tokens, each falling back to a global one:
| Property | Default | Controls |
|---|---|---|
| --hk-checkbox-size | 1rem | Box edge length. |
| --hk-checkbox-fill | #dc2626 | Fill when checked or indeterminate. |
| --hk-checkbox-tick | #ffffff | Tick and dash colour. |
Accessibility
- Sets aria-checked="mixed" for the indeterminate state rather than faking it with a class.
- The whole label is the hit target, not just the 16px box.