Choice Controls
-
Use Bootstrap checkboxes, radio buttons, and switches effectively.
Introduction to Choice Controls
Choice controls are form elements that allow users to select options instead of typing values.
In Bootstrap 5, choice controls are:
Built on native HTML inputs
Styled consistently using Bootstrap classes
Accessible and responsive by default
Choice controls are used when:
Options are predefined
User selection is required
Binary or limited choices exist
Checkboxes
What Is a Checkbox ?
A checkbox allows users to:
Select multiple options
Toggle a value on or off
Make independent selections
Each checkbox works independently of others.
When to Use Checkboxes
Use checkboxes when:
Multiple selections are allowed
Options are not mutually exclusive
Users can choose more than one value
Examples:
Hobbies
Preferences
Terms & conditions
Feature selection
Creating a Styled Checkbox
The .form-check component styles checkboxes with proper alignment and labels.
<div class="form-check">
<input class="form-check-input" type="checkbox" id="check1">
<label class="form-check-label" for="check1">
Accept terms and conditions
</label>
</div>Understanding Checkbox Code
Element Purpose .form-check Wrapper .form-check-input Checkbox input .form-check-label Clickable label for + id Accessibility linkage
Creating a Pre-Checked Checkbox
The checked attribute makes the checkbox selected by default.
<input class="form-check-input" type="checkbox" checked>Used when:
Default selection is required
Creating a Disabled Checkbox
The disabled attribute makes the checkbox inactive and not selectable.
<input class="form-check-input" type="checkbox" disabled>Indicates:
Option is unavailable
User cannot interact
Displaying Checkboxes Inline
The .form-check-inline class displays multiple checkboxes in a single horizontal row.
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inline1">
<label class="form-check-label" for="inline1">Option 1</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inline2">
<label class="form-check-label" for="inline2">Option 2</label>
</div>Used when:
Space is limited
Options are short
Radio Buttons
What Is a Radio Button ?
A radio button allows users to:
Select only one option from a group
Choose mutually exclusive options
When to Use Radio Buttons
Use radio buttons when:
Only one option is allowed
Options are related
All options should be visible
Examples:
Gender selection
Payment method
Delivery options
Creating Radio Buttons for Single Selection
Radio buttons allow users to select only one option from a group.
<div class="form-check">
<input class="form-check-input" type="radio" name="gender" id="radio1">
<label class="form-check-label" for="radio1">
Male
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="gender" id="radio2">
<label class="form-check-label" for="radio2">
Female
</label>
</div>Key point:
Same name attribute groups radios
Creating a Pre-Selected Radio Button
The checked attribute selects the radio button by default.
<input class="form-check-input" type="radio" name="option" checked>Used to:
Set default selection
Creating Disabled and Inline Radio Buttons
The disabled attribute deactivates a radio button, and .form-check-inline displays radio buttons in a horizontal row.
<!-- Disabled Radio Button -->
<input class="form-check-input" type="radio" disabled>
<!-- Inline Radio Buttons -->
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="size">
<label class="form-check-label">Small</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="size">
<label class="form-check-label">Large</label>
</div>Switches
What is a Switch ?
A switch is a visual variation of a checkbox that represents:
On / Off
Enabled / Disabled
Yes / No states
Functionally, switches are checkboxes.
When to Use Switches
Use switches when:
Toggling a setting
Changing application state
Immediate action is implied
Examples:
Notifications on/off
Dark mode
Account status
Creating Toggle Switches in Bootstrap
The .form-switch class creates a toggle-style checkbox used for on/off settings.
<!-- Basic Switch -->
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="switch1">
<label class="form-check-label" for="switch1">
Enable notifications
</label>
</div>
<!-- Checked Switch -->
<input class="form-check-input" type="checkbox" checked>
<!-- Disabled Switch -->
<input class="form-check-input" type="checkbox" disabled>- Checkboxes vs Radio vs Switch
Control Selection Type Use Case Checkbox Multiple Independent options Radio Single Mutually exclusive Switch On/Off Settings toggles Choosing the correct control improves clarity and UX.
Accessibility Considerations
Always use labels
Ensure for and id match
Do not rely only on color
Use meaningful label text
Avoid hiding controls
Bootstrap choice controls are accessible when used correctly.
Common Mistakes
Forgetting the name attribute for radio buttons
Using switches for multiple selections
Missing labels
Using checkboxes instead of radios (or vice versa)
Overusing inline controls
Best Practices for Choice Controls
Choose control based on selection logic
Keep labels clear and concise
Avoid too many options
Maintain consistent layout
Prefer vertical layout for long lists