Examples and usage guidelines for form control styles, layout options, and custom components for creating a wide variety of forms.
Switches
A switch has the markup of a custom checkbox but uses the
.form-switch class to render a toggle switch.
Consider using role="switch" to more accurately convey the
nature of the control to assistive technologies that support
this role. In older assistive technologies, it will simply be
announced as a regular checkbox as a fallback. Switches also
support the disabled attribute.
COPY
<div class="form-check form-switch">
<input type="checkbox" class="form-check-input" role="switch" id="customSwitch1" />
<label class="form-check-label" for="customSwitch1">Toggle this switch element</label>
</div>
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckChecked" checked>
<label class="form-check-label" for="flexSwitchCheckChecked">Checked switch element</label>
</div>
<div class="form-check form-switch">
<input type="checkbox" class="form-check-input" role="switch" id="customSwitcdiv" disabled/>
<label class="form-check-label" for="customSwitcdiv">Disabled switch element</label>
</div>
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckCheckedDisabled" checked disabled>
<label class="form-check-label" for="flexSwitchCheckCheckedDisabled">Disabled checked switch element</label>
</div>
Loading...