Toggle Group for Angular

import { AuiToggleGroup } from '@absoluteui/angular/toggle-group';

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

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

Example

import { Component } from '@angular/core';
import type { ToggleGroupItem } from '@absoluteui/components/toggle-group';
import { AuiToggleGroup } from '@absoluteui/angular/toggle-group';

@Component({
  selector: 'app-view-switch',
  imports: [AuiToggleGroup],
  template: `<aui-toggle-group label="View" [items]="views" [required]="true" [attached]="true" [(value)]="view"></aui-toggle-group>`,
})
export class ViewSwitchComponent {
  view: string[] = ['list'];
  readonly views: ToggleGroupItem[] = [{ value: 'list', label: 'List' }, { value: 'grid', label: 'Grid' }];
}

<aui-toggle-group>

Class AuiToggleGroup; template reference #ref="auiToggleGroup".

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

Angular forms: implements ControlValueAccessor; the form value is string[]. 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. Accessible name of the group.
items	readonly ToggleGroupItem[]		Required. Buttons: { value, label, icon?, iconOnly?, disabled? } (1 to 100, unique values).
multiple	boolean	false	Allow several pressed items.
required	boolean	false	Single mode: one item stays pressed.
orientation	"horizontal" | "vertical"	'horizontal'	Layout and arrow-key axis.
attached	boolean	false	Join the buttons into one segmented control.
disabled	boolean	false	Disable every button.
size	ButtonSize	'md'	Button size.

Two-way bindings

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

Outputs

Output	Payload	Description
(changed)	ToggleGroupChangeDetail	The user changed the pressed items: { value, changed }. Re-emits aui-change.

Methods

Call them through a viewChild query or a template reference.

Method	Description
focus(): void	Focus the button in the tab sequence.