Checks and Radios

Checkbox

Default checkbox example

Default checkbox

Checked checkbox

HTML Code for this Element

<!-- Default -->
<div class="form-check">
	<input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
	<label class="form-check-label" for="flexCheckDefault">
		Default checkbox
	</label>
</div>
<!-- Checked -->
<div class="form-check">
	<input class="form-check-input" type="checkbox" value="" id="flexCheckChecked" checked>
	<label class="form-check-label" for="flexCheckChecked">
		Checked checkbox
	</label>
</div>

Disabled Checkbox

Add .disabled to a .form-check to disable the checkbox

Disabled checkbox

Disabled checked checkbox

HTML Code for this Element

<div class="form-check">
	<input class="form-check-input" type="checkbox" value="" id="flexCheckDisabled" disabled>
	<label class="form-check-label" for="flexCheckDisabled">
		Disabled checkbox
	</label>
</div>
<div class="form-check">
	<input class="form-check-input" type="checkbox" value="" id="flexCheckCheckedDisabled" checked disabled>
	<label class="form-check-label" for="flexCheckCheckedDisabled">
		Disabled checked checkbox
	</label>
</div>

Radio

Default Radio example

Default radio

Default checked radio

HTML Code for this Element

<div class="form-check">
	<input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault1">
	<label class="form-check-label" for="flexRadioDefault1">
		Default radio
	</label>
</div>
<div class="form-check">
	<input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault2" checked>
	<label class="form-check-label" for="flexRadioDefault2">
		Default checked radio
	</label>
</div>

Disabled Radio

Add the .disabled boolean attribute on an input to remove pointer events.

Disabled radio

Disabled checked radio

HTML Code for this Element

<div class="form-check">
	<input class="form-check-input" type="radio" name="flexRadioDisabled" id="flexRadioDisabled" disabled>
	<label class="form-check-label" for="flexRadioDisabled">
		Disabled radio
	</label>
</div>
<div class="form-check">
	<input class="form-check-input" type="radio" name="flexRadioDisabled" id="flexRadioCheckedDisabled" checked disabled>
	<label class="form-check-label" for="flexRadioCheckedDisabled">
		Disabled checked radio
	</label>
</div>

Switch

A switch has the markup of a custom checkbox but uses the .form-switch class to render a toggle switch.

Default switch checkbox input

Checked switch checkbox input

HTML Code for this Element

<div class="form-check form-switch">
	<input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckDefault">
	<label class="form-check-label" for="flexSwitchCheckDefault">Default switch checkbox input</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 checkbox input</label>
</div>

Disabled Switch

Add the disabled attribute to the input element element to disable any switch. Pointer events are removed.

Disabled switch checkbox input

Disabled checked switch checkbox input

HTML Code for this Element

<div class="form-check form-switch">
	<input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckDisabled" disabled>
	<label class="form-check-label" for="flexSwitchCheckDisabled">Disabled switch checkbox input</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 checkbox input</label>
</div>