Bootstrap 5 Input Group
Bootstrap 5 Input Groups extend standard form controls by allowing you to prepend or append text, icons, buttons, or dropdowns directly alongside an input field — all within a single, visually unified container. They are ideal whenever you need to provide additional context for an input, such as currency symbols, units of measurement, search actions, or inline buttons. Use them to reduce visual clutter and keep related form elements tightly coupled without relying on third-party labels or separate button rows.
Primary Class
.input-groupCommon Use Cases
- →Prepending a currency symbol (e.g. '$' or '£') to a price input field in an e-commerce checkout or budget calculator form
- →Appending a 'Search' or 'Go' button directly to a text input in a site-wide search bar or product filter panel
- →Adding a '@' prefix to a username field in a social profile or account registration form to clarify the expected format
- →Attaching a unit label such as 'kg', 'km', or '%' to a numeric input in a fitness tracker, shipping estimator, or data entry dashboard
Variants & Classes
| Variant | Description |
|---|---|
| Input Group Default | Standard input group with Bootstrap's default styling. |
| Input Group Responsive | Responsive variant that adapts to different screen sizes. |
Code Example
<div class="mb-3">
<label for="budget" class="form-label">Monthly Budget</label>
<div class="input-group">
<span class="input-group-text">$</span>
<input type="number" class="form-control" id="budget" placeholder="0.00" aria-label="Monthly budget amount">
<span class="input-group-text">.00</span>
</div>
</div>
<div class="mb-3">
<label for="site-search" class="form-label">Search Products</label>
<div class="input-group">
<input type="text" class="form-control" id="site-search" placeholder="e.g. wireless headphones" aria-label="Search products">
<button class="btn btn-primary" type="button">Search</button>
</div>
</div>
<div class="mb-3">
<label for="username" class="form-label">Username</label>
<div class="input-group">
<span class="input-group-text">@</span>
<input type="text" class="form-control" id="username" placeholder="yourhandle" aria-label="Username">
</div>
</div>Live Examples
Basic Input Group
Canvas Framework Variants
The Canvas template extends Bootstrap 5 with 1,658+ component variants. Generate any of these using Canvas Builder:
- ✓Canvas Builder generated input group with custom colours
- ✓Input Group with interactive states
- ✓Responsive input group for all screen sizes
Best Practices
Always use aria-label for accessibility
When the prepended or appended text acts as the visual label for the input, add an aria-label directly on the <input> element — screen readers will not automatically associate an input-group-text span with the control the way a <label> element would.
Size the whole group, not individual elements
Apply sizing classes such as input-group-sm or input-group-lg to the parent .input-group div rather than to each child element individually — this ensures the text addons, buttons, and input all scale consistently without mismatched heights.
Combine dropdowns without breaking the border radius
You can nest a .dropdown inside an Input Group by placing a button with data-bs-toggle='dropdown' as the appended element; Bootstrap 5 automatically handles border-radius flattening on the inner edges so the group still looks seamless.
Avoid multiple addons on small viewports
Input groups with both a prepend and an append can become cramped on mobile screens — consider using responsive utility classes or restructuring to a stacked layout on xs/sm breakpoints to preserve usability.