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.
Input props
ToggleGroupRoot Attribute Directive
The root directive that contains the toggle items. Handles the state and bindings.
| Input | Default | Type | Description |
|---|---|---|---|
| type | single | "single" | "multiple" | The type of selection for the toggle group. |
| disabled | false | boolean | Whether or not the toggle group is disabled. |
| orientation | horizontal | "horizontal" | "vertical" | The orientation of the toggle group. |
| rovingFocus | true | boolean | When true, enables roving focus behavior. |
| loop | false | boolean | When true, keyboard navigation will loop back to the start/end. |
| value | null | string[] | string | null | The value(s) of the toggle group. |
| 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.
State API - ToggleGroupStateService
Documentation for the toggle group state service API.
Variables
| Name | Default | Type |
|---|---|---|
| items | [] | mutable<ToggleGroupItemDirective[]> |
Item Methods
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
| Key | Description |
|---|---|
| Enter / Space | Toggles the currently focused item. |
| Home | Navigates to the first element. |
| End | Navigates to the last element. |
| ArrowUp | Moves focus to previous item when orientation is "vertical". |
| ArrowDown | Moves focus to next item when orientation is "vertical". |
| ArrowLeft | Moves focus to previous item when orientation is "horizontal". |
| ArrowRight | Moves focus to next item when orientation is "horizontal". |