Bootstrap 5 Tutorial

Bootstrap 5 Tutorial

v5.3.0

Bootstrap 5 Tutorial

NextIntroduction
→

Input Groups in Bootstrap 5

Input Groups: Extend form controls by adding text, buttons, or button groups on either side of inputs.

Basic Input Groups

Basic Examples
@
@example.com
$.00
With textarea
<!-- Basic Input Group with Prefix -->
            <div class="input-group mb-3">
            <span class="input-group-text" id="basic-addon1">@</span>
            <input 
                type="text" 
                class="form-control" 
                placeholder="Username" 
                aria-describedby="basic-addon1"
            >
            </div>

            <!-- Input Group with Suffix -->
            <div class="input-group mb-3">
            <input 
                type="text" 
                class="form-control" 
                placeholder="Recipient's username"
            >
            <span class="input-group-text">@example.com</span>
            </div>

            <!-- Input Group with Both Sides -->
            <div class="input-group mb-3">
            <span class="input-group-text">$</span>
            <input type="text" class="form-control">
            <span class="input-group-text">.00</span>
            </div>

            <!-- Input Group with Textarea -->
            <div class="input-group">
            <span class="input-group-text">With textarea</span>
            <textarea class="form-control" rows="3"></textarea>
            </div>

Input Group Sizing

Different Sizes
Small
Default
Large
<!-- Small Input Group -->
            <div class="input-group input-group-sm mb-3">
            <span class="input-group-text">Small</span>
            <input type="text" class="form-control">
            </div>

            <!-- Default Input Group -->
            <div class="input-group mb-3">
            <span class="input-group-text">Default</span>
            <input type="text" class="form-control">
            </div>

            <!-- Large Input Group -->
            <div class="input-group input-group-lg">
            <span class="input-group-text">Large</span>
            <input type="text" class="form-control">
            </div>

Input Group with Buttons

Button Add-ons
<!-- Input Group with Button on Left -->
            <div class="input-group mb-3">
            <button class="btn btn-outline-secondary" type="button">Button</button>
            <input type="text" class="form-control" placeholder="">
            </div>

            <!-- Input Group with Button on Right -->
            <div class="input-group mb-3">
            <input type="text" class="form-control" placeholder="Search...">
            <button class="btn btn-outline-secondary" type="button">🔍 Search</button>
            </div>

            <!-- Input Group with Multiple Buttons -->
            <div class="input-group mb-3">
            <button class="btn btn-outline-secondary" type="button">Left</button>
            <button class="btn btn-outline-secondary" type="button">Middle</button>
            <input type="text" class="form-control" placeholder="">
            <button class="btn btn-outline-secondary" type="button">Right</button>
            </div>

            <!-- Input Group with Primary Button -->
            <div class="input-group">
            <input type="text" class="form-control" placeholder="Email address">
            <button class="btn btn-primary" type="button">Subscribe</button>
            </div>

Input Group with Dropdowns

Dropdown Add-ons
<!-- Input Group with Dropdown on Left -->
            <div class="input-group mb-3">
            <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown">
                Dropdown
            </button>
            <ul class="dropdown-menu">
                <li><a class="dropdown-item" href="#">Action</a></li>
                <li><a class="dropdown-item" href="#">Another action</a></li>
            </ul>
            <input type="text" class="form-control">
            </div>

            <!-- Input Group with Dropdown on Right -->
            <div class="input-group mb-3">
            <input type="text" class="form-control">
            <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>
            </ul>
            </div>

            <!-- Split Dropdown Input Group -->
            <div class="input-group">
            <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown">
                Split dropdown
            </button>
            <input type="text" class="form-control">
            <button class="btn btn-outline-secondary dropdown-toggle" type="button" 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 Group with Checkboxes and Radios

Selection Add-ons
<!-- Input Group with Checkbox -->
            <div class="input-group mb-3">
            <div class="input-group-text">
                <input 
                class="form-check-input mt-0" 
                type="checkbox" 
                aria-label="Checkbox"
                >
            </div>
            <input type="text" class="form-control" placeholder="Checkbox on left">
            </div>

            <!-- Input Group with Radio -->
            <div class="input-group mb-3">
            <div class="input-group-text">
                <input 
                class="form-check-input mt-0" 
                type="radio" 
                aria-label="Radio button"
                >
            </div>
            <input type="text" class="form-control" placeholder="Radio on left">
            </div>

            <!-- Input Group with Checkbox on Right -->
            <div class="input-group">
            <input type="text" class="form-control" placeholder="Checkbox on right">
            <div class="input-group-text">
                <input 
                class="form-check-input mt-0" 
                type="checkbox" 
                aria-label="Checkbox"
                >
            </div>
            </div>

Multiple Inputs in One Group

Complex Input Groups
First and last name
$0.00
@.example.com
<!-- Multiple Inputs in One Group -->
            <div class="input-group mb-3">
            <span class="input-group-text">First and last name</span>
            <input type="text" class="form-control" placeholder="First name">
            <input type="text" class="form-control" placeholder="Last name">
            </div>

            <!-- Multiple Add-ons -->
            <div class="input-group mb-3">
            <span class="input-group-text">$</span>
            <span class="input-group-text">0.00</span>
            <input type="text" class="form-control">
            </div>

            <!-- Complex Email Input Group -->
            <div class="input-group">
            <input type="text" class="form-control" placeholder="Username">
            <span class="input-group-text">@</span>
            <input type="text" class="form-control" placeholder="Server">
            <span class="input-group-text">.example.com</span>
            </div>

Floating Labels with Input Groups

Combined Features
@
@example.com
<!-- Floating Label with Input Group -->
            <div class="form-floating">
            <div class="input-group">
                <span class="input-group-text">@</span>
                <input 
                type="email" 
                class="form-control" 
                id="floatingInputGroup1" 
                placeholder="name@example.com"
                >
                <label for="floatingInputGroup1">Email address</label>
            </div>
            </div>

            <!-- Floating Label with Input Group (Suffix) -->
            <div class="form-floating">
            <div class="input-group">
                <input 
                type="text" 
                class="form-control" 
                id="floatingInputGroup2" 
                placeholder="Username"
                >
                <span class="input-group-text">@example.com</span>
                <label for="floatingInputGroup2">Username</label>
            </div>
            </div>

Validation with Input Groups

Valid and Invalid States
@
Please choose a username.
@example.com
Looks good!
$.00
Please enter a valid amount.
<!-- Invalid Input Group -->
            <div class="input-group has-validation">
            <span class="input-group-text">@</span>
            <input type="text" class="form-control is-invalid" placeholder="Username" required>
            <div class="invalid-feedback">
                Please choose a username.
            </div>
            </div>

            <!-- Valid Input Group -->
            <div class="input-group has-validation">
            <input type="email" class="form-control is-valid" placeholder="name@example.com" required>
            <span class="input-group-text">@example.com</span>
            <div class="valid-feedback">
                Looks good!
            </div>
            </div>

            <!-- Invalid Input Group with Multiple Add-ons -->
            <div class="input-group has-validation">
            <span class="input-group-text">$</span>
            <input type="number" class="form-control is-invalid" placeholder="Amount" required>
            <span class="input-group-text">.00</span>
            <div class="invalid-feedback">
                Please enter a valid amount.
            </div>
            </div>

Practical Examples

Currency Input
$USD
€EUR
£GBP
<!-- Currency Input Example -->
            <div class="input-group">
            <span class="input-group-text">$</span>
            <input 
                type="number" 
                class="form-control" 
                placeholder="0.00" 
                min="0" 
                step="0.01"
            >
            <span class="input-group-text">USD</span>
            </div>
Search with Filters
<!-- Search with Dropdown Filter -->
            <div class="input-group">
            <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown">
                Category
            </button>
            <ul class="dropdown-menu">
                <li><a class="dropdown-item" href="#">All</a></li>
                <li><a class="dropdown-item" href="#">Electronics</a></li>
            </ul>
            <input type="text" class="form-control" placeholder="Search products...">
            <button class="btn btn-primary" type="button">🔍 Search</button>
            </div>

Best Practices

When to Use Input Groups
  • Currency inputs: When you need currency symbols
  • Email/username inputs: With domain suffixes
  • Search functionality: With search buttons or filters
  • Measurement inputs: With unit labels (cm, kg, etc.)
  • URL inputs: With protocol prefixes (https://)
  • Form controls with actions: Like subscribe buttons
Common Mistakes to Avoid
  • ❌ Using for simple inputs that don't need add-ons
  • ❌ Forgetting accessibility attributes (aria-label, aria-describedby)
  • ❌ Not using .has-validation when showing validation messages
  • ❌ Making input groups too complex with too many add-ons
  • ❌ Not testing on mobile devices
  • ❌ Using inconsistent sizing within the same form
NextIntroduction
→
Logo

HiFi Toolkit is a free online platform offering essential tools and converters for developers, designers, and everyday productivity tasks.

Follow Us

Our Tools
Our Company
Special Tools

© 2026 HiFi Toolkit. All rights reserved.

Terms & ConditionsPrivacy Policy