Bootstrap Input Group: Icons, Buttons and Add-ons

A Bootstrap input group attaches text, icons, buttons, or dropdowns to the side of a form field, so they read as one control: a $ before a price, @ before a username, a search button after a search box, or an eye icon that shows a password. This guide covers every input group pattern in Bootstrap 5.3: text and icon add-ons, buttons, dropdowns, checkboxes, multiple inputs, sizes, validation, and floating labels, plus the Bootstrap 4 classes that no longer exist.

A basic input group

Wrap the input and its add-on in .input-group, and put text in .input-group-text:

<div class="input-group mb-3">
  <span class="input-group-text" id="username-addon">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="username-addon">
</div>

<div class="input-group mb-3">
  <input type="text" class="form-control" placeholder="Your site" aria-label="Your site">
  <span class="input-group-text">.example.com</span>
</div>

<div class="input-group">
  <span class="input-group-text">$</span>
  <input type="number" class="form-control" aria-label="Amount in dollars">
  <span class="input-group-text">.00</span>
</div>

Add-ons can go before, after, or on both sides. Bootstrap removes the inner corners so the pieces join cleanly. Give the input an aria-label or a visible <label> above the group, since the add-on text isn’t a label.

Input group with an icon

Put an icon inside .input-group-text. With Bootstrap Icons:

<div class="input-group">
  <span class="input-group-text"><i class="bi bi-envelope" aria-hidden="true"></i></span>
  <input type="email" class="form-control" placeholder="Email" aria-label="Email">
</div>

For an icon without a gray box, make the add-on blend with the field:

<div class="input-group">
  <span class="input-group-text bg-transparent border-end-0"><i class="bi bi-search" aria-hidden="true"></i></span>
  <input type="search" class="form-control border-start-0" placeholder="Search" aria-label="Search">
</div>

Input group with a button

Buttons go straight into the group, with no wrapper:

<form class="input-group" role="search">
  <input type="search" class="form-control" placeholder="Search docs" aria-label="Search docs">
  <button class="btn btn-primary" type="submit">Search</button>
</form>

<div class="input-group mt-3">
  <input type="email" class="form-control" placeholder="you@example.com" aria-label="Email address">
  <button class="btn btn-outline-secondary" type="button">Subscribe</button>
</div>

In Bootstrap 4 the button needed an input-group-append or input-group-prepend wrapper. Bootstrap 5 removed both.

Show and hide password button

A common use: a button after a password field that toggles it between hidden and visible.

<div class="input-group">
  <input type="password" class="form-control" id="password" aria-label="Password" autocomplete="current-password">
  <button class="btn btn-outline-secondary" type="button" id="togglePassword" aria-label="Show password">
    <i class="bi bi-eye" aria-hidden="true"></i>
  </button>
</div>

<script>
  const field = document.getElementById('password');
  const toggle = document.getElementById('togglePassword');
  toggle.addEventListener('click', () => {
    const show = field.type === 'password';
    field.type = show ? 'text' : 'password';
    toggle.setAttribute('aria-label', show ? 'Hide password' : 'Show password');
    toggle.querySelector('i').className = show ? 'bi bi-eye-slash' : 'bi bi-eye';
  });
</script>

The login page guide uses this in a complete sign-in form.

Input group with a dropdown

<div class="input-group">
  <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">All</button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Articles</a></li>
    <li><a class="dropdown-item" href="#">Guides</a></li>
    <li><a class="dropdown-item" href="#">Templates</a></li>
  </ul>
  <input type="search" class="form-control" placeholder="Search" aria-label="Search">
</div>

Dropdowns need the Bootstrap JavaScript bundle. For a dropdown at the end, use dropdown-menu-end so the menu lines up with the right edge. More in the dropdown guide.

Input group with a select

A .form-select works like an input:

<div class="input-group">
  <label class="input-group-text" for="country">Country</label>
  <select class="form-select" id="country">
    <option selected>Choose...</option>
    <option value="us">United States</option>
    <option value="gb">United Kingdom</option>
  </select>
</div>

Checkbox or radio in an input group

Put the checkbox inside .input-group-text, and add mt-0 to remove its default top margin:

<div class="input-group">
  <div class="input-group-text">
    <input class="form-check-input mt-0" type="checkbox" value="" aria-label="Use a custom domain">
  </div>
  <input type="text" class="form-control" placeholder="www.yourdomain.com" aria-label="Custom domain">
</div>

Multiple inputs and add-ons

An input group can hold several inputs and several add-ons:

<div class="input-group">
  <span class="input-group-text">First and last name</span>
  <input type="text" class="form-control" aria-label="First name">
  <input type="text" class="form-control" aria-label="Last name">
</div>

<div class="input-group mt-3">
  <span class="input-group-text">$</span>
  <span class="input-group-text">0.00</span>
  <input type="text" class="form-control" aria-label="Amount">
</div>

Sizes

Add input-group-sm or input-group-lg to the group. Every piece inside resizes:

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

Don’t put size classes such as form-control-lg on the pieces themselves. To control the width of the whole group, put it in a grid column or add a width utility such as w-auto.

Wrapping

An input group stays on one line by default and wraps only if it has to. Add flex-nowrap to stop it from wrapping on narrow screens:

<div class="input-group flex-nowrap">
  <span class="input-group-text">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-label="Username">
</div>

Validation

Add has-validation to the group when you show a feedback message, so the rounded corners stay correct, and put the feedback inside the group:

<form class="needs-validation" novalidate>
  <label for="handle" class="form-label">Username</label>
  <div class="input-group has-validation">
    <span class="input-group-text">@</span>
    <input type="text" class="form-control" id="handle" required>
    <div class="invalid-feedback">Choose a username.</div>
  </div>
  <button class="btn btn-primary mt-3" type="submit">Continue</button>
</form>

The validation script and server-side states are in the forms guide.

Floating labels in an input group

In Bootstrap 5.3, a .form-floating can sit inside an input group:

<div class="input-group">
  <span class="input-group-text">@</span>
  <div class="form-floating">
    <input type="text" class="form-control" id="floatingUser" placeholder="Username">
    <label for="floatingUser">Username</label>
  </div>
</div>

The placeholder is required for the floating label to work, even though it isn’t shown.

Style input groups

The add-on uses the same variables as the form controls, so a theme with a new border radius, border color, or font changes both. For one-off changes, utilities work: bg-primary text-white on an .input-group-text, or rounded-pill on the outer pieces. To restyle every form at once, change the form variables in the builder and export the CSS.

Bootstrap 4 to 5 changes

Bootstrap 4	Bootstrap 5
<div class="input-group-prepend"> around the add-on	Not needed: put the add-on directly in .input-group
<div class="input-group-append">	Not needed
custom-select	form-select
custom-file	form-control on type="file"

FAQ

What is an input group in Bootstrap?

An input group is a form field with text, icons, buttons, or dropdowns attached to its sides, wrapped in .input-group. Text add-ons use .input-group-text, and buttons go straight into the group. Common uses are currency symbols, @ for usernames, search buttons, and password visibility toggles.

How do I add an icon to an input in Bootstrap 5?

Put the icon in an .input-group-text before or after the input: <div class="input-group"><span class="input-group-text"><i class="bi bi-search"></i></span><input class="form-control"></div>. Add aria-hidden="true" to the icon and an aria-label to the input.

What replaced input-group-append in Bootstrap 5?

Nothing. Bootstrap 5 removed input-group-append and input-group-prepend. Put buttons and .input-group-text elements directly inside .input-group, before or after the input.

How do I add a button to an input in Bootstrap?

Place a <button class="btn btn-primary"> inside the .input-group, after or before the .form-control. No wrapper is needed in Bootstrap 5.

How do I make an input group smaller or larger?

Add input-group-sm or input-group-lg to the .input-group element. All the inputs, add-ons, and buttons inside resize together.

Why are the corners wrong on my input group with validation?

Add has-validation to the .input-group and keep the .invalid-feedback element inside the group. Without it, Bootstrap treats the feedback as the last child and leaves the input’s corners square.