Checks, radios and switches

Examples

The class goes on the <input>; the label wraps it, so a click anywhere on the words toggles it.

<fieldset class="vstack gap-8">
	<legend class="form-label">Included</legend>
	<label class="form-check"><input class="check" type="checkbox" checked>Transfer</label>
	<label class="form-check"><input class="check" type="checkbox" checked>Lunch</label>
	<label class="form-check"><input class="check" type="checkbox">Kayaks</label>
</fieldset>

Radios

Radios with one name are one choice; the arrow keys move it.

<fieldset class="vstack gap-8">
	<legend class="form-label">Departure</legend>
	<label class="form-check"><input class="radio" type="radio" name="check-radios-time" checked>Morning, 8:30</label>
	<label class="form-check"><input class="radio" type="radio" name="check-radios-time">Noon, 12:00</label>
	<label class="form-check"><input class="radio" type="radio" name="check-radios-time">Sunset, 16:30</label>
</fieldset>

Switches

A switch is a checkbox with role="switch": on or off, applied at once. One that cannot change keeps its focus with aria-disabled="true" and says why in a hint.

<label class="form-check"><input class="switch" type="checkbox" role="switch" checked>Show on the site</label>
<div class="vstack gap-4">
	<label class="form-check"><input class="switch" type="checkbox" role="switch" aria-disabled="true" aria-describedby="check-switches-why">Hide “Powered by REDZ CMS”</label>
	<div class="form-text" id="check-switches-why"><i class="bi bi-lock" aria-hidden="true"></i> Available with a partner license</div>
</div>

States

A check with some of its items chosen is indeterminate - a property set from script, as there is no attribute for it.

Keyboard and accessibility

• Space toggles a check or a switch; the arrow keys move the choice among radios of one name.
• A set of checks or radios sits in a <fieldset> whose <legend> names it.
• The marks are drawn from the browser's own :checked and :indeterminate, and keep showing in forced colors and in print.
• aria-disabled="true" keeps the control focusable and readable, so its hint can say why; the library ignores clicks and Space on it, as on a button so marked.

Tokens

From css/components/check.css, which declares no custom property of its own.

It reads the theme's --redz-border-strong, --redz-bg, --redz-primary-contrast, --redz-primary, --redz-focus, --redz-border, --redz-bg-page, --redz-bg-hover, --redz-motion, --redz-ease.

From Bootstrap 5.3