Checkbox
The kit's checkbox, nol-checkbox, a native checkbox with a drawn tick whose content is its label, which is part of its hit target. It does not keep its own state: it reports each change through CheckboxComponent.checkedChange, and its owner binds the new value back to CheckboxComponent.checked.
Examples
Loading…
States
Loading…
API
Selector nol-checkbox
Import from @noldova/ui.components.angular
Inputs
| Name | Type | Default | Description |
|---|---|---|---|
checked | boolean | false | Whether the box is checked; false when not bound. |
disabled | boolean | false | Whether the box is disabled, which dims it and its tick, and the person cannot toggle it; false when not bound. A disabled box stays in the Tab order and keeps focus when it turns disabled, is marked |
Outputs
| Name | Type | Description |
|---|---|---|
checkedChange | boolean | Emits whether the box is checked each time the person toggles it. |
Accessibility
| Key | Action |
|---|---|
| Tab | Moves the focus to the box, or past it; a disabled box stays in the Tab order. |
| Space | Checks or clears the box; a disabled box refuses it. |
The kit styles the browser's own checkbox, inside a label that holds its text, so the box has the checkbox role, reports whether it is checked, and is named by its text.
A disabled box is marked aria-disabled rather than natively disabled, so it stays focusable, keeps the focus when it turns disabled, and refuses a click or Space.
The check mark is drawn over the box and hidden from assistive technology with aria-hidden.
Specification
Loading…