Input group

How it works #

You can create an input group by adding the .input-group class to a wrapping <div>. Inside, you can add one or more of the following in any combination or order:

• Form controls (.form-control) or select boxes (.form-select)
• Text add-ons with the class .input-group-text on either side of the form controls
• Buttons on either side of the form controls

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

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

<div class="input-group mb-3">
  <select class="form-select" aria-label="Select example">...</select>
  <span class="input-group-text">Text</span>
  <span class="input-group-text">Text</span>
</div>

<div class="input-group mb-3">
  <input type="email" class="form-control" placeholder="Email address" aria-label="Email address" aria-describedby="button-add-on-1">
  <button type="button" class="btn btn-primary" id="button-add-on-1">Sign up</button>
</div>

<div class="input-group mb-3">
  <button class="btn btn-secondary">Button</button>
  <button class="btn btn-secondary">Button</button>
  <select class="form-select" aria-label="Select example">...</select>
</div>

<div class="input-group mb-3">
  <span class="input-group-text">Search</span>
  <input type="text" class="form-control" placeholder="Products" aria-label="Products">
  <button type="submit" class="btn btn-primary">Submit</button>
</div>

<div class="input-group">
  <span class="input-group-text" id="add-on-2">About</span>
  <textarea class="form-control" placeholder="Description" aria-label="Description" aria-describedby="add-on-2"></textarea>
</div>

Sizing #

Create small and large input groups with the .input-group-sm and .input-group-lg classes respectively. Please note, sizing on the individual input group elements isn't supported.

<!-- Small input group -->
<div class="input-group input-group-sm mb-3">
  <span class="input-group-text">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-label="Username">
  <button type="button" class="btn btn-primary">Submit</button>
</div>

<!-- Default input group -->
<div class="input-group mb-3">
  <span class="input-group-text">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-label="Username">
  <button type="button" class="btn btn-primary">Submit</button>
</div>

<!-- Large input group -->
<div class="input-group input-group-lg">
  <span class="input-group-text">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-label="Username">
  <button type="button" class="btn btn-primary">Submit</button>
</div>

Buttons with dropdowns #

Place dropdown menus next to buttons (and use them as toggles) inside input groups. You can also use segmented buttons (.dropdown-toggle-split).

<!-- Input group with button and dropdown -->
<div class="input-group mb-3">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Fashion</button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item active" href="#">Fashion</a></li>
    <li><a class="dropdown-item" href="#">Beauty</a></li>
    <li><a class="dropdown-item" href="#">Electronics</a></li>
    <li><a class="dropdown-item" href="#">Kids & Toys</a></li>
  </ul>
  <input type="text" class="form-control" placeholder="Enter SKUs" aria-label="Enter SKUs">
</div>

<!-- Input group with segmented buttons and dropdown -->
<div class="input-group">
  <input type="text" class="form-control" placeholder="Search products" aria-label="Search products">
  <button type="button" class="btn btn-secondary">Search</button>
  <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
    <span class="visually-hidden">Toggle search options</span>
  </button>
  <ul class="dropdown-menu dropdown-menu-end">
    <li><a class="dropdown-item active" href="#">Search all</a></li>
    <li><a class="dropdown-item" href="#">Only text</a></li>
    <li><a class="dropdown-item" href="#">Only titles</a></li>
  </ul>
</div>

Checkboxes and radios #

Checkboxes and radio buttons can be used inside input groups by placing them inside a textual add-on with the .input-group-text class. We recommend adding .mt-0 to the .form-check-input when there's no visible text next to the input.

<!-- Input group with checkbox -->
<div class="input-group mb-3">
  <div class="input-group-text">
    <input type="checkbox" class="form-check-input mt-0" value="" aria-label="Checkbox for following input">
  </div>
  <input type="text" class="form-control" placeholder="Input with checkbox" aria-label="Input with checkbox">
</div>

<!-- Input group with radio button -->
<div class="input-group">
  <div class="input-group-text">
    <input type="radio" class="form-check-input mt-0" value="" aria-label="Radio button for following input">
  </div>
  <input type="text" class="form-control" placeholder="Input with radio button" aria-label="Input with radio button">
</div>

Custom forms #

Input groups support all types of form controls (including file inputs) and select boxes. Here's are two more examples of custom forms created using input groups. Note how the .form-label and .form-text go outside of the input group.

<!-- Custom select box -->
<div class="mb-3">
  <label class="form-label" for="example-select-1">Profession</label>
  <div class="input-group">
    <label class="input-group-text" for="example-select-1">I'm a</label>
    <select class="form-select" id="example-select-1" aria-label="Profession">
      <option selected>Choose option</option>
      <option value="backend">Back-end engineer</option>
      <option value="frontend">Front-end engineer</option>
      <option value="fullstack">Full-stack engineer</option>
    </select>
  </div>
</div>

<!-- Custom file input -->
<div>
  <label class="form-label" for="example-file-input-1">Resume</label>
  <div class="input-group">
    <input type="file" class="form-control" id="example-file-input-1" aria-label="Attach resume">
    <label class="input-group-text" for="example-file-input-1">Upload</label>
  </div>
  <div class="form-text">Please attach your latest resume.</div>
</div>