Checkbox

Checks


	<div class="form-check mb-3">
		<input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
		<label class="form-check-label fs-14 text-body ms-2" for="flexCheckDefault">
			Default checkbox
		</label>
	</div>
	<div class="form-check">
		<input class="form-check-input" type="checkbox" value="" id="flexCheckChecked" checked>
		<label class="form-check-label fs-14 text-body ms-2" for="flexCheckChecked">
			Checked checkbox
		</label>
	</div>

Disabled Checkbox


	<div class="form-check mb-3">
		<input class="form-check-input" type="checkbox" value="" id="flexCheckIndeterminateDisabled" disabled>
		<label class="form-check-label fs-14 text-body ms-2" for="flexCheckIndeterminateDisabled">
			Disabled indeterminate checkbox
		</label>
	</div>
	<div class="form-check mb-3">
		<input class="form-check-input" type="checkbox" value="" id="flexCheckDisabled" disabled>
		<label class="form-check-label fs-14 text-body ms-2" 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 fs-14 text-body ms-2" for="flexCheckCheckedDisabled">
			Disabled checked checkbox
		</label>
	</div>

Radios


	<div class="form-check mb-3">
		<input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault1">
		<label class="form-check-label fs-14 text-body ms-2" 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 fs-14 text-body ms-2" for="flexRadioDefault2">
			Default checked radio
		</label>
	</div>

Disabled Radios


	<div class="form-check mb-3">
		<input class="form-check-input" type="radio" name="flexRadioDisabled" id="flexRadioDisabled" disabled>
		<label class="form-check-label fs-14 text-body ms-2" 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 fs-14 text-body ms-2" for="flexRadioCheckedDisabled">
			Disabled checked radio
		</label>
	</div>

Switches


	<div class="form-check form-switch mb-3">
		<input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckDefault">
		<label class="form-check-label fs-14 text-body ms-2" for="flexSwitchCheckDefault">Default switch checkbox input</label>
	</div>
	<div class="form-check form-switch mb-3">
		<input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckChecked" checked>
		<label class="form-check-label fs-14 text-body ms-2" for="flexSwitchCheckChecked">Checked switch checkbox input</label>
	</div>
	<div class="form-check form-switch mb-3">
		<input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckDisabled" disabled>
		<label class="form-check-label fs-14 text-body ms-2" 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 fs-14 text-body ms-2" for="flexSwitchCheckCheckedDisabled">Disabled checked switch checkbox input</label>
	</div>

Default (stacked)


	<div class="form-check mb-3">
		<input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
		<label class="form-check-label fs-14 text-body ms-2" for="defaultCheck1">
			Default checkbox
		</label>
	</div>
	<div class="form-check">
		<input class="form-check-input" type="checkbox" value="" id="defaultCheck2" disabled>
		<label class="form-check-label fs-14 text-body ms-2" for="defaultCheck2">
			Disabled checkbox
		</label>
	</div>

Default (stacked) Radios


	<div class="form-check mb-3">
		<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" checked>
		<label class="form-check-label fs-14 text-body ms-2" for="exampleRadios1">
			Default radio
		</label>
	</div>
	<div class="form-check mb-3">
		<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2">
		<label class="form-check-label fs-14 text-body ms-2" for="exampleRadios2">
			Second default radio
		</label>
	</div>
	<div class="form-check">
		<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios3" value="option3" disabled>
		<label class="form-check-label fs-14 text-body ms-2" for="exampleRadios3">
			Disabled radio
		</label>
	</div>

Inline


	<div class="form-check form-check-inline mb-3">
		<input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1">
		<label class="form-check-label fs-14 text-body ms-2" for="inlineCheckbox1">1</label>
	</div>
	<div class="form-check form-check-inline mb-3">
		<input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2">
		<label class="form-check-label fs-14 text-body ms-2" for="inlineCheckbox2">2</label>
	</div>
	<div class="form-check form-check-inline">
		<input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="option3" disabled>
		<label class="form-check-label fs-14 text-body ms-2" for="inlineCheckbox3">3 (disabled)</label>
	</div>

Inline Radios


	<div class="form-check form-check-inline mb-3">
		<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
		<label class="form-check-label fs-14 text-body ms-2" for="inlineRadio1">1</label>
	</div>
	<div class="form-check form-check-inline mb-3">
		<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">
		<label class="form-check-label fs-14 text-body ms-2" for="inlineRadio2">2</label>
	</div>
	<div class="form-check form-check-inline">
		<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3" disabled>
		<label class="form-check-label fs-14 text-body ms-2" for="inlineRadio3">3 (disabled)</label>
	</div>

Reverse


	<div class="form-check form-check-reverse mb-3">
		<input class="form-check-input" type="checkbox" value="" id="reverseCheck1">
		<label class="form-check-label fs-14 text-body ms-2" for="reverseCheck1">
			Reverse checkbox
		</label>
	</div>
	<div class="form-check form-check-reverse mb-3">
		<input class="form-check-input" type="checkbox" value="" id="reverseCheck2" disabled>
		<label class="form-check-label fs-14 text-body ms-2" for="reverseCheck2">
			Disabled reverse checkbox
		</label>
	</div>
	<div class="form-check form-switch form-check-reverse">
		<input class="form-check-input" type="checkbox" id="flexSwitchCheckReverse">
		<label class="form-check-label fs-14 text-body ms-2" for="flexSwitchCheckReverse">Reverse switch checkbox input</label>
	</div>

Without labels


	<div>
		<input class="form-check-input" type="checkbox" id="checkboxNoLabel" value="" aria-label="...">
	</div>
	<div>
		<input class="form-check-input" type="radio" name="radioNoLabel" id="radioNoLabel1" value="" aria-label="...">
	</div>

Checkbox toggle buttons


	<input type="checkbox" class="btn-check" id="btn-check" autocomplete="off">
	<label class="btn btn-primary" for="btn-check">Single toggle</label>

	<input type="checkbox" class="btn-check" id="btn-check-2" checked autocomplete="off">
	<label class="btn btn-primary" for="btn-check-2">Checked</label>

	<input type="checkbox" class="btn-check" id="btn-check-3" autocomplete="off" disabled>
	<label class="btn btn-primary" for="btn-check-3">Disabled</label>

Checkbox toggle buttons Border


	<input type="checkbox" class="btn-check" id="btn-check-4" autocomplete="off">
	<label class="btn" for="btn-check-4">Single toggle</label>

	<input type="checkbox" class="btn-check" id="btn-check-5" checked autocomplete="off">
	<label class="btn" for="btn-check-5">Checked</label>

	<input type="checkbox" class="btn-check" id="btn-check-6" autocomplete="off" disabled>
	<label class="btn" for="btn-check-6">Disabled</label>

Radio toggle buttons


	<input type="radio" class="btn-check" name="options" id="option1" autocomplete="off" checked>
	<label class="btn btn-secondary" for="option1">Checked</label>
	
	<input type="radio" class="btn-check" name="options" id="option2" autocomplete="off">
	<label class="btn btn-secondary" for="option2">Radio</label>
	
	<input type="radio" class="btn-check" name="options" id="option3" autocomplete="off" disabled>
	<label class="btn btn-secondary" for="option3">Disabled</label>
	
	<input type="radio" class="btn-check" name="options" id="option4" autocomplete="off">
	<label class="btn btn-secondary" for="option4">Radio</label>

Radio toggle buttons Borders


	<input type="radio" class="btn-check" name="options-base" id="option5" autocomplete="off" checked>
	<label class="btn" for="option5">Checked</label>

	<input type="radio" class="btn-check" name="options-base" id="option6" autocomplete="off">
	<label class="btn" for="option6">Radio</label>

	<input type="radio" class="btn-check" name="options-base" id="option7" autocomplete="off" disabled>
	<label class="btn" for="option7">Disabled</label>

	<input type="radio" class="btn-check" name="options-base" id="option8" autocomplete="off">
	<label class="btn" for="option8">Radio</label>

Outlined styles






	<input type="checkbox" class="btn-check" id="btn-check-outlined" autocomplete="off">
	<label class="btn btn-outline-primary" for="btn-check-outlined">Single toggle</label><br>

	<input type="checkbox" class="btn-check" id="btn-check-2-outlined" checked autocomplete="off">
	<label class="btn btn-outline-secondary" for="btn-check-2-outlined">Checked</label><br>

	<input type="radio" class="btn-check" name="options-outlined" id="success-outlined" autocomplete="off" checked>
	<label class="btn btn-outline-success" for="success-outlined">Checked success radio</label>

	<input type="radio" class="btn-check" name="options-outlined" id="danger-outlined" autocomplete="off">
	<label class="btn btn-outline-danger" for="danger-outlined">Danger radio</label>

Theme System