React Switch

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

    React Switch Example

    Usage

    At its core, the IgrSwitch 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 the install the corresponding Ignite UI for React npm package by running the following command:

    npm install igniteui-react

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

    import { IgrSwitchModule, IgrSwitch } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
IgrSwitchModule.register();

    <IgrSwitch></IgrSwitch>

    [!WARNING] The IgrSwitch component doesn't work with the standard <form> element. Use IgrForm instead.

    Examples

    Label

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

    <IgrSwitch><span>Label</span></IgrSwitch>

    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):

    <IgrSwitch ariaLabelledby="switchLabel" labelPosition="Before" ><span id="switch-label">Label</span></IgrSwitch>

    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>
<IgrSwitch ariaLabelledby="switchLabel"></IgrSwitch>

    Checked

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

    <IgrSwitch checked="true"></IgrSwitch>

    Required

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

    <IgrSwitch required="true"></IgrSwitch>

    Invalid

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

    Disabled

    You can use the disabled attribute to disable the switch.

    <IgrSwitch disabled="true"></IgrSwitch>

    Forms

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

    <IgrSwitch name="wifi" value="enabled"></IgrSwitch>

    Styling

    The switch component exposes several CSS parts (base, control, thumb, and label) to give you full control over its styling.

    igc-switch::part(control) {
  background: beige;
  border-radius: 0;
}

igc-switch::part(thumb) {
  background: olive;
  border-radius: 2px;
  box-shadow: none;
}

    API References

    Additional Resources