Input group

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

Basic example

Place one add-on or button on either side of an input. You may also place one on both sides of an input. We do not support multiple form-controls in a single input group.

@domain.com

Kill who? 

<div class="form-group">
  <label for="">Name label</label>
  <div class="input-group">
    <span class="input-group-addon" id="basic-addon1"><span class="icon icon-user"></span></span>
    <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
  </div>
</div>   
<div class="input-group">
  <span class="input-group-addon"><span class="icon icon-email-envelope"></span></span>
  <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
  <span class="input-group-addon">@domain.com</span>
</div>
<br>
<div class="input-group">
  <span class="input-group-addon"><span class="icon icon-skull"></span></span>
  <span class="input-group-addon">Kill who?</span>
  <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
</div>
<br> 
<div class="input-group disabled"> 
  <span class="input-group-addon"><span class="icon icon-cloud-disable"></span></span>
  <input type="text" class="form-control" value=".input-group.disabled > input[disabled]" disabled>
</div>

Enable input groups

Initialize all input groups addons on a dynamically loaded page. Select only .form-control elements.

$(function () { 
   $("#loaded-elements .form-control").inputGroupAddon(); 
})

Sizing

Add the relative form sizing classes to the .input-group itself and contents within will automatically resize.

@

@ 
<div class="input-group input-group-lg">
  <span class="input-group-addon" id="sizing-addon1">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon1">
</div>
<br>
<div class="input-group">
  <span class="input-group-addon" id="sizing-addon2">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon2">
</div>

Checkboxes and radio addons

Place any checkbox or radio option within an input group’s addon instead of text.

<div class="row">
  <div class="col-lg-6">
    <div class="input-group">
      <span class="input-group-addon"> 
          <input id="checkbox1" class="form-check-input" type="checkbox" value="">
          <label class="form-check-label" for="checkbox1"></label> 
      </span>
      <input type="text" class="form-control" aria-label="Text input with checkbox">
    </div>
  </div>
  <div class="col-lg-6">
    <div class="input-group">
      <span class="input-group-addon">
          <input id="radio1" class="form-check-input" type="radio" value="">
          <label class="form-check-label" for="radio1"></label> 
      </span>
      <input type="text" class="form-control" aria-label="Text input with radio button">
    </div>
  </div>
</div>

Multiple addons

Multiple add-ons are supported and can be mixed with checkbox and radio input versions.

R$
R$ 0.00 
<div class="row">
  <div class="col-lg-6">
    <div class="input-group">
      <span class="input-group-addon">
          <input id="checkbox3" class="form-check-input" type="checkbox" value="">
          <label class="form-check-label" for="checkbox3"></label> 
      </span>
      <span class="input-group-addon">R$</span>
      <input type="text" class="form-control" aria-label="Text input with checkbox">
    </div>
  </div>
  <div class="col-lg-6">
    <div class="input-group">
      <span class="input-group-addon">R$</span>
      <span class="input-group-addon">0.00</span>
      <input type="text" class="form-control" aria-label="Text input with radio button">
    </div>
  </div>
</div>

Button addons

Buttons in input groups are a bit different and require one extra level of nesting. Instead of .input-group-addon, you’ll need to use .input-group-btn to wrap the buttons.


<div class="row">
  <div class="col-lg-6">
    <div class="input-group">
      <span class="input-group-btn">
        <button class="btn btn-secondary" type="button">Go!</button>
      </span>
      <input type="text" class="form-control" placeholder="Search for...">
    </div>
  </div>
  <div class="col-lg-6">
    <div class="input-group">
      <input type="text" class="form-control" placeholder="Search for...">
      <span class="input-group-btn">
        <button class="btn btn-primary" type="button">Go <span class="icon icon-paperplane"></span></button>
      </span>
    </div>
  </div>
</div>
<br>
<div class="row">
  <div class="col-lg-6">
    <div class="input-group">
      <span class="input-group-btn">
        <button class="btn btn-secondary" type="button">Hate it</button>
      </span>
      <input type="text" class="form-control" placeholder="Product name">
      <span class="input-group-btn">
        <button class="btn btn-accent" type="button">Love it</button>
      </span>
    </div>
  </div>
  <div class="col-lg-6">
    <div class="input-group">
      <span class="input-group-btn">
        <button class="btn btn-primary" type="button">Go horse</button>
      </span>
      <input type="text" class="form-control" placeholder="Domain">
    </div>
  </div>
</div>

Rounded

Use .rounded

<div class="row">
  <div class="col-lg-6">
    <div class="input-group rounded">
      <span class="input-group-btn">
        <button class="btn btn-secondary" type="button">Go!</button>
      </span>
      <input type="text" class="form-control" placeholder="Search for...">
    </div>
  </div>
  <div class="col-lg-6">
    <div class="input-group rounded">
      <input type="text" class="form-control" placeholder="Search for...">
      <span class="input-group-btn">
        <button class="btn btn-primary" type="button">Go <span class="icon icon-paperplane"></span></button>
      </span>
    </div>
  </div>
</div>

Buttons with dropdowns

Action Another action Something else here Separated link
Action Another action Something else here Separated link 
<div class="row">
  <div class="col-lg-6">
    <div class="input-group">
      <div class="input-group-btn">
        <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Action
        </button>
        <div class="dropdown-menu">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <a class="dropdown-item" href="#">Something else here</a>
          <div role="separator" class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Separated link</a>
        </div>
      </div>
      <input type="text" class="form-control" aria-label="Text input with dropdown button">
    </div>
  </div>
  <div class="col-lg-6">
    <div class="input-group">
      <input type="text" class="form-control" aria-label="Text input with dropdown button">
      <div class="input-group-btn">
        <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Action
        </button>
        <div class="dropdown-menu dropdown-menu-right">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <a class="dropdown-item" href="#">Something else here</a>
          <div role="separator" class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Separated link</a>
        </div>
      </div>
    </div>
  </div>
</div>