Radio group directive toolkit that offers a seamless and accessible solution for creating radio groups.

RadioGroup

Installation

Add and import the module into your imports section.

Modules

Loading syntax highlighter...

Standalone directives

Loading syntax highlighter...

Anatomy

Directive's set structure.

<docs-anatomy [node]="componentStructure" />

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.

<docs-table [columns]="columnsInput" [rows]="rootInputRows" />

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.

<docs-table [columns]="attributesColumns" [rows]="indicatorAttrRows" />

RadioGroupInput Attribute Directive

Directive to hide and bind the input to the custom radio group.

<docs-table [columns]="columnsInput" [rows]="inputInputRows" />

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.

<docs-code [code]="templateVariableExample" language="html" />

State API - RadioGroupStateService

Documentation for the radio group state service API.

Variables

<docs-table [columns]="stateVarsColumns" [rows]="stateRows" />

Methods

<docs-table [columns]="stateMethodsColumns" [rows]="stateMethodRows" />

Types and interfaces

<docs-code [code]="typesAndInterfaces" language="ts" />

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.

<docs-table [columns]="keyboardColumns" [rows]="keyboardRows" />

Progress

Select