Checkbox

Default

Combine .form-check with a native .form-check-input.

<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.

<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>

Indeterminate

Set the native indeterminate JavaScript property for a mixed state. It is visual only; synchronize checked with the submitted value.

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

<script>
	const checkbox = document.querySelector('#checkboxIndeterminate');
	checkbox.indeterminate = true;
</script>

Invalid

Combine .is-invalid and aria-invalid=“true”. Link adjacent feedback with aria-describedby and its id.

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

Disabled

Use the native disabled attribute.

<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>

Checkbox group

Group related checkboxes with fieldset and legend.

Choose all that apply

Option one

Option two

Option three

<fieldset class="border border-0 min-w-0">
	<legend class="mb-2">Choose all that apply</legend>

	<div class="d-flex flex-column gap-2">
		<div class="form-check">
			<input
				class="form-check-input"
				id="checkboxGroupOne"
				name="checkboxGroup"
				type="checkbox"
				value="option-one" />
			<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"
				value="option-two"
				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"
				value="option-three" />
			<label class="form-label" for="checkboxGroupThree">Option three</label>
		</div>
	</div>
</fieldset>

CSS Variables

Override these variables on the component or an ancestor.

--form-check-gap: var(--spacer-2);
--form-check-input-size: 1rem;
--form-check-input-border-radius: var(--border-radius-sm, 0.25rem);
--form-check-input-bg-color: var(--bg-surface);
--form-check-input-border-width: var(--border-width);
--form-check-input-border-color: var(--control-border-color);
--form-check-input-checked-bg-color: var(--primary);
--form-check-input-checked-border-color: var(--primary);
--form-check-input-checked-color: var(--on-primary);
--form-check-disabled-bg-color: var(--disabled-bg-color);
--form-check-disabled-border-color: var(--disabled-border-color);
--form-check-transition-duration: var(--transition-duration);
--form-check-transition-easing: var(--transition-easing);