Checkbox for Angular

import { AuiCheckbox } from '@absoluteui/angular/checkbox';

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

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

Example

import { Component } from '@angular/core';
import { FormControl, ReactiveFormsModule, Validators } from '@angular/forms';
import { AuiCheckbox } from '@absoluteui/angular/checkbox';

@Component({
  selector: 'app-signup',
  imports: [ReactiveFormsModule, AuiCheckbox],
  template: `<aui-checkbox label="I accept the terms" [required]="true" [formControl]="terms"></aui-checkbox>`,
})
export class SignupComponent {
  readonly terms = new FormControl(false, { nonNullable: true, validators: [Validators.requiredTrue] });
}

<aui-checkbox>

Class AuiCheckbox; template reference #ref="auiCheckbox".

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 checkbox.
hideLabel	boolean	false	Visually hide the label; it remains the accessible name.
indeterminate	boolean	false	Mixed state (aria-checked=mixed via the native property). Cleared when the user toggles.
value	string	'on'	Submitted value when checked.
name	string		Form field name.
description	string		Help text referenced by aria-describedby.
required	boolean	false	The box must be checked; shows the required indicator.
disabled	boolean	false	Disables the checkbox.
validate	(checked: boolean) => string | null		Consumer validation; return a message to mark the state invalid.
icons	Partial<CheckboxIcons>		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
[(checked)]	boolean	(checkedChange)	The checked: [(checked)] without forms; with Angular forms, bind the form control instead.

Outputs

Output	Payload	Description
(changed)	CheckboxChangeDetail	The user toggled the checkbox. 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 user toggles.
getFormValue(): string | null | undefined	value when checked, otherwise null.
focus(): void	Focus the checkbox.
reset(): void	Restore the initial checked and mixed state and clear dirty/touched/submitted state.

Test harness

AuiCheckboxHarness from @absoluteui/angular/testing. <aui-checkbox>.