Switch
stable 2.1 kB<hk-switch>A checkbox that reads as an on/off control. Model-bound through a signal, so no ControlValueAccessor boilerplate unless you want reactive forms — in which case it implements one too.
#toggle#checkbox#boolean
Live demo
Running in this page — interact with it.
Inputs
| Name | Type | Default | Description |
|---|---|---|---|
| checked | boolean | false | Model value. Supports two-way binding via [(checked)]. |
| size | 'sm' | 'md' | 'lg' | 'md' | Track and thumb scale. |
| accent | string | 'crimson' | Named accent, or any CSS colour. |
| label | string | '' | Accessible label. Rendered visually unless labelHidden is set. |
| disabled | boolean | false | Blocks interaction and dims the track. |
Outputs
changedEventEmitter<boolean>Fires after the value settles.
Keyboard
- Space / Enter Toggles the value
- Tab Moves focus in and out
Theming
Component tokens, each falling back to a global one:
| Property | Default | Controls |
|---|---|---|
| --hk-switch-track | #262626 | Track colour when off. |
| --hk-switch-thumb | #ffffff | Thumb colour. |
| --hk-switch-ease | cubic-bezier(.34,1.56,.64,1) | Thumb travel easing. |
Accessibility
- Renders role="switch" with aria-checked reflecting the model.
- Label is wired through aria-label or aria-labelledby, never left implicit.
- Thumb travel honours prefers-reduced-motion.