Toggle group directive toolkit that offers a seamless and accessible solution for creating toggle groups with single or multiple selection.
Installation
Add and import the module into your imports section.
Module
Standalone directives
Anatomy
Directive's set structure.
<docs-anatomy [node]="componentStructure" />
Input props
ToggleGroupRoot Attribute Directive
The root directive that contains the toggle items. Handles the state and bindings.
<docs-table [columns]="columnsInput" [rows]="rootInputRows" />
| Output | Returns | Description |
|---|---|---|
| valueChange | string[] | string | null | Event handler emitted when the value of the toggle group changes |
| Attribute | Value |
|---|---|
| data-orientation | "horizontal" | "vertical" |
ToggleGroupItem Attribute Directive
A directive to bind the state and the accessibility rules to the toggle element.
| Input | Default | Type | Description |
|---|---|---|---|
| value* | — | string | The value of the toggle item. |
| disabled | false | boolean | Whether or not the toggle item is disabled. |
| Output | Returns | Description |
|---|---|---|
| toggle | void | Event handler emitted when the toggle item is toggled |
| Attribute | Value |
|---|---|
| data-state | "on" | "off" |
| data-disabled | Shows when disabled |
| data-orientation | "horizontal" | "vertical" |
| role | radio (when type is "single") or null |
| aria-pressed | true | false (when type is "multiple") |
| aria-checked | true | false (when type is "single") |
State
ToggleGroupStateService allows to access the toggle group properties.
Access directive API with exportAS
We can access the state of the toggle group using a template variable. All the directives expose themselves with the same name. We have access to the directive's attributes and also the state service.
Example
We could use it with any other directive. For example with #root="vacToggleGroupRoot" and access the state.
<docs-code [code]="templateVariableExample" language="html" />
State API - ToggleGroupStateService
Documentation for the toggle group state service API.
Variables
<docs-table [columns]="stateVarsColumns" [rows]="stateRows" />
Item Methods
<docs-code [code]="itemMethodsExample" language="ts" />
Features
- Full keyboard navigation.
- Supports both single and multiple selection modes.
- Provides roving focus capabilities.
- Can be controlled or uncontrolled
Accessibility
This Toggle Group set of directives is designed in accordance with the WAI-ARIA Authoring Practices Guide. For more details on accessibility features and guidelines, please refer to the WAI-ARIA Toggle Button Practices. This ensures our component meets modern accessibility standards, providing an inclusive user experience.
Keyboard Navigation
<docs-table [columns]="keyboardColumns" [rows]="keyboardRows" />