Switch for Angular

import { AuiSwitch } from '@absoluteui/angular/switch';

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

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

Example

import { Component } from '@angular/core';
import { FormControl, ReactiveFormsModule } from '@angular/forms';
import { AuiSwitch } from '@absoluteui/angular/switch';

@Component({
  selector: 'app-settings',
  imports: [ReactiveFormsModule, AuiSwitch],
  template: `<aui-switch label="Email notifications" description="Weekly summary" [formControl]="notifications"></aui-switch>`,
})
export class SettingsComponent {
  readonly notifications = new FormControl(false, { nonNullable: true });
}

<aui-switch>

Class AuiSwitch; template reference #ref="auiSwitch".

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

Angular forms: implements ControlValueAccessor and Validator; the form value is boolean. 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. Visible label and accessible name; clicking it toggles the switch.
hideLabel	boolean	false	Visually hide the label; it remains the accessible name.
value	string	'on'	Submitted value when on.
name	string		Form field name.
description	string		Help text referenced by aria-describedby.
disabled	boolean	false	Disables the switch.
icons	Partial<SwitchIcons>		Icon slot overrides.
validationTiming	ValidationTiming	'blur'	When a custom error message first appears; afterwards it updates live.
locale	string	'en-US'	Message locale.

Two-way bindings

Model	Type	Change output	Description
[(checked)]	boolean	(checkedChange)	The checked: [(checked)] without forms; with Angular forms, bind the form control instead.

Outputs

Output	Payload	Description
(changed)	SwitchChangeDetail	The user toggled the switch. Re-emits aui-change.

Methods

Call them through a viewChild query or a template reference.

Method	Description
reportValidity(): boolean | undefined	Show a custom error now and return validity.
setCustomError(message: string | null): void	External error, for example a failed save; cleared when the user toggles.
getFormValue(): string | null | undefined	value when on, otherwise null.
focus(): void	Focus the switch.
reset(): void	Restore the initial state and clear dirty/touched/submitted state.

Test harness

AuiSwitchHarness from @absoluteui/angular/testing. <aui-switch>.