Bootstrap 5 – Input Groups: Combine Inputs with Labels, Buttons & Icons

Introduction – What Are Input Groups in Bootstrap 5?

Input groups in Bootstrap 5 allow you to add text, buttons, or icons before or after input fields. They help enhance form usability by providing context (like @, $, or https://) or adding interactive elements (like buttons or dropdowns).

In this guide, you’ll learn:

• How to prepend/append content to input fields
• Use input groups with buttons, selects, and checkboxes
• Size and align input groups responsively
• Create real-world use cases like email, search, and currency inputs

Example 1 – Basic Input Group with Text

<div class="input-group mb-3">
  <span class="input-group-text">@</span>
  <input type="text" class="form-control" placeholder="Username">
</div>

Explanation:

Example 2 – Input Group with Appended Text

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

• Useful for email creation, domain appending, etc.

Example 3 – Input Group with 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" placeholder="Amount">
</div>

• Combine multiple prefixes or suffixes for currency, units, or scales

Example 4 – Input Group with Button

<div class="input-group mb-3">
  <input type="text" class="form-control" placeholder="Search">
  <button class="btn btn-outline-secondary" type="button">Go</button>
</div>

• Buttons can trigger actions like search, submit, add to cart

Example 5 – Button + Dropdown in Input Group

<div class="input-group">
  <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown">
    Action
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Download</a></li>
    <li><a class="dropdown-item" href="#">Share</a></li>
  </ul>
  <input type="text" class="form-control" placeholder="Type here">
</div>

• Combine interactive elements with text input for complex tools.

Example 6 – Input Group with Checkbox or Radio

<div class="input-group mb-3">
  <div class="input-group-text">
    <input class="form-check-input mt-0" type="checkbox">
  </div>
  <input type="text" class="form-control" placeholder="Checkbox + input">
</div>

• Adds a selectable element to an input field for conditional logic.

Input Group Sizing

<div class="input-group input-group-sm mb-3">
  <span class="input-group-text">Small</span>
  <input type="text" class="form-control">
</div>

<div class="input-group input-group-lg mb-3">
  <span class="input-group-text">Large</span>
  <input type="text" class="form-control">
</div>

Best Practices for Input Groups

Summary – Input Add-ons for Better UX in Bootstrap Forms

Bootstrap 5 input groups let you wrap form fields with helpful UI elements like labels, buttons, dropdowns, and icons—providing better guidance, quicker actions, and a more intuitive interface.

Key Takeaways:

• Wrap your input field in .input-group
• Use .input-group-text, .btn, or .form-check-input to prepend/append content
• Supports buttons, icons, dropdowns, checkboxes, and multiple add-ons
• Easily adjustable sizes with .input-group-sm and .input-group-lg

Perfect for search boxes, login fields, currency inputs, and admin controls.

FAQs – Bootstrap 5 Input Groups

Can I add both text and a button in the same input group?
Yes. Use .input-group-text for text and .btn for buttons inside the same .input-group.

Do input groups support file inputs?
Yes. You can include <input type="file"> with styling, but layout may need adjustments.

How do I make input groups responsive?
Use Bootstrap’s grid system (.row, .col-*) to wrap inputs and input groups for responsiveness.

What’s the difference between form-control and input-group-text?
.form-control is for user inputs, while .input-group-text is for static prefix/suffix content.