Bootstrap 5 Tutorial
v5.3.0Bootstrap 5 Tutorial
Checkboxes & Radio Buttons in Bootstrap 5
Selection Controls: Learn about checkboxes (multiple selection) and radio buttons (single selection) with Bootstrap styling.
Basic Checkboxes
Standard Checkboxes
<!-- Basic Checkbox -->
<div class="form-check">
<input class="form-check-input" type="checkbox" id="defaultCheckbox">
<label class="form-check-label" for="defaultCheckbox">
Default checkbox
</label>
</div>
<!-- Checked Disabled Checkbox -->
<div class="form-check">
<input class="form-check-input" type="checkbox" id="checkedCheckbox" checked disabled>
<label class="form-check-label" for="checkedCheckbox">
Checked disabled checkbox
</label>
</div>
<!-- Unchecked Disabled Checkbox -->
<div class="form-check">
<input class="form-check-input" type="checkbox" id="uncheckedCheckbox" disabled>
<label class="form-check-label" for="uncheckedCheckbox">
Unchecked disabled checkbox
</label>
</div>Basic Radio Buttons
Standard Radio Buttons
<!-- Radio Button Group -->
<div class="form-check">
<input
class="form-check-input"
type="radio"
name="radioGroup"
id="radio1"
value="option1"
>
<label class="form-check-label" for="radio1">
Default radio
</label>
</div>
<div class="form-check">
<input
class="form-check-input"
type="radio"
name="radioGroup"
id="radio2"
value="option2"
>
<label class="form-check-label" for="radio2">
Second default radio
</label>
</div>
<!-- Disabled Radio -->
<div class="form-check">
<input
class="form-check-input"
type="radio"
name="radioGroupDisabled"
id="radioDisabled"
disabled
>
<label class="form-check-label" for="radioDisabled">
Disabled radio
</label>
</div>Checkbox & Radio Groups
Grouped Selection Controls
Checkbox Group
Select your interests:
Radio Button Group
Select your preferred contact method:
Inline Checkboxes & Radios
<!-- Checkbox Group -->
<div class="form-check">
<input class="form-check-input" type="checkbox" id="interest1">
<label class="form-check-label" for="interest1">Technology</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="interest2">
<label class="form-check-label" for="interest2">Sports</label>
</div>
<!-- Radio Group -->
<div class="form-check">
<input class="form-check-input" type="radio" name="contactMethod" id="emailRadio">
<label class="form-check-label" for="emailRadio">Email</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="contactMethod" id="phoneRadio">
<label class="form-check-label" for="phoneRadio">Phone</label>
</div>
<!-- Inline Checkboxes -->
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox1">
<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">
<label class="form-check-label" for="inlineCheckbox2">Option 2</label>
</div>
<!-- Inline Radios -->
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadio" id="inlineRadio1">
<label class="form-check-label" for="inlineRadio1">Option 1</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadio" id="inlineRadio2">
<label class="form-check-label" for="inlineRadio2">Option 2</label>
</div>Without Labels
Checkboxes & Radios Without Visible Labels
Checkboxes with Screen Reader Labels
Radios with Screen Reader Labels
Using .form-check-input with .position-static
When you want checkboxes or radios without visible labels, add .position-static to the input element.
<!-- Checkbox without visible label -->
<div class="form-check">
<input class="form-check-input position-static" type="checkbox" id="blankCheckbox">
<label class="visually-hidden" for="blankCheckbox">
Checkbox without visible label
</label>
</div>
<!-- Radio without visible label -->
<div class="form-check">
<input class="form-check-input position-static" type="radio" name="blankRadio" id="blankRadio1">
<label class="visually-hidden" for="blankRadio1">
Radio option 1
</label>
</div>Custom Styling
Custom Checkboxes and Radios
Toggle Buttons (Checkbox Style)
Toggle Buttons (Radio Style)
Stacked Toggle Buttons
<!-- Toggle Buttons (Checkbox Style) -->
<div class="btn-group" role="group">
<input type="checkbox" class="btn-check" id="btncheck1">
<label class="btn btn-outline-primary" for="btncheck1">Checkbox 1</label>
<input type="checkbox" class="btn-check" id="btncheck2">
<label class="btn btn-outline-primary" for="btncheck2">Checkbox 2</label>
</div>
<!-- Toggle Buttons (Radio Style) -->
<div class="btn-group" role="group">
<input type="radio" class="btn-check" name="btnradio" id="btnradio1" checked>
<label class="btn btn-outline-primary" for="btnradio1">Radio 1</label>
<input type="radio" class="btn-check" name="btnradio" id="btnradio2">
<label class="btn btn-outline-primary" for="btnradio2">Radio 2</label>
</div>
<!-- Switches -->
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" 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" id="flexSwitchCheckChecked" checked>
<label class="form-check-label" for="flexSwitchCheckChecked">
Checked switch
</label>
</div>Validation States
Valid and Invalid States
Valid Checkboxes
Looks good!
Invalid Checkboxes
You must check this box to continue.
Valid Radio Buttons
Invalid Radio Buttons
Please select an option.
<!-- Valid Checkbox -->
<div class="form-check">
<input class="form-check-input is-valid" type="checkbox" id="validCheckbox" checked>
<label class="form-check-label" for="validCheckbox">
Valid checkbox
</label>
<div class="valid-feedback">
Looks good!
</div>
</div>
<!-- Invalid Checkbox -->
<div class="form-check">
<input class="form-check-input is-invalid" type="checkbox" id="invalidCheckbox">
<label class="form-check-label" for="invalidCheckbox">
Invalid checkbox
</label>
<div class="invalid-feedback">
You must check this box.
</div>
</div>
<!-- Valid Radio -->
<div class="form-check">
<input class="form-check-input is-valid" type="radio" name="validRadio" id="validRadio1">
<label class="form-check-label" for="validRadio1">
Valid radio 1
</label>
</div>
<!-- Invalid Radio -->
<div class="form-check">
<input class="form-check-input is-invalid" type="radio" name="invalidRadio" id="invalidRadio1">
<label class="form-check-label" for="invalidRadio1">
Invalid radio 1
</label>
<div class="invalid-feedback">
Please select an option.
</div>
</div>When to Use Checkboxes vs Radio Buttons
| Aspect | Checkboxes | Radio Buttons |
|---|---|---|
| Selection Type | Multiple selections allowed | Single selection only |
| HTML Type | type="checkbox" | type="radio" |
| Grouping | Can have independent name attributes | Must share same name attribute |
| Default State | Can be checked or unchecked independently | Only one can be checked in a group |
| Use Case | Selecting multiple options from a list | Choosing one option from multiple |
| Example | "Select your interests" (can select many) | "Choose your gender" (choose one) |
Accessibility Best Practices
Accessibility Guidelines
- Always use labels: Every checkbox and radio must have an associated label
- Use proper grouping: Radio buttons must share the same
nameattribute - Provide focus states: Ensure keyboard navigation works properly
- Use fieldset and legend: For groups of checkboxes/radios, wrap in
<fieldset> - Screen reader support: Labels should be descriptive and meaningful
- Keyboard shortcuts: Users should be able to navigate with Tab/Shift+Tab
Common Mistakes to Avoid
- ❌ Using checkboxes for mutually exclusive options (use radios)
- ❌ Using radios for multiple selections (use checkboxes)
- ❌ Missing labels for checkboxes/radios
- ❌ Not grouping radio buttons with the same name
- ❌ Forgetting to handle keyboard navigation
- ❌ Using too many inline checkboxes on small screens
