Radio Group for Angular

import { AuiRadioGroup } from '@absoluteui/angular/radio-group';

Styles are included with the component. Behavior, keyboard and screen-reader support, design tokens, and limitations are described on the Radio Group page; this page covers the Angular API.

Defaults for every instance: provideAbsoluteUIConfig({ components: { radioGroup: { ... } } }) (see Configuration).

Example

import { Component } from '@angular/core';
import { FormControl, ReactiveFormsModule, Validators } from '@angular/forms';
import { AuiRadioGroup } from '@absoluteui/angular/radio-group';

@Component({
  selector: 'app-shipping',
  imports: [ReactiveFormsModule, AuiRadioGroup],
  template: `<aui-radio-group label="Shipping speed" [options]="speeds" [required]="true" [formControl]="speed"></aui-radio-group>`,
})
export class ShippingComponent {
  readonly speeds = [
    { value: 'standard', label: 'Standard' },
    { value: 'express', label: 'Express' },
  ];
  readonly speed = new FormControl<string | null>(null, { validators: [Validators.required] });
}

<aui-radio-group>

Class AuiRadioGroup; template reference #ref="auiRadioGroup".

Server rendering: Renders on the server; the browser re-creates it after hydration.

Angular forms: implements ControlValueAccessor and Validator; the form value is string \| null. Bind [formControl], formControlName, or [(ngModel)]; validation messages of the component report through the aui error key. See Forms.

Inputs

Input	Type	Default	Description
label	string		Required. Legend text and accessible name of the radiogroup.
hideLabel	boolean	false	Visually hide the legend; it remains the accessible name.
options	readonly RadioGroupOption[]		Required. Choices; values must be unique.
name	string		Native radio name; a unique name is generated when absent.
description	string		Group help text referenced by the radiogroup’s aria-describedby.
required	boolean	false	A selection is required (aria-required on the radiogroup, native required on radios).
orientation	RadioGroupOrientation	'vertical'	Layout of the options.
disabled	boolean	false	Disables the whole group (fieldset disabled).
validate	(value: string | null) => string | null		Consumer validation; return a message to mark the selection invalid.
icons	Partial<RadioGroupIcons>		Icon slot overrides.
validationTiming	ValidationTiming	'blur'	When validation messages first appear; afterwards they update live.
locale	string	'en-US'	Message locale.

Two-way bindings

Model	Type	Change output	Description
[(value)]	string | null	(valueChange)	The value: [(value)] without forms; with Angular forms, bind the form control instead.

Outputs

Output	Payload	Description
(changed)	RadioGroupChangeDetail	The user selected an option (click, Space, or arrow keys). Re-emits aui-change.

Methods

Call them through a viewChild query or a template reference.

Method	Description
reportValidity(): boolean | undefined	Show messages now and return validity.
setCustomError(message: string | null): void	External error; cleared when the selection changes.
getFormValue(): string | null | undefined	Selected value for form serialization.
focus(): void	Focus the selected radio, else the first enabled radio.
reset(): void	Restore the initial selection and clear dirty/touched/submitted state.

Test harness

AuiRadioGroupHarness from @absoluteui/angular/testing. <aui-radio-group>.