Slide Toggle

Angular Material Slide Toggle is a simple on/off switch used to toggle a setting or option. The knob slides to the other end of the track when it is switched on, the track picks up the accent color, and a disabled switch is greyed out in whichever state it was left. It can carry a label on either side, and BuilderKit restyles the track, the knob and the label so the mat-slide-toggle component matches the rest of the design system.

For the same on and off choice in a form that is read as a list of options, the checkbox component is the more familiar control.

Example

Below is an example of how BuilderKit restyles the Angular Material Slide Toggle and gives it a more modern appearance.

<mat-slide-toggle />

<mat-slide-toggle>Hide my photo</mat-slide-toggle>

<mat-slide-toggle checked />

Label before the switch

With the label on the leading side the switches line up along the trailing edge, which is how a settings list is usually read.

<mat-slide-toggle labelPosition="before" fullWidth checked>
  Email notifications
</mat-slide-toggle>

<mat-slide-toggle labelPosition="before" fullWidth>Weekly digest</mat-slide-toggle>

Disabled switches

A disabled switch is greyed out in whichever state it was left in. The disabled interactive variant looks the same but stays focusable, so a tooltip can explain why the setting cannot be changed.

<mat-slide-toggle disabled checked>Hide my photo</mat-slide-toggle>

<mat-slide-toggle disabled>Hide my photo</mat-slide-toggle>

<mat-slide-toggle disabled disabledInteractive checked>Hide my photo</mat-slide-toggle>