Switch

New

Turn a setting on or off with a smooth, accessible toggle.

Boolean valueKeyboard accessibleChange event

Overview

Click the label or switch, or focus it and press Space.

Email notifications

No change event yet.

HTMLValue and events

<av-switch label="Email notifications"
  [(ngModel)]="notifications" (onChange)="changed($event)" />

Programmatic changes, reset and disabled state follow the form control.

Automatic updates

Disabled off

Disabled on

Read only

Required setting

Import AvSwitch with FormsModule or ReactiveFormsModule.

TYPESCRIPTChange handler

import { AvSwitch, AvSwitchChangeEvent } from 'avero-ui';

changed(event: AvSwitchChangeEvent): void {
  this.notificationsEnabled = event.checked;
}

Events.onChange emits { checked, originalEvent } for user changes. Programmatic writes and resets do not emit this output.

Theme. Customize --av-switch-accent, --av-switch-background, --av-switch-thumb and --av-switch-focus.