Switch

Default

Use .form-switch together with .form-switch-input to style a native checkbox as a switch.

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

Required

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

Invalid

<div>
	<div class="form-switch">
		<input class="form-switch-input is-invalid" id="switchInvalid" name="switchInvalid" type="checkbox" />
		<label class="form-label" for="switchInvalid">Invalid switch</label>
	</div>
	<div class="invalid-feedback">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>

Disabled checked

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

Switch group

<div class="d-flex flex-column gap-2">
	<div class="form-switch">
		<input class="form-switch-input" id="switchGroupOne" name="switchGroupOne" type="checkbox" checked />
		<label class="form-label" for="switchGroupOne">Enable notifications</label>
	</div>

	<div class="form-switch">
		<input class="form-switch-input" id="switchGroupTwo" name="switchGroupTwo" type="checkbox" />
		<label class="form-label" for="switchGroupTwo">Enable dark mode</label>
	</div>

	<div class="form-switch">
		<input class="form-switch-input" id="switchGroupThree" name="switchGroupThree" type="checkbox" />
		<label class="form-label" for="switchGroupThree">Enable auto updates</label>
	</div>
</div>