Switch

The switch component is used to toggle an option.

´ Loading interactive demo...
<div class="dt-switch-margin"> <dt-switch>Default</dt-switch> </div> <div class="dt-switch-margin"> <dt-switch checked>Checked</dt-switch> </div> <div class="dt-switch-margin"> <dt-switch disabled>Disabled</dt-switch> </div> <div class="dt-switch-margin"> <dt-switch checked disabled>Checked Disabled</dt-switch> </div> export class DefaultSwitchExampleComponent { }
Default
Checked
Disabled
Checked Disabled
export class DefaultSwitchExampleComponent { }

Switch on dark background

´ Loading interactive demo...
<div class="dark" dtTheme=":dark"> <div class="dt-switch-margin"> <dt-switch>Default</dt-switch> </div> <div class="dt-switch-margin"> <dt-switch checked>Checked</dt-switch> </div> <div class="dt-switch-margin"> <dt-switch disabled>Disabled</dt-switch> </div> <div class="dt-switch-margin"> <dt-switch checked disabled>Checked Disabled</dt-switch> </div> </div> export class DarkThemeSwitchExampleComponent { }
Default
Checked
Disabled
Checked Disabled
export class DarkThemeSwitchExampleComponent { }

Animation

The switch's toggle transition is animated. The animation-timing-function is set to ease-out.

Multiple switches

Switches underneath each other
x: 20px

Switch

´ Loading interactive demo...
<div class="dt-switch-margin"> <dt-switch>Default</dt-switch> </div> <div class="dt-switch-margin"> <dt-switch checked>Checked</dt-switch> </div> <div class="dt-switch-margin"> <dt-switch disabled>Disabled</dt-switch> </div> <div class="dt-switch-margin"> <dt-switch checked disabled>Checked Disabled</dt-switch> </div> export class DefaultSwitchExampleComponent { }
Default
Checked
Disabled
Checked Disabled
export class DefaultSwitchExampleComponent { }

<dt-switch> is an on/off control that can be toggled via clicking. The switch behaves similarly to a checkbox, though it does not support an indeterminate state.

Imports

You have to import the DtSwitchModule when you want to use the dt-switch:


@NgModule({
  imports: [
    DtSwitchModule,
  ],
})
class MyModule {}

Options & Properties

Name Type Description
ng-content string Text will be set as the label.
@Input() checked boolean Whether or not the switch is checked.
@Input() id string Unique id of the element.
@Input() required boolean Whether the switch is required.
@Input() disabled boolean Whether the element is disabled.
@Input() tabIndex number The elements tab index.
@Input() name string Name value will be applied to the input element if present.
@Input() value <T> The value attribute of the native input element
@Input() aria-label string Takes precedence as the element's text alternative.
@Input() aria-labelledby string Is read after the element's label and field type
@Output() change DtSwitchChange<T> Called every time the switch gets checked or unchecked

Angular forms

<dt-switch> is compatible with @angular/forms and supports both FormsModule and ReactiveFormsModule.

Accessibility

The <dt-switch> uses an internal <input type="checkbox"> to provide an accessible experience. This internal checkbox receives focus and is automatically labelled by the text content of the <dt-switch> element.

Switches without text or labels should be given a meaningful label via aria-label or aria-labelledby.

DarkTheme

´ Loading interactive demo...
<div class="dark" dtTheme=":dark"> <div class="dt-switch-margin"> <dt-switch>Default</dt-switch> </div> <div class="dt-switch-margin"> <dt-switch checked>Checked</dt-switch> </div> <div class="dt-switch-margin"> <dt-switch disabled>Disabled</dt-switch> </div> <div class="dt-switch-margin"> <dt-switch checked disabled>Checked Disabled</dt-switch> </div> </div> export class DarkThemeSwitchExampleComponent { }
Default
Checked
Disabled
Checked Disabled
export class DarkThemeSwitchExampleComponent { }