Bootstrap 5 Checks and Radios

Creating checkboxes and radio buttons with Bootstrap

☑️ What are Checks and Radios?

Bootstrap Checks and Radios are styled form controls for selecting options. Checkboxes allow multiple selections, while radio buttons permit only one choice from a group. Bootstrap provides consistent styling with the form-check class for better appearance and accessibility. 


<!-- Checkbox example -->
<div class="form-check">
    <input class="form-check-input" type="checkbox" id="check1">
    <label class="form-check-label" for="check1">
        Check this option
    </label>
</div>

Output:

Check and Radio Features

☑️

Checkboxes

Multiple selection options 

<input type="checkbox" class="form-check-input">
🔘

Radio Buttons

Single selection from group 

<input type="radio" class="form-check-input">
🔄

Switches

Toggle-style checkboxes 

<div class="form-check form-switch">
↔️

Inline Layout

Horizontal arrangement 

<div class="form-check form-check-inline">

🔹 Basic Checkboxes

Basic checkboxes allow users to select multiple independent options from a list, using Bootstrap's `form-check` wrapper for consistent styling. The `form-check-input` class styles the input, while `form-check-label` styles the accompanying text. Matching `id` and `for` attributes ensure clicking the label toggles the checkbox, improving accessibility. Checkboxes are essential for forms requiring multiple selections, such as preference settings, category filters, or agreement checkboxes. Proper implementation ensures cross-browser compatibility, clear visual states, and responsive behavior on all devices. 

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

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

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

Output:

🔹 Radio Buttons

Radio buttons enable single-option selection within a group, making them ideal for mutually exclusive choices like payment methods or survey answers. Linking radio buttons with a shared `name` attribute ensures only one can be selected at a time. When a user selects a new option, others automatically deselect, maintaining data integrity. This input type is crucial for forms requiring exclusive decisions, improving user experience by preventing multiple conflicting selections. Styling with `form-check` ensures visual consistency and accessibility across desktop and mobile interfaces. 

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

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

Output:

🔹 Switches

Switches are toggle-style checkboxes that mimic physical on/off controls, providing an intuitive interface for binary choices like settings or preferences. By adding the `form-switch` class to a `form-check` wrapper, standard checkboxes transform into interactive switches. This modern UI component enhances user experience by clearly conveying state changes through sliding animations and distinct colors. Switches are perfect for mobile apps, dashboard toggles, and any scenario requiring instant visual feedback for enabling/disabling features, contributing to a sleek, user-friendly design. 

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

<div class="form-check form-switch">
    <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckChecked" checked>
    <label class="form-check-label" for="flexSwitchCheckChecked">Checked switch</label>
</div>

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

Output:

🔹 Inline Checks and Radios

Inline checkboxes and radio buttons display horizontally using the `form-check-inline` class, saving vertical space and improving form layout efficiency. This arrangement is ideal for short option lists, such as gender selection, yes/no questions, or rating scales, where all choices fit comfortably on one line. Horizontal alignment streamlines form completion, reduces scrolling, and enhances visual flow. It is particularly effective in compact interfaces, toolbars, or filters where space is limited but clarity is essential, ensuring a responsive and tidy appearance across devices. 

<!-- Inline checkboxes -->
<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">Option 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">Option 2</label>
</div>
<div class="form-check form-check-inline">
    <input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="option3">
    <label class="form-check-label" for="inlineCheckbox3">Option 3</label>
</div>

<br><br>

<!-- Inline radios -->
<div class="form-check form-check-inline">
    <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
    <label class="form-check-label" for="inlineRadio1">Yes</label>
</div>
<div class="form-check form-check-inline">
    <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">
    <label class="form-check-label" for="inlineRadio2">No</label>
</div>

Output:

🔹 Checkbox Without Labels

Creating checkboxes without visible labels achieves a minimalist design while maintaining accessibility through `aria-label` attributes for screen readers. This approach is useful for compact interfaces like data tables with row selection, icon-only toggles, or situations where visual context makes labels redundant. Ensuring proper ARIA labels preserves usability for assistive technologies without cluttering the UI. This technique supports clean, modern designs where simplicity and space efficiency are priorities, while still adhering to web accessibility standards and inclusive design principles. 

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

<div class="form-check">
    <input class="form-check-input" type="radio" name="radioNoLabel" id="radioNoLabel1" aria-label="Radio without label">
</div>

Output:

🔹 Indeterminate Checkboxes

Indeterminate checkboxes display a dash icon to represent a partial selection state, commonly used in hierarchical lists or nested options. This visual state indicates that some, but not all, child items are selected, providing clear feedback in complex selection scenarios. The indeterminate state must be set via JavaScript (`element.indeterminate = true`) and cannot be achieved through HTML alone. It is essential for advanced UI patterns like permission trees, category filters, or multi-level checklists, enhancing user understanding of selection relationships. 

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

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

Output:

🧠 Test Your Knowledge

Which class transforms a checkbox into a switch?