Bootstrap - Checks & Radios: A Guide for Beginners

Hello there, future web developers! Today, we're diving into the exciting world of Bootstrap's form controls, specifically checkboxes and radio buttons. These small interactive elements may appear simple, but they are incredibly powerful for collecting user input. So, let's roll up our sleeves and get started!

Introduction to Bootstrap Form Controls

Before we delve into the details, let's take a moment to understand why we're learning about Bootstrap. Imagine you're building a house. You could craft each brick from scratch, or you could use pre-made components. Bootstrap is like a treasure chest of pre-made components for your website. It saves time and ensures consistency. Now, let's explore our first component!

Checkbox: The Multi-Selection Marvel

Basic Checkbox

Checkboxes are like little square boxes that users can click to select multiple options. They are ideal when you want users to choose more than one item from a list. Let's create our first checkbox:

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

In this example, we're using Bootstrap classes to style our checkbox. The form-check class acts as a wrapper, while form-check-input styles the checkbox itself. The for attribute in the label corresponds to the id of the input, linking them together.

Checked State

Sometimes, you want a checkbox to be pre-checked. It's as simple as adding the checked attribute:

<div class="form-check">
<input class="form-check-input" type="checkbox" id="flexCheckChecked" checked>
<label class="form-check-label" for="flexCheckChecked">
Pre-checked checkbox
</label>
</div>

Indeterminate State

Now, here's an interesting fact: checkboxes can have a third state called "indeterminate". It's like when your teenager cleans their room - it's not exactly clean, but not entirely messy either. We can't set this state in HTML, but we can with JavaScript:

<div class="form-check">
<input class="form-check-input" type="checkbox" id="flexCheckIndeterminate">
<label class="form-check-label" for="flexCheckIndeterminate">
Indeterminate checkbox
</label>
</div>

<script>
document.getElementById('flexCheckIndeterminate').indeterminate = true;
</script>

Disabled Checkbox

Sometimes, you might want to display a checkbox but not allow users to interact with it. That's where the disabled attribute comes in handy:

<div class="form-check">
<input class="form-check-input" type="checkbox" id="flexCheckDisabled" disabled>
<label class="form-check-label" for="flexCheckDisabled">
Disabled checkbox
</label>
</div>

Radios: The Single-Selection Superstars

Basic Radio Buttons

Radio buttons are akin to checkboxes' cousins. They look similar but behave differently. While checkboxes permit multiple selections, radio buttons enforce a single choice within a group. Let's create a set of radio buttons:

<div class="form-check">
<input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault1">
<label class="form-check-label" for="flexRadioDefault1">
Default radio
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault2" checked>
<label class="form-check-label" for="flexRadioDefault2">
Default checked radio
</label>
</div>

Notice how both radio buttons share the same name attribute? This groups them together, ensuring only one can be selected at a time.

Disabled Radio Button

Just like checkboxes, we can disable radio buttons:

<div class="form-check">
<input class="form-check-input" type="radio" name="flexRadioDisabled" id="flexRadioDisabled" disabled>
<label class="form-check-label" for="flexRadioDisabled">
Disabled radio
</label>
</div>

Switches: The Modern Toggle

Switches are a stylish alternative to checkboxes. They're perfect for on/off settings. Let's create one:

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

The form-switch class transforms our checkbox into a sleek toggle switch.

Layout Options

Default (Stacked)

By default, checkboxes and radios are aligned vertically:

<div class="form-check">
<input class="form-check-input" type="checkbox" id="stackedCheck1">
<label class="form-check-label" for="stackedCheck1">Stacked checkbox 1</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="stackedCheck2">
<label class="form-check-label" for="stackedCheck2">Stacked checkbox 2</label>
</div>

Inline

If you prefer your options side by side, use the form-check-inline class:

<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1">
<label class="form-check-label" for="inlineCheckbox1">1</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2">
<label class="form-check-label" for="inlineCheckbox2">2</label>
</div>

Reverse

If you want the label before the checkbox, use form-check-reverse:

<div class="form-check form-check-reverse">
<input class="form-check-input" type="checkbox" id="reverseCheck1">
<label class="form-check-label" for="reverseCheck1">Reverse checkbox</label>
</div>

Without Labels

Sometimes, you might want a checkbox or radio button without a label:

<div>
<input class="form-check-input" type="checkbox" id="checkboxNoLabel" value="" aria-label="...">
</div>

Remember to use aria-label for accessibility!

Toggle Buttons

Toggle buttons are a sophisticated way to use checkboxes and radio buttons. They look like regular buttons but function like checkboxes or radios:

<input type="checkbox" class="btn-check" id="btn-check" autocomplete="off">
<label class="btn btn-primary" for="btn-check">Single toggle</label>

Outlined Styles

For a more subtle appearance, use the outlined styles:

<input type="checkbox" class="btn-check" id="btn-check-outlined" autocomplete="off">
<label class="btn btn-outline-primary" for="btn-check-outlined">Single toggle</label>

Conclusion

Congratulations! You've just taken an extensive tour of Bootstrap's checkboxes and radios. These small components may seem straightforward, but they are the foundation of interactive forms. Remember, practice makes perfect. Try combining these elements in various ways to create engaging forms for your users.

Here's a quick reference table of the methods we've covered:

Method	Description
Basic Checkbox	<input class="form-check-input" type="checkbox">
Checked Checkbox	Add checked attribute
Indeterminate Checkbox	Set with JavaScript
Disabled Checkbox	Add disabled attribute
Basic Radio	<input class="form-check-input" type="radio">
Disabled Radio	Add disabled attribute
Switch	Use form-switch class
Inline Layout	Use form-check-inline class
Reverse Layout	Use form-check-reverse class
Without Labels	Omit label, use aria-label
Toggle Buttons	Use btn-check class
Outlined Styles	Use btn-outline-* classes

Keep experimenting, keep learning, and most importantly, have fun building incredible web forms!

Credits: Image by storyset