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

    EXAMPLE
    TS
    HTML
    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.

    Ignite UI for Web Components | CTA Banner

    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

    EXAMPLE
    TS
    HTML
    index.css
    SwitchLabelStyles.css

    Checked

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

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

    EXAMPLE
    TS
    HTML
    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

    EXAMPLE
    TS
    HTML
    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

    EXAMPLE

    API References

    Additional Resources