Angular Switch Component Overview

The Ignite UI for Angular Switch component is a binary choice selection component that behaves similarly to the switch component in iOS.

Angular Switch Example

Getting Started with Ignite UI for Angular Switch

To get started with the Ignite UI for Angular Switch component, first you need to install Ignite UI for Angular. In an existing Angular application, type the following command:

ng add igniteui-angular

For a complete introduction to the Ignite UI for Angular, read the getting started topic.

The next step is to import the IgxSwitchModule in your app.module.ts file.

// app.module.ts

...
import { IgxSwitchModule } from 'igniteui-angular/switch';
// import { IgxSwitchModule } from '@infragistics/igniteui-angular'; for licensed package

@NgModule({
    ...
    imports: [..., IgxSwitchModule],
    ...
})
export class AppModule {}

Alternatively, as of 16.0.0 you can import the IgxSwitchComponent as a standalone dependency.

// home.component.ts

import { IgxSwitchComponent } from 'igniteui-angular/switch';
// import { IgxSwitchComponent } from '@infragistics/igniteui-angular'; for licensed package

@Component({
  selector: 'app-home',
  template: ` <igx-switch [checked]="true"> Simple switch </igx-switch> `,
  styleUrls: ['home.component.scss'],
  standalone: true,
  imports: [IgxSwitchComponent],
})
export class HomeComponent {}

Now that you have the Ignite UI for Angular Switch module or component imported, you can start using the igx-switch component.

Using the Angular Switch

At its core the switch component allows for toggling between on/off state. The default styling is done according to the selection controls specification in the Material Design guidelines.

To get a simple switch as the one in the demo, add the following code inside the component template:

<igx-switch [checked]="true"> Simple switch </igx-switch>

Switch properties

Let's enhance the code above by binding the switch properties to some data. Say, we have an array of settings objects, each having two properties - name and state. You can bind the switch component checked property to the underlying object state property. Analogically, you can bind the value property to name.

// toggle.component.ts
...
public settings = [
    { name: 'WiFi', state: false},
    { name: 'Bluetooth', state: true},
    { name: 'Device visibility', state: false}
];

Enhance the component template by adding a switch for each setting and then binding the corresponding property:

<!--toggle.component.html-->

<igx-switch *ngFor="let setting of settings" [checked]="setting.state">
  {{ setting.name }}
</igx-switch>

Add some styles:

:host {
  display: flex;
  flex-flow: column nowrap;
  padding: 16px;
}

igx-switch {
  margin-top: 24px;
}

And the final result should be something like that:

Label Positioning

You can position the label using the switch's labelPosition property:

<igx-switch labelPosition="before"></igx-switch>

If the labelPosition is not set, the label will be positioned after the switch.

Styling

Switch Theme Property Map

When you modify a primary property, all related dependent properties are automatically updated to reflect the change:

Material Fluent Bootstrap Indigo

Primary Property	Dependent Property	Description
$track-off-color	$thumb-off-color	Thumb color when switch is off
	$track-disabled-color	Track color when switch is disabled
$thumb-off-color	$track-off-color	Track color when switch is off
	$thumb-disabled-color	Thumb color when switch is disabled
$track-on-color	$thumb-on-color	Thumb color when switch is on
	$track-on-hover-color	Track color when switch is on and hovered
	$track-on-disabled-color	Track color when switch is on and disabled
$thumb-on-color	$track-on-color	Track color when switch is on
	$thumb-on-disabled-color	Thumb color when switch is on and disabled

Primary Property	Dependent Property	Description
$thumb-off-color	$border-color	Border color derived from thumb off color
	$thumb-off-hover-color	Thumb color on hover
$border-color	$thumb-off-color	Thumb off color derived from border color
	$border-hover-color	Border color on hover
	$border-disabled-color	Border color when disabled
$track-off-color	$thumb-off-color	Thumb off color derived from track off color
	$border-hover-color	Border color on hover
	$track-disabled-color	Track color when disabled
$track-on-color	$thumb-on-color	Thumb color when switch is on
	$thumb-on-disabled-color	The color of the thumb when the switch is on and disabled
	$border-on-color	The border color when the switch is on
	$border-on-hover-color	Border color when switch is on and hovered
	$track-on-hover-color	Track color when switch is on and hovered
	$track-on-disabled-color	Track color when on and disabled

Primary Property	Dependent Property	Description
$thumb-off-color	$border-color	Border color derived from thumb off color
	$thumb-off-hover-color	Thumb color on hover
$border-color	$thumb-off-color	Thumb off color derived from border color
	$border-hover-color	Border color on hover
	$border-disabled-color	Border color when disabled
$track-off-color	$thumb-off-color	Thumb off color derived from track off color
	$border-hover-color	Border color on hover
	$track-disabled-color	Track color when disabled
$track-on-color	$thumb-on-color	Thumb color when switch is on
	$thumb-on-disabled-color	The color of the thumb when the switch is on and disabled
	$border-on-color	The border color when the switch is on
	$border-on-hover-color	Border color when switch is on and hovered
	$track-on-hover-color	Track color when switch is on and hovered
	$track-on-disabled-color	Track color when on and disabled
	$focus-fill-color	Fill color when switch is focused
$focus-fill-color	$focus-outline-color	Outline color derived from focus fill
	$focus-fill-hover-color	Focus fill color when hovered

Primary Property	Dependent Property	Description
$thumb-off-color	$border-color	Border color derived from thumb off color
	$thumb-off-hover-color	Thumb color on hover
$border-color	$thumb-off-color	Thumb off color derived from border color
	$border-hover-color	Border color on hover
	$border-disabled-color	Border color when disabled
$track-off-color	$thumb-off-color	Thumb off color derived from track off color
	$border-hover-color	Border color on hover
	$track-disabled-color	Track color when disabled
$track-on-color	$thumb-on-color	Thumb color when switch is on
	$thumb-on-disabled-color	The color of the thumb when the switch is on and disabled
	$border-on-color	The border color when the switch is on
	$track-on-hover-color	Track color when switch is on and hovered
	$track-on-disabled-color	Track color when on and disabled
$border-on-color	$border-on-hover-color	Border color when switch is on and hovered
	$focus-outlined-color-focused	The focus outlined color for focused state

To get started with styling the switch, we need to import the index file, where all the theme functions and component mixins live:

@use "igniteui-angular/theming" as *;

// IMPORTANT: Prior to Ignite UI for Angular version 13 use:
// @import '~igniteui-angular/lib/core/styles/themes/index';

Then, we create a new theme that extends the switch-theme and by providing just two parameters - $thumb-off-color and $thumb-on-color you can get a fully styled switch, as the theme generates all the rest of the necessary colors based on these two, you can of course override any of the other parameters for a customized look:

$custom-switch-theme: switch-theme(
    $thumb-off-color: #7cadd5,
    $thumb-on-color: #ecaa53,
);

Finally, include the custom theme in your application:

@include css-vars($custom-switch-theme);

In the sample below, you can see how using the switch component with customized CSS variables allows you to create a design that visually resembles the switch used in the SAP UI5 design system.

Styling with Tailwind

You can style the switch using our custom Tailwind utility classes. Make sure to set up Tailwind first.

Along with the tailwind import in your global stylesheet, you can apply the desired theme utilities as follows:

@import "tailwindcss";
...
@use 'igniteui-theming/tailwind/utilities/material.css';

The utility file includes both light and dark theme variants.

Use light-* classes for the light theme.
Use dark-* classes for the dark theme.
Append the component name after the prefix, e.g., light-switch, dark-switch.

Once applied, these classes enable dynamic theme calculations. From there, you can override the generated CSS variables using arbitrary properties. After the colon, provide any valid CSS color format (HEX, CSS variable, RGB, etc.).

You can find the full list of properties in the IgxSwitch Theme. The syntax is as follows:

<igx-switch
  class="!light-switch ![--thumb-on-color:#FF4E00]"
  [checked]="true">
  ...
</igx-switch>

Note

The exclamation mark(!) is required to ensure the utility class takes precedence. Tailwind applies styles in layers, and without marking these styles as important, they will get overridden by the component’s default theme.

At the end your switch should look like this:

API References

Theming Dependencies

IgxRipple Theme

Additional Resources

Our community is active and always welcoming to new ideas.