Web Components Switch

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

Web Components Switch Example

import {defineComponents, IgcSwitchComponent } from 'igniteui-webcomponents';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

defineComponents(IgcSwitchComponent);
export class SwitchOverview {
    constructor() {
    }
}

new SwitchOverview();
ts

<!DOCTYPE html>
<html>

<head>
  <title>Switch Overview</title>
  <meta charset="UTF-8" />

  <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png">
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
  <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />
</head>

<body>
  <div id="root">
    <div class="container sample center">
      <igc-switch>Switch</igc-switch>
    </div>
  </div>

  <!-- This script is needed only for parcel and it will be excluded for webpack -->
  <% if (false) { %>
    <script src="src/index.ts"></script>
    <% } %>

</body>

</html>html

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */css

Like this sample? Get access to our complete Ignite UI for Web Components toolkit and start building your own apps in minutes. Download it for free.

Usage

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

First, you need to install the Ignite UI for Web Components by running the following command:

npm install igniteui-webcomponents
cmd

You will then need to import the IgcSwitchComponent, its necessary CSS, and register its module, like so:

import { defineComponents, IgcSwitchComponent } from "igniteui-webcomponents";
import 'igniteui-webcomponents/themes/light/bootstrap.css';

defineComponents(IgcSwitchComponent);
ts

For a complete introduction to the Ignite UI for Web Components, read the Getting Started topic.

The simplest way to start using the IgcSwitchComponent is as follows:

<igc-switch></igc-switch>
html

The IgcSwitchComponent component doesn't work with the standard <form> element. Use Form instead.

Examples

Label

To provide a meaningful label for the switch, simply place some text between the opening and closing tags:

<igc-switch>Label</igc-switch>
html

You can specify if the label should be positioned before or after the switch toggle by setting the labelPosition attribute of the switch. Allowed values are before and after(default):

<igc-switch label-position="before">Label</igc-switch>
html

The switch can also be labelled by elements external to the switch. In this case, the user is given full control to position and style the label in accordance with their needs.

<span id="switch-label">Label</span>
<igc-switch aria-labelledby="switch-label"></igc-switch>
html

import {defineComponents, IgcSwitchComponent } from 'igniteui-webcomponents';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
import './SwitchLabelStyles.css'

defineComponents(IgcSwitchComponent);
export class SwitchLabel {
    constructor() {
    }
}

new SwitchLabel();
ts

<!DOCTYPE html>
<html>

<head>
  <title>Switch Label</title>
  <meta charset="UTF-8" />

  <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png">
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
  <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />
</head>

<body>
  <div id="root">
    <div class="container sample center">
      <div class="wrapper">
        <span id="switch-label">Label</span>
        <igc-switch aria-labelledby="switch-label" label-position="before"></igc-switch>
      </div>
    </div>
  </div>

  <!-- This script is needed only for parcel and it will be excluded for webpack -->
  <% if (false) { %>
    <script src="src/index.ts"></script>
    <% } %>

</body>

</html>html

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */css

.wrapper {
    display: flex;
    align-items: center;
}css

Checked

You can use the checked attribute to toggle on the switch.

<igc-switch checked></igc-switch>
html

import {defineComponents, IgcSwitchComponent } from 'igniteui-webcomponents';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

defineComponents(IgcSwitchComponent);
export class SwitchChecking {
    constructor() {
    }
}

new SwitchChecking();
ts

<!DOCTYPE html>
<html>

<head>
  <title>Switch Checking</title>
  <meta charset="UTF-8" />

  <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png">
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
  <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />
</head>

<body>
  <div id="root">
    <div class="container sample center">
      <igc-switch checked>Label</igc-switch>
    </div>
  </div>

  <!-- This script is needed only for parcel and it will be excluded for webpack -->
  <% if (false) { %>
    <script src="src/index.ts"></script>
    <% } %>

</body>

</html>html

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */css

Required

You can use the required attribute to mark the switch as required.

<igc-switch required></igc-switch>
html

Invalid

You can use the invalid attribute to mark the switch as invalid.

<igc-switch invalid></igc-switch>
html

Disabled

You can use the disabled attribute to disable the switch.

<igc-switch disabled></igc-switch>
html

import {defineComponents, IgcSwitchComponent } from 'igniteui-webcomponents';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

defineComponents(IgcSwitchComponent);
export class SwitchDisabled {
    constructor() {
    }
}

new SwitchDisabled();
ts

<!DOCTYPE html>
<html>

<head>
  <title>Switch Disabled</title>
  <meta charset="UTF-8" />

  <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png">
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
  <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />
</head>

<body>
  <div id="root">
    <div class="container sample center">
      <igc-switch disabled>Label</igc-switch>
    </div>
  </div>

  <!-- This script is needed only for parcel and it will be excluded for webpack -->
  <% if (false) { %>
    <script src="src/index.ts"></script>
    <% } %>

</body>

</html>html

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */css

Forms

You can use the name and value attributes when using the switch with Form.

<igc-switch name="wifi" value="enabled"></igc-switch>
html

Styling

The IgcSwitchComponent component exposes several CSS parts to give you full control over its styling:

Name	Description
`base`	The base wrapper of the switch.
`control`	The switch input element.
`thumb`	The position indicator of the switch.
`label`	The switch label.

igc-switch::part(thumb) {
  background-color: var(--ig-success-500);
  box-shadow: none;
}

igc-switch::part(thumb checked) {
  background-color: var(--ig-gray-50);
}

igc-switch::part(control checked) {
  background-color: var(--ig-success-500);
}
css

Web Components Switch