Switches
Switches render a single boolean toggle that has an off state and an on state.
Default Switch
The Default Switch description from Figma goes here
1<div class="form-check form-switch m-1">
2 <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckDefault">
3 <label class="form-check-label" for="flexSwitchCheckDefault">
4 Switch Label
5 </label>
6</div>
Disabled Switch
The Disabled Switch description from Figma goes here
1<div class="form-check form-check-disabled form-switch m-1">
2 <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckDisabled" disabled>
3 <label class="form-check-label" for="flexSwitchCheckDisabled">
4 Switch Label
5 </label>
6</div>
7<div class="form-check form-check-disabled form-switch m-1">
8 <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckCheckedDisabled" checked disabled>
9 <label class="form-check-label" for="flexSwitchCheckCheckedDisabled">
10 Switch Label
11 </label>
12</div>Accessibility
Make it clear what this switch widget does for the user.
-
What to do with switches
-
What not to do with switches
Classes
Complete list of all CSS classes for the component.
| Name | Class |
|---|---|
| Default Switch | switch switch-default |
| Disabled Switch | switch switch-disabled |