API reference for Angular Material slide-toggle

import {MatSlideToggleModule} from '@angular/material/slide-toggle';

Selector: mat-slide-toggle

Exported as: matSlideToggle
Properties
Name Description
@Input('aria-describedby')

ariaDescribedby: string

Used to set the aria-describedby attribute on the underlying input element.
@Input('aria-label')

ariaLabel: string | null

Used to set the aria-label attribute on the underlying input element.
@Input('aria-labelledby')

ariaLabelledby: string | null

Used to set the aria-labelledby attribute on the underlying input element.
@Input({ transform: booleanAttribute })

checked: boolean

Whether the slide-toggle element is checked or not.
@Input()

color: string | undefined

Theme color of the slide toggle. This API is supported in M2 themes only, it has no effect in M3 themes. For color customization in M3, see https://material.angular.dev/components/slide-toggle/styling.

For information on applying color variants in M3, see https://material.angular.dev/guide/material-2-theming#optional-add-backwards-compatibility-styles-for-color-variants
@Input({ transform: booleanAttribute })

disableRipple: boolean

Whether the slide toggle has a ripple.
@Input({ transform: booleanAttribute })

disabled: boolean

Whether the slide toggle is disabled.
@Input({ transform: booleanAttribute })

disabledInteractive: boolean

Whether the slide toggle should remain interactive when it is disabled.
@Input({ transform: booleanAttribute })

hideIcon: boolean

Whether to hide the icon inside of the slide toggle.
@Input()

id: string

A unique id for the slide-toggle input. If none is supplied, it will be auto-generated.
@Input()

labelPosition: 'before' | 'after'

Whether the label should appear after or before the slide-toggle. Defaults to 'after'.
@Input()

name: string | null

Name value will be applied to the input element if present.
@Input({ transform: booleanAttribute })

required: boolean

Whether the slide-toggle is required.
@Output()

change: EventEmitter<MatSlideToggleChange>

An event will be dispatched each time the slide-toggle changes its value.
@Output()

toggleChange: EventEmitter<void>

An event will be dispatched each time the slide-toggle input is toggled. This event is always emitted when the user toggles the slide toggle, but this does not mean the slide toggle's value has changed.

buttonId: string

Returns the unique id for the visual hidden button.

defaults: inject<MatSlideToggleDefaultOptions>(MAT_SLIDE_TOGGLE_DEFAULT_OPTIONS)

inputId: string

Returns the unique id for the visual hidden input.
Methods
focus

Focuses the slide-toggle.
registerOnValidatorChange

Implemented as a part of Validator.
Parameters

fn

() => void

toggle

Toggles the checked state of the slide-toggle.
validate

Implemented as a part of Validator.
Parameters

control

AbstractControl<boolean, boolean>

Returns
ValidationErrors | null

Change event object emitted by a slide toggle.

Properties
Name Description

checked: boolean

The new checked value of the slide toggle.

source: MatSlideToggle

The source slide toggle of the event.

Default mat-slide-toggle options that can be overridden.

Properties
Name Description

color: ThemePalette

Default theme color of the slide toggle. This API is supported in M2 themes only, it has no effect in M3 themes. For color customization in M3, see https://material.angular.dev/components/slide-toggle/styling.

For information on applying color variants in M3, see https://material.angular.dev/guide/material-2-theming#optional-add-backwards-compatibility-styles-for-color-variants

disableToggleValue: boolean

Whether toggle action triggers value changes in slide toggle.

disabledInteractive: boolean

Whether disabled slide toggles should remain interactive.

hideIcon: boolean

Whether to hide the icon inside the slide toggle.

Injection token to be used to override the default options for mat-slide-toggle.

const MAT_SLIDE_TOGGLE_DEFAULT_OPTIONS: InjectionToken<MatSlideToggleDefaultOptions>;