Bootstrap - Checks & Radios: A Beginner's Guide

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

Bootstrap - Checks & radios

Introduction to Bootstrap Form Controls

Before we jump into the nitty-gritty, let's take a moment to appreciate why we're learning about Bootstrap. Imagine you're building a house. You could make every 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-Select Wonder

Basic Checkbox

Checkboxes are like little square boxes that users can click to select multiple options. They're perfect for 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 creates a wrapper, while form-check-input styles the checkbox itself. The for attribute in the label matches the id of the input, connecting them.

Checked State

Sometimes, you want a checkbox to be pre-checked. It's as easy 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">
    Checked checkbox
  </label>
</div>

Indeterminate

Now, here's a fun fact: checkboxes can have a third state called "indeterminate". It's like when your teenager cleans their room - it's not quite 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 show 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-Choice Champions

Basic Radio Buttons

Radio buttons are like checkboxes' cousins. They look similar but behave differently. While checkboxes allow 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 have 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 stacked 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

Want 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

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 fancy way to use checkboxes and radio buttons. They look like regular buttons but act 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

Want a more subtle look? 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 a grand tour of Bootstrap's checkboxes and radios. These little components might seem simple, but they're the building blocks of interactive forms. Remember, practice makes perfect. Try combining these elements in different 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 amazing web forms!

Credits: Image by storyset