Toggle directive that offers a simple and accessible solution for creating toggle buttons.
Installation
Add and import the module into your imports section.
Module
Standalone directives
Anatomy
Directive's structure.
<docs-anatomy [node]="componentStructure" />
Input props
ToggleRoot Attribute Directive
The main directive that manages the toggle state and behavior.
<docs-table [columns]="columnsInput" [rows]="rootInputRows" />
| Attribute | Value |
|---|---|
| data-state | "on" | "off" |
| data-disabled | Present when disabled |
| aria-pressed | "true" | "false" |
Access directive API with exportAS
We can access the state of the toggle using a template variable.
Example
Using the template variable to display the current state of the toggle.
<docs-code [code]="templateVariableExample" language="html" />
Accessibility
This Toggle directive is designed in accordance with the WAI-ARIA Authoring Practices Guide for toggle buttons. This ensures our component meets modern accessibility standards, providing an inclusive user experience.
Keyboard Navigation
<docs-table [columns]="keyboardColumns" [rows]="keyboardRows" />