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

Usage

At its core, the Switch 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

You will then need to import the Switchand its necessary CSS, like so:

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

defineComponents(IgcSwitchComponent);

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

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

<igc-switch></igc-switch>

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>

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>

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>

Checked

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

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

Required

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

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

Invalid

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

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

Disabled

You can use the disabled attribute to disable the switch.

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

Forms

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

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

Styling

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

  igc-switch {
    --thumb-on-color: white;
    --thumb-off-color: var(--ig-success-500);
    --track-on-color: var(--ig-success-500); /* Background color when checked */
    --track-off-color: white; /* Background color when unchecked */
    --track-on-hover-color: var(--ig-success-500); /* Background hover color when checked */
  }

API References

Additional Resources

• Ignite UI for Web Components Forums
• Ignite UI for Web Components GitHub