Input group

Easily extend form controls by adding text, buttons, or button groups on either side of textual inputs, custom selects, and custom file inputs.

Input group on Bootstrap

Basic example

<div class="input-group mb-3">
  <span class="input-group-text" id="basic-addon1">@</span>
  <input class="form-control" type="text" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1" />
</div>
<div class="input-group mb-3">
  <input class="form-control" type="text" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2" />
  <span class="input-group-text" id="basic-addon2">@example.com</span>
</div>
<label class="form-label" for="basic-url">Your vanity URL</label>
<div class="input-group mb-3">
  <span class="input-group-text" id="basic-addon3">https://example.com/users/</span>
  <input class="form-control" id="basic-url" type="text" aria-describedby="basic-addon3" />
</div>
<div class="input-group mb-3">
  <span class="input-group-text">$</span>
  <input class="form-control" type="text" aria-label="Amount (to the nearest dollar)" />
  <span class="input-group-text">.00</span>
</div>
<div class="input-group">
  <span class="input-group-text">With textarea</span>
  <textarea class="form-control" aria-label="With textarea"></textarea>.
</div>
@
@example.com
https://example.com/users/
$ .00
With textarea .

Wrapping

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

Sizing

<div class="input-group input-group-sm mb-3">
  <span class="input-group-text" id="inputGroup-sizing-sm">Small</span>
  <input class="form-control" type="text" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-sm" />
</div>
<div class="input-group mb-3">
  <span class="input-group-text" id="inputGroup-sizing-default">Default</span>
  <input class="form-control" type="text" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-default" />
</div>
<div class="input-group input-group-lg">
  <span class="input-group-text" id="inputGroup-sizing-lg">Large</span>
  <input class="form-control" type="text" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-lg" />
</div>
Small
Default
Large

Checkboxes and Radios

<div class="input-group mb-3">
  <div class="input-group-text">
    <input class="form-check-input" type="checkbox" value="" aria-label="Checkbox for following text input" />
  </div>
  <input class="form-control" type="text" aria-label="Text input with checkbox" />
</div>
<div class="input-group">
  <div class="input-group-text">
    <input class="form-check-input" type="radio" value="" aria-label="Radio button for following text input" />
  </div>
  <input class="form-control" type="text" aria-label="Text input with radio button" />
</div>

Multiple inputs

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

Multiple Addons

<div class="input-group mb-3">
  <span class="input-group-text">$</span>
  <span class="input-group-text">0.00</span>
  <input class="form-control" type="text" aria-label="Dollar amount (with dot and two decimal places)" />
</div>
<div class="input-group">
  <input class="form-control" type="text" aria-label="Dollar amount (with dot and two decimal places)" />
  <span class="input-group-text">$</span>
  <span class="input-group-text">0.00</span>
</div>
$ 0.00
$ 0.00
On this page