Radio group directive toolkit that offers a seamless and accessible solution for creating radio groups.
Installation
Add and import the module into your imports section.
Modules
Standalone directives
Anatomy
Directive's set structure.
Input props
RadioGroupRoot Attribute Directive
The root directive that contains the radio items. Handles the state and bindings. It uses the keyboard navigation directive under the hood, extending its inputs to this directive.
| Input | Default | Type | Description |
|---|---|---|---|
| value | — | string | The selected value of the radio group. |
| disabled | false | boolean | Whether or not the radio group is disabled. |
| required | false | boolean | When true, makes the radio group required before submitting. |
| name | — | boolean | The name of the group. If it isn't setted, generates an automatic name. |
| orientation | vertical | "vertical" | "horizontal" | The orientation of the radio group. |
| loop | true | boolean | When true, keyboard navigation will continue navigating. |
| Output | Returns | Description |
|---|---|---|
| valueChange | string | Event handler emitted when the value of the radio group changes |
| Attribute | Value |
|---|---|
| data-disabled | Shows when disabled |
RadioGroupItem Attribute Directive
A directive to bind the state and the accessibility rules to the trigger element.
| Input | Default | Type | Description |
|---|---|---|---|
| value* | — | string | The value of the radio item. |
| disabled | false | boolean | Whether or not the radio item is disabled. |
| Attribute | Value |
|---|---|
| data-state | "open" | "closed" |
| data-disabled | Shows when disabled |
RadioGroupIndicator Attribute Directive
The indicator inside the radio item.
| Attribute | Value |
|---|---|
| data-state | "open" | "closed" |
| data-disabled | Shows when disabled |
RadioGroupInput Attribute Directive
Directive to hide and bind the input to the custom radio group.
| Input | Default | Type | Description |
|---|---|---|---|
| value* | — | string | The value associated to the radio item. |
State
RadioGroupStateService allows to access the radio group properties.
Access directive API with exportAS
We can access the state of the collapsible using a template variable. All the directives expose themself 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="vacCollapsibleRoot" and access the state.
State API - RadioGroupStateService
Documentation for the radio group state service API.
Variables
| Name | Default | Type |
|---|---|---|
| value | — | WritableSignal<boolean> |
| disabled | false | WritableSignal<boolean> |
| name | random-id | WritableSignal<string> |
| required | false | WritableSignal<boolean> |
| radioItems | — | Map<string, Item> |
Methods
| Method | Return | Arguments |
|---|---|---|
| registerItem | void | (value: string, disabled = false, elementRef: ElementRef) |
| unregisterItem | void | (value: string) |
Types and interfaces
Accessibility
This RadioGroup 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 Radio Group Practices. This ensures our component meets modern accessibility standards, providing an inclusive user experience.
Keyboard Navigation
| Key | Description |
|---|---|
| Home | Navigates to the first element. |
| End | Navigates to the last elemenet. |
| ArrowUp | Navigates to the previous element when orientation is "vertical" |
| ArrowDown | Navigates to the previous element when orientation is "vertical" |
| ArrowRight | Navigates to the next element when orientation is "horizontal" |
| ArrowLeft | Navigates to the previous element when orientation is "horizontal" |