Switch
The kit's switch, nol-switch, a native checkbox exposed as a switch, drawn as a track with a knob, at the end of its label, which is its content and part of its hit target. A switch with no visible label takes its name from SwitchComponent.label. It is controlled: a click or Space only reports the new value through SwitchComponent.checkedChange, and the switch keeps showing SwitchComponent.checked until its owner binds the new value, so an owner that refuses a change binds nothing.
Examples
Loading…
States
Loading…
API
Selector nol-switch
Import from @noldova/ui.components.angular
Inputs
| Name | Type | Default | Description |
|---|---|---|---|
checked | boolean | false | Whether the switch is on, which fills its track with the accent and moves its knob to the track's end; false when not bound. It is all the switch shows. |
disabled | boolean | false | Whether the switch is disabled, which dims it and its label, and the person cannot toggle it; false when not bound. A disabled switch stays in the Tab order and keeps focus when it turns disabled, is marked |
disabledReason | string | null | Why the switch is disabled, which a disabled switch shows under its label in muted text at the label text size, at full strength rather than dimmed, and gives as its accessible description; nothing shows while the switch is enabled, or when not bound, null or empty. It wraps within the label's width and never widens the switch; a switch with no visible label shows it as wide as its owner sets the switch. |
label | string | null | The switch's accessible name when it has no visible label, such as in a row whose text names it elsewhere; none when not bound or null. |
Outputs
| Name | Type | Description |
|---|---|---|
checkedChange | boolean | Emits the value the person asks for each time they toggle the switch, which shows it only once its owner binds it to |
Accessibility
| Key | Action |
|---|---|
| Tab | Moves the focus to the switch, or past it; a disabled switch stays in the Tab order. |
| Space | Asks the owner to turn the switch on or off; it shows the new state once its owner binds it. A disabled switch refuses it. |
A native checkbox with the switch role, which reports whether it is on; the label around it holds the text that names it, and label names a switch with no visible text, as aria-label.
It is controlled: a toggle emits checkedChange, and the switch shows the new state only once its owner binds checked to it.
A disabled switch is marked aria-disabled, so it stays focusable; its disabledReason shows under it and is named in aria-describedby.
The knob is drawn over the track and hidden from assistive technology with aria-hidden.
Specification
Loading…