Bootstrap 5 Framework

Form Components

13 min Lesson 20 of 40

Introduction to Form Components

Bootstrap 5 provides specialized form components beyond basic inputs. These components include checkboxes, radio buttons, switches (new in Bootstrap 5), range inputs, and advanced input groups. Understanding these components helps you create rich, interactive forms.

Note: Bootstrap 5 completely redesigned checkbox and radio button styling with improved accessibility and a new switch component.

Checkboxes and Radios

Bootstrap provides custom checkbox and radio button styling with form-check classes:

<!-- Default checkbox -->
<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>

<!-- Checked checkbox -->
<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>

<!-- Disabled checkbox -->
<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>

<!-- Default radio -->
<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>

<!-- Checked radio -->
<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>

<!-- Disabled radio -->
<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>
                

Tip: Always use unique id attributes for checkboxes and radios, and match them with the for attribute in labels for accessibility.

Inline Checkboxes and Radios

Group checkboxes or radios on the same horizontal row with form-check-inline:

<!-- 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">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>
<div class="form-check form-check-inline">
    <input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="option3" disabled>
    <label class="form-check-label" for="inlineCheckbox3">3 (disabled)</label>
</div>

<!-- 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">1</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">2</label>
</div>
<div class="form-check form-check-inline">
    <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3" disabled>
    <label class="form-check-label" for="inlineRadio3">3 (disabled)</label>
</div>
                

Switches (New in Bootstrap 5)

Create toggle switches using form-switch class, a modern alternative to checkboxes:

<!-- Default switch -->
<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 checkbox input</label>
</div>

<!-- Checked switch -->
<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 checkbox input</label>
</div>

<!-- Disabled switch -->
<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 checkbox input</label>
</div>

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

Bootstrap 5 Feature: Switches are a new component in Bootstrap 5, perfect for on/off toggles and settings interfaces. Always include role="switch" for accessibility.

Checkbox/Radio Without Labels

Create checkboxes and radios without visible labels using form-check without form-check-label:

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

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

Warning: When omitting visible labels, always provide aria-label attributes for screen readers to maintain accessibility.

Range Inputs

Bootstrap 5 provides custom styling for range inputs:

<!-- Default range -->
<label for="customRange1" class="form-label">Example range</label>
<input type="range" class="form-range" id="customRange1">

<!-- Range with min and max -->
<label for="customRange2" class="form-label">Example range with min and max</label>
<input type="range" class="form-range" min="0" max="5" id="customRange2">

<!-- Range with steps -->
<label for="customRange3" class="form-label">Example range with steps</label>
<input type="range" class="form-range" min="0" max="5" step="0.5" id="customRange3">

<!-- Disabled range -->
<label for="disabledRange" class="form-label">Disabled range</label>
<input type="range" class="form-range" id="disabledRange" disabled>
                

Tip: Use min, max, and step attributes to control range input behavior. Consider displaying the current value with JavaScript for better UX.

Input Groups with Buttons

Combine input groups with buttons for enhanced functionality:

<!-- Button before input -->
<div class="input-group mb-3">
    <button class="btn btn-outline-secondary" type="button">Button</button>
    <input type="text" class="form-control" placeholder="" aria-label="Example text with button addon">
</div>

<!-- Button after input -->
<div class="input-group mb-3">
    <input type="text" class="form-control" placeholder="Recipient's username">
    <button class="btn btn-outline-secondary" type="button">Button</button>
</div>

<!-- Multiple buttons -->
<div class="input-group mb-3">
    <button class="btn btn-outline-secondary" type="button">Button</button>
    <button class="btn btn-outline-secondary" type="button">Button</button>
    <input type="text" class="form-control" placeholder="">
</div>

<!-- Button with dropdown -->
<div class="input-group mb-3">
    <input type="text" class="form-control" placeholder="Search">
    <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown">Dropdown</button>
    <ul class="dropdown-menu dropdown-menu-end">
        <li><a class="dropdown-item" href="#">Action</a></li>
        <li><a class="dropdown-item" href="#">Another action</a></li>
        <li><a class="dropdown-item" href="#">Something else here</a></li>
    </ul>
</div>

<!-- Segmented button -->
<div class="input-group mb-3">
    <input type="text" class="form-control">
    <button type="button" class="btn btn-outline-secondary">Action</button>
    <button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown">
        <span class="visually-hidden">Toggle Dropdown</span>
    </button>
    <ul class="dropdown-menu dropdown-menu-end">
        <li><a class="dropdown-item" href="#">Action</a></li>
        <li><a class="dropdown-item" href="#">Another action</a></li>
    </ul>
</div>
                

Input Groups with Checkboxes and Radios

Place checkboxes or radios within input groups:

<!-- Input group with checkbox -->
<div class="input-group mb-3">
    <div class="input-group-text">
        <input class="form-check-input mt-0" type="checkbox" value="" aria-label="Checkbox for following text input">
    </div>
    <input type="text" class="form-control" aria-label="Text input with checkbox">
</div>

<!-- Input group with radio -->
<div class="input-group">
    <div class="input-group-text">
        <input class="form-check-input mt-0" type="radio" value="" aria-label="Radio button for following text input">
    </div>
    <input type="text" class="form-control" aria-label="Text input with radio button">
</div>
                

File Inputs

Bootstrap provides custom styling for file inputs:

<!-- Default file input -->
<div class="mb-3">
    <label for="formFile" class="form-label">Default file input example</label>
    <input class="form-control" type="file" id="formFile">
</div>

<!-- Multiple files -->
<div class="mb-3">
    <label for="formFileMultiple" class="form-label">Multiple files input example</label>
    <input class="form-control" type="file" id="formFileMultiple" multiple>
</div>

<!-- Disabled file input -->
<div class="mb-3">
    <label for="formFileDisabled" class="form-label">Disabled file input example</label>
    <input class="form-control" type="file" id="formFileDisabled" disabled>
</div>

<!-- Small file input -->
<div class="mb-3">
    <label for="formFileSm" class="form-label">Small file input example</label>
    <input class="form-control form-control-sm" id="formFileSm" type="file">
</div>

<!-- Large file input -->
<div>
    <label for="formFileLg" class="form-label">Large file input example</label>
    <input class="form-control form-control-lg" id="formFileLg" type="file">
</div>

<!-- File input with accept attribute -->
<div class="mb-3">
    <label for="formFileImages" class="form-label">Images only</label>
    <input class="form-control" type="file" id="formFileImages" accept="image/*">
</div>
                

Tip: Use the accept attribute to limit file types. Use multiple to allow selecting multiple files.

Exercise: Create a Survey Form

Create a complete survey form using various form components:

Section 1: Personal Preferences
- Radio group for "How did you hear about us?" (3+ options)
- Checkbox group for "Which services are you interested in?" (5+ options, allow multiple)
Section 2: Experience Rating
- Range slider for "Overall satisfaction" (0-10)
- Range slider for "Would you recommend us?" (0-10)
Section 3: Settings
- Switch for "Subscribe to newsletter"
- Switch for "Enable notifications"
- Switch for "Make profile public"
Section 4: Additional Information
- File upload for "Upload your resume" (accept PDF/DOC only)
- Input group with dropdown for "Preferred contact time"
Add proper labels, spacing, and grouping
Include a submit button at the end

Best Practices

Always provide labels for form components, even if visually hidden
Use switches for binary on/off settings, checkboxes for multiple selections
Group related checkboxes and radios logically
Use aria-label when labels are not visible
Provide clear instructions for file uploads (accepted formats, size limits)
Consider inline checkboxes/radios for short lists (3-5 items)
Use range inputs for numeric values with clear min/max boundaries
Display current value for range inputs when possible
Test all form components with keyboard navigation
Ensure proper spacing and alignment for better visual hierarchy
Use validation feedback with all input types

Summary

In this lesson, you learned about Bootstrap form components including checkboxes, radio buttons, switches (new in Bootstrap 5), range inputs, input groups with buttons, and file inputs. These components provide the building blocks for creating rich, interactive forms with consistent styling and excellent user experience.