Toggle directive that offers a simple and accessible solution for creating toggle buttons.
Toggle
Loading component...
Installation
Add and import the module into your imports section.
Module
Loading syntax highlighter...
Standalone directives
Loading syntax highlighter...
Anatomy
Directive's structure.
vacToggleRoot
Input props
ToggleRoot Attribute Directive
The main directive that manages the toggle state and behavior.
| Input | Default | Type | Description |
|---|---|---|---|
| pressed | null | model<boolean | null> | The pressed state of the toggle. Use two-way binding with [(pressed)]. |
| disabled | false | boolean | Whether or not the toggle is disabled. |
| 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.
Loading syntax highlighter...
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
| Key | Description |
|---|---|
| Space | Toggles the button state. |
| Enter | Toggles the button state. |
Previous
Toggle GroupNext
Tooltip