Bootstrap Input Groups

Input groups let you attach extra content, like currency symbols, icons, or buttons, directly to a form control. This lesson covers building and customizing input groups.

Bootstrap Input Groups Overview

An .input-group wraps a form control along with .input-group-text elements for static labels, or actual <button> elements for interactive actions, visually merging them into a single control-like unit with shared borders and rounded corners.

Input groups can be sized with input-group-sm or input-group-lg, and support multiple prepended or appended items, checkboxes, or dropdown menus for more complex composite fields like search bars with filters.

Concept	Description	Common Usage
.input-group	Wrapper that merges controls into one unit	Grouping an input with icons, text, or buttons
.input-group-text	Static, non-interactive label inside the group	Currency symbols, units, icons
Button inside input-group	Actionable button attached to the field	Search button, copy-to-clipboard, submit
input-group-sm / lg	Sizing modifier for the whole group	Compact or prominent composite fields
Multiple appended/prepended items	Several input-group-text or buttons combined	Complex fields like amount + currency + action

Bootstrap Input Groups Example

<div class="input-group mb-3">
  <span class="input-group-text">$</span>
  <input type="number" class="form-control" placeholder="0.00">
  <span class="input-group-text">.00</span>
</div>

<div class="input-group">
  <input type="text" class="form-control" placeholder="Search products">
  <button class="btn btn-primary" type="button">
    <i class="bi bi-search"></i> Search
  </button>
</div>

The first group prepends a dollar sign and appends a decimal suffix around a numeric input, visually merging all three into one field. The second group attaches a search button directly to the input, sharing a border radius so it reads as a single composite control.

Top 10 Bootstrap Input Groups Examples

These are the input group patterns you'll reuse for composite form fields.

#	Example	Syntax
1	Prepended text	`<div class="input-group"><span class="input-group-text">@</span><input class="form-control"></div>`
2	Appended text	`<div class="input-group"><input class="form-control"><span class="input-group-text">.00</span></div>`
3	Prepended icon	`<span class="input-group-text"><i class="bi bi-envelope"></i></span>`
4	Appended button	`<div class="input-group"><input class="form-control"><button class="btn btn-outline-secondary">Go</button></div>`
5	Small input group	`<div class="input-group input-group-sm">...</div>`
6	Large input group	`<div class="input-group input-group-lg">...</div>`
7	Two prepended items	`<span class="input-group-text">$</span><span class="input-group-text">USD</span>`
8	Input group with select	`<select class="form-select">...</select><input class="form-control">`
9	Input group with checkbox	`<div class="input-group-text"><input class="form-check-input" type="checkbox"></div>`
10	Copy to clipboard button	`<button class="btn btn-outline-secondary" type="button"><i class="bi bi-clipboard"></i></button>`

Popular Real-World Bootstrap Input Groups Examples

These input group patterns solve common real-world field composition problems.

Scenario	Pattern
Price field with currency symbol	`<span class="input-group-text">$</span><input class="form-control" type="number">`
Username field with @ prefix	`<span class="input-group-text">@</span><input class="form-control" placeholder="username">`
Search bar with button	`<input class="form-control" placeholder="Search"><button class="btn btn-primary">Search</button>`
Password field with show/hide toggle	`<input type="password" class="form-control"><button class="btn btn-outline-secondary" type="button"><i class="bi bi-eye"></i></button>`
URL shortener with copy button	`<input class="form-control" readonly value="https://short.link/abc"><button class="btn btn-outline-secondary">Copy</button>`
Weight input with unit suffix	`<input class="form-control" type="number"><span class="input-group-text">kg</span>`
Coupon code field with apply button	`<input class="form-control" placeholder="Coupon code"><button class="btn btn-success">Apply</button>`
Phone number with country code prefix	`<span class="input-group-text">+1</span><input class="form-control" type="tel">`

Best Practices

Use input-group-text for static, non-interactive labels like symbols, icons, and units.
Use real <button> elements for interactive appended actions, not styled spans.
Keep input group sizing (sm/lg) consistent with the rest of the surrounding form.
Add aria-label to icon-only buttons attached to an input group for accessibility.
Avoid stacking too many prepended and appended items, which can crowd small screens.
Test input groups at mobile widths, since long groups can wrap awkwardly.
Use validation classes on the inner form-control, not the outer input-group wrapper.

Common Mistakes

Wrapping a button in input-group-text instead of using an actual button element.
Forgetting aria-label on icon-only buttons inside an input group.
Applying form-control-sm on the input instead of input-group-sm on the wrapper, causing misaligned heights.
Overloading a single input group with too many prepended/appended segments.
Not testing how the group behaves when the input group must wrap on very small screens.
Placing validation feedback messages inside the input-group instead of after it.

Key Takeaways

input-group visually merges a form control with related text, icons, or buttons.
input-group-text is for static labels; real buttons handle interactive actions.
Sizing modifiers apply to the whole group, not individual inner elements.
Multiple items can be prepended or appended for complex composite fields.
Accessible labeling matters most for icon-only buttons inside a group.

Pro Tip

For password fields, pair an input-group with a toggle button that swaps the input's type between password and text and swaps the icon between bi-eye and bi-eye-slash for a familiar show/hide pattern.