🧩 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:
| Element/Class | Description |
|---|---|
.input-group | Wraps the group structure |
.input-group-text | Static text or symbol inside the input field |
.form-control | Standard styled input field |
.mb-3 | Adds bottom margin spacing |
✅ 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>
| Size Class | Effect |
|---|---|
.input-group-sm | Small input group |
.input-group-lg | Large input group |
🛠️ Best Practices for Input Groups
| Tip | Why It Helps |
|---|---|
Use .input-group-text for static text | Keeps spacing and styling consistent |
| Keep layout minimal and readable | Avoid overcrowding inputs with too many elements |
| Match input size with button size | Prevents alignment issues in forms |
Use aria-label or aria-describedby | Enhances accessibility for screen readers |
📌 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-inputto prepend/append content - Supports buttons, icons, dropdowns, checkboxes, and multiple add-ons
- Easily adjustable sizes with
.input-group-smand.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.
Share Now :
