Checkbox

Default

Use .form-check together with .form-check-input to style native checkbox inputs.

<div class="form-check">
	<input class="form-check-input" id="checkboxDefault" name="checkboxDefault" type="checkbox" />
	<label class="form-label" for="checkboxDefault">Default checkbox</label>
</div>

Checked

Use the native checked attribute to show a checked checkbox.

<div class="form-check">
	<input class="form-check-input" id="checkboxChecked" name="checkboxChecked" type="checkbox" checked />
	<label class="form-label" for="checkboxChecked">Checked checkbox</label>
</div>

Required

Use .is-required on the label to visually mark required checkboxes.

<div class="form-check">
	<input class="form-check-input" id="checkboxRequired" name="checkboxRequired" type="checkbox" required />
	<label class="form-label is-required" for="checkboxRequired">Required checkbox</label>
</div>

Invalid

Use .is-invalid to style an invalid checkbox and show the related feedback message.

<div>
	<div class="form-check">
		<input class="form-check-input is-invalid" id="checkboxInvalid" name="checkboxInvalid" type="checkbox" />
		<label class="form-label" for="checkboxInvalid">Invalid checkbox</label>
	</div>
	<div class="invalid-feedback">Please accept this option.</div>
</div>

Disabled

Use the native disabled attribute to disable a checkbox.

<div class="form-check">
	<input class="form-check-input" id="checkboxDisabled" name="checkboxDisabled" type="checkbox" disabled />
	<label class="form-label" for="checkboxDisabled">Disabled checkbox</label>
</div>

Disabled checked

Disabled checkboxes can also be checked.

<div class="form-check">
	<input
		class="form-check-input"
		id="checkboxDisabledChecked"
		name="checkboxDisabledChecked"
		type="checkbox"
		checked
		disabled />
	<label class="form-label" for="checkboxDisabledChecked">Disabled checked checkbox</label>
</div>

Checkbox group

Use multiple checkboxes to allow selecting several options.

<div class="d-flex flex-column gap-2">
	<div class="form-check">
		<input class="form-check-input" id="checkboxGroupOne" name="checkboxGroup" type="checkbox" />
		<label class="form-label" for="checkboxGroupOne">Option one</label>
	</div>

	<div class="form-check">
		<input class="form-check-input" id="checkboxGroupTwo" name="checkboxGroup" type="checkbox" checked />
		<label class="form-label" for="checkboxGroupTwo">Option two</label>
	</div>

	<div class="form-check">
		<input class="form-check-input" id="checkboxGroupThree" name="checkboxGroup" type="checkbox" />
		<label class="form-label" for="checkboxGroupThree">Option three</label>
	</div>
</div>