Toggle primitive
Headless Toggle: the behavior, keyboard support and ARIA of the WAI-ARIA Button pattern, with no styles.
@ndop/primitives/toggle- WAI-ARIA: Button
Import
Primitives ship in the @ndop/primitives package and have no styles. Their state is on data attributes for you to style. The styled Toggle is built on this one.
import { NdToggle } from '@ndop/primitives/toggle';Accessibility
Implements the Button pattern of the WAI-ARIA Authoring Practices.
Keyboard
Keys the component handles.
| Key | Action |
|---|---|
| Space | Presses or releases it. |
| Enter | Presses or releases it. |
Focus
- Unchanged from a native button: activating it keeps focus on it.
Right-to-left
Nothing mirrors.
API reference
NdToggle
button[ndToggle]from @ndop/primitives/toggleHeadless toggle button on a native button: pressed or not, announced
with aria-pressed. Space and Enter press or release it. It's also a
ControlValueAccessor for a boolean, which every forms library binds
(ADR-0004, amendments 1 and 4).
Keep its label the same in both states: "Bold", not "Bold on".
Manages aria-pressed.
| NdToggle binding | Type | Default |
|---|---|---|
[defaultPressed]Initial pressed when it isn't bound. | boolean | false |
[disabled]Disables it. A disabled bound field disables it too. | boolean | false |
[(pressed)]Whether it's pressed. Two-way bindable with [(pressed)]. | boolean | false |
| Data attribute | Values |
|---|---|
data-state | — |
data-disabled | — |