Checks & Radios

Checks and Radios in Bootstrap are used to gather some input. These appear to be normal HTML forms; however it is Bootstrap that provides classes which help them look uniform in all browsers and are quite comfortable to click using a mobile.

The most important Bootstrap 5 rule is that they build their components using a wrapper (usually a <div>)This creates the right spacing.

1. The Basic Structure

To create a standard Checks & Radios, you need three parts:

A Wrapper: A <div> with the class .form-check.
The Input: The <input> tag with the class .form-check-input.
The Label: A <label> tag with the class .form-check-label.

Checkboxes (Select Multiple)

Use these when a user can choose one or more options from a list.

HTML

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

Radios (Select One)

Use these when a user must choose only one option. To make them work as a group, they must all share the same name attribute.

HTML

<div class="form-check">
  <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadio1">
  <label class="form-check-label" for="flexRadio1">
    Option 1
  </label>
</div>

2. Layout Styles

Bootstrap gives you flexibility in how these items sit on the page: Stacked (Default): Displays a series of check/radio on an individual line.

Stacked (Default): Each check/radio appears on a new line.
Inline: Add the class .form-check-inline to the wrapper. This puts them all in one row, which is great for “Yes/No” options.
Reverse: Add .form-check-reverse to put the clickable box on the right side of the text instead of the left.

3. The “Switch” (Toggle)

More modern UI elements include the Switch. In the Bootstrap framework a switch is simply a checkbox element that has been decorated with a class. Excellent for things such as “On/Off” options, etc.

How to do it: Add the class .form-switch to your .form-check wrapper.

HTML

<div class="form-check form-switch">
  <input class="form-check-input" type="checkbox" id="flexSwitchCheckDefault">
  <label class="form-check-label" for="flexSwitchCheckDefault">Dark Mode</label>
</div>

4. Useful States

You can control how the user interacts with these elements using simple attributes:

State	Attribute	Effect
Checked	`checked`	The box starts pre-filled.
Disabled	`disabled`	The box is greyed out and unclickable.
Indeterminate	(via JS)	Shows a “dash” instead of a check (common for “Select All” parent boxes).

5. Toggle Buttons (Advanced)

If you want your checkboxes or radios to look like actual buttons (like a filter bar), Bootstrap allows you to hide the “box” and style the label as a button.

Use .btn-check on the input.
Use .btn and a color class (like .btn-outline-primary) on the label.

Note: Always remember to link your <label> to your <input> using the for and id attributes. This ensures that if a user clicks the text, the box still gets checked!