Switches

Switches render a single boolean toggle that has an off state and an on state.

Default Switch

<div class="form-check form-switch m-1">
	<input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckDefault">
	<label class="form-check-label" for="flexSwitchCheckDefault">
		Switch Label
	</label>
</div>

Disabled Switch

<div class="form-check form-check-disabled form-switch m-1">
	<input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckDisabled" disabled>
	<label class="form-check-label" for="flexSwitchCheckDisabled">
		Switch Label
	</label>
</div>
<div class="form-check form-check-disabled form-switch m-1">
	<input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckCheckedDisabled" checked disabled>
	<label class="form-check-label" for="flexSwitchCheckCheckedDisabled">
		Switch Label
	</label>
</div>

Accessibility

Make it clear what this switch widget does for the user.

What to do with switches

DON'T

What not to do with switches

Classes

Complete list of all CSS classes for the component.

Name	Class
Switch	`form-check form-switch`
Switch	`form-check form-switch`