Switch

Default

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

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

Checked

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

Invalid

Use aria-invalid=“true” and link adjacent feedback with aria-describedby and its id.

<div>
	<div class="form-switch">
		<input
			class="form-switch-input is-invalid"
			id="switchInvalid"
			name="switchInvalid"
			type="checkbox"
			aria-invalid="true"
			aria-describedby="switchInvalidFeedback" />
		<label class="form-label" for="switchInvalid">Invalid switch</label>
	</div>
	<div class="invalid-feedback" id="switchInvalidFeedback">Please enable this option.</div>
</div>

Disabled

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

CSS Variables

Override these variables on the component or an ancestor.

--form-switch-gap: var(--spacer-2);
--form-switch-input-width: 2.5rem;
--form-switch-input-height: 1.25rem;
--form-switch-input-padding: 0.125rem;
--form-switch-input-bg-color: var(--bg-highlight);
--form-switch-input-border-width: var(--border-width);
--form-switch-input-border-color: var(--control-border-color);
--form-switch-input-border-radius: 9999px;
--form-switch-input-checked-bg-color: var(--primary);
--form-switch-input-checked-border-color: var(--primary);
--form-switch-thumb-size: 1rem;
--form-switch-thumb-bg-color: var(--bg-surface);
--form-switch-thumb-box-shadow: var(--shadow-sm);
--form-switch-thumb-checked-translate-x: calc(
	var(--form-switch-input-width) - var(--form-switch-thumb-size) -
		(var(--form-switch-input-padding) * 2) - (var(--form-switch-input-border-width) * 2)
);
--form-switch-disabled-bg-color: var(--disabled-bg-color);
--form-switch-disabled-border-color: var(--disabled-border-color);
--form-switch-disabled-thumb-bg-color: var(--disabled-text-color);
--form-switch-focus-outline-width: var(--focus-outline-width);
--form-switch-focus-outline-style: var(--focus-outline-style);
--form-switch-focus-outline-color: var(--focus-outline-color);
--form-switch-focus-outline-offset: var(--focus-offset);
--form-switch-transition-duration: var(--transition-duration);
--form-switch-transition-easing: var(--transition-easing);