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. UseForm
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 Form
.
<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
Form
labelPosition
IgrSwitch