Overview for slide-toggle
<mat-slide-toggle>
is an on/off control that can be toggled via clicking.
The slide-toggle behaves similarly to a checkbox, though it does not support an indeterminate
state like <mat-checkbox>
.
Slide-toggle label
The slide-toggle label is provided as the content to the <mat-slide-toggle>
element.
If you don't want the label to appear next to the slide-toggle, you can use
aria-label
or
aria-labelledby
to
specify an appropriate label.
Use with @angular/forms
<mat-slide-toggle>
is compatible with @angular/forms
and supports both FormsModule
and ReactiveFormsModule
.
Accessibility
MatSlideToggle
uses an internal <button role="switch">
to provide an accessible experience. This
internal button receives focus and is automatically labelled by the text content of the
<mat-slide-toggle>
element. Avoid adding other interactive controls into the content of
<mat-slide-toggle>
, as this degrades the experience for users of assistive technology.
Always provide an accessible label via aria-label
or aria-labelledby
for toggles without
descriptive text content. For dynamic labels, MatSlideToggle
provides input properties for binding
aria-label
and aria-labelledby
. This means that you should not use the attr.
prefix when
binding these properties, as demonstrated below.
<mat-slide-toggle [aria-label]="isSubscribedToEmailsMessage">
</mat-slide-toggle>