Input group

Extend form controls by adding text, buttons, etc. on either side.

Bootstrap docs

Addon position

@example.com
$
.00
<!-- Addon on the left -->
<div class="input-group">
  <div class="input-group-prepend">
    <span class="input-group-text">
      <i class="cxi-lock"></i>
    </span>
  </div>
  <input type="password" class="form-control" placeholder="Password">
</div>

<!-- Addon on the right -->
<div class="input-group">
  <input type="text" class="form-control" placeholder="Recipient's e-mail">
  <div class="input-group-append">
    <span class="input-group-text">@example.com</span>
  </div>
</div>

<!-- Addons on both sides -->
<div class="input-group">
  <div class="input-group-prepend">
    <span class="input-group-text">$</span>
  </div>
  <input type="text" class="form-control" placeholder="Amount">
  <div class="input-group-append">
    <span class="input-group-text">.00</span>
  </div>
</div>

Different types

Options
<!-- Icon addon -->
<div class="input-group">
  <div class="input-group-prepend">
    <span class="input-group-text">
      <i class="cxi-comment"></i>
    </span>
  </div>
  <textarea class="form-control" placeholder="Type your message here..." rows="6"></textarea>
</div>

<!-- Textual addon -->
<div class="input-group">
  <div class="input-group-prepend">
    <span class="input-group-text font-weight-medium">Options</span>
  </div>
  <select class="form-control custom-select">
    <option>Choose one...</option>
    <option>One</option>
    <option>Two</option>
    <option>Three</option>
  </select>
</div>

<!-- Checkbox addon -->
<div class="input-group">
  <div class="input-group-prepend">
    <div class="input-group-text">
      <div class="custom-control custom-checkbox">
        <input class="custom-control-input" type="checkbox" id="ex-check-1">
        <label class="custom-control-label" for="ex-check-1"></label>
      </div>
    </div>
  </div>
  <input class="form-control" type="text" placeholder="Checkbox here">
</div>

<!-- Radio button addon -->
<div class="input-group">
  <div class="input-group-prepend">
    <div class="input-group-text">
      <div class="custom-control custom-radio">
        <input class="custom-control-input" type="radio" id="ex-radio-1" name="radio">
        <label class="custom-control-label" for="ex-radio-1"></label>
      </div>
    </div>
  </div>
  <input class="form-control" type="text" placeholder="Radio button here">
</div>

Multiple inputs

First & last name
<!-- Multiple inputs (addon on the left) -->
<div class="input-group">
  <div class="input-group-prepend">
    <span class="input-group-text text-heading font-weight-medium">First &amp; last name</span>
  </div>
  <input class="form-control" type="text" placeholder="First name">
  <input class="form-control" type="text" placeholder="Last name">
</div>

<!-- Multiple inputs (addon on the right) -->
<div class="input-group">
  <input class="form-control" type="time" value="07:45">
  <input class="form-control" type="time" value="09:00">
  <div class="input-group-append">
    <span class="input-group-text">
      <i class="cxi-clock"></i>
    </span>
  </div>
</div>

Button addons

<!-- Button addon on the left -->
<div class="input-group">
  <div class="input-group-prepend">
    <button class="btn btn-primary" type="button">Button</button>
  </div>
  <input class="form-control" type="text" placeholder="Button on the left">
</div>

<!-- Button addon on the right -->
<div class="input-group">
  <input class="form-control" type="text" placeholder="Button on the right">
  <div class="input-group-append">
    <button class="btn btn-primary" type="button">Button</button>
  </div>
</div>

<!-- Dropdown addon on the left -->
<div class="input-group">
  <div class="input-group-prepend">
    <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown</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>
  </div>
  <input class="form-control" type="text" placeholder="Dropdown on the right">
</div>

<!-- Dropdown addon on the right -->
<div class="input-group">
  <input class="form-control" type="text" placeholder="Dropdown on the right">
  <div class="input-group-append">
    <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown</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>
  </div>
</div>

<!-- Multiple button addons -->
<div class="input-group">
  <input class="form-control" type="text" placeholder="Buttons on the right">
  <div class="input-group-append">
    <button class="btn btn-white border btn-icon" type="button">
      <i class="cxi-plus-round"></i>
    </button>
    <button class="btn btn-white border btn-icon" type="button">
      <i class="cxi-check text-success"></i>
    </button>
    <button class="btn btn-white border btn-icon" type="button">
      <i class="cxi-close-round text-danger"></i>
    </button>
  </div>
</div>

Overlaid addons

<!-- Overlaid addon on the left -->
<div class="input-group-overlay">
  <div class="input-group-prepend-overlay">
    <span class="input-group-text">
      <i class="cxi-search"></i>
    </span>
  </div>
  <input class="form-control prepended-form-control" type="text">
</div>

<!-- Overlaid button addon on the right -->
<div class="input-group-overlay form-group">
  <input class="form-control appended-form-control" type="text">
  <div class="input-group-append-overlay">
    <span class="input-group-text">
      <button class="btn btn-link px-0" type="button">
        <i class="cxi-arrow-right lead mt-n1"></i>
      </button>
    </span>
  </div>
</div>

Addon position light

@example.com
$
.00
<!-- Addon on the left -->
<div class="input-group input-group-light">
  <div class="input-group-prepend">
    <span class="input-group-text">
      <i class="cxi-lock"></i>
    </span>
  </div>
  <input type="password" class="form-control" placeholder="Password">
</div>

<!-- Addon on the right -->
<div class="input-group input-group-light">
  <input type="text" class="form-control" placeholder="Recipient's e-mail">
  <div class="input-group-append">
    <span class="input-group-text">@example.com</span>
  </div>
</div>

<!-- Addons on both sides -->
<div class="input-group input-group-light">
  <div class="input-group-prepend">
    <span class="input-group-text">$</span>
  </div>
  <input type="text" class="form-control" placeholder="Amount">
  <div class="input-group-append">
    <span class="input-group-text">.00</span>
  </div>
</div>

Overlaid addons light

<!-- Overlaid addon on the left -->
<div class="input-group-overlay input-group-light">
  <input class="form-control prepended-form-control" type="text">
  <div class="input-group-prepend-overlay">
    <span class="input-group-text">
      <i class="cxi-search"></i>
    </span>
  </div>
</div>

<!-- Overlaid button addon on the right -->
<div class="input-group-overlay input-group-light form-group">
  <input class="form-control appended-form-control" type="text">
  <div class="input-group-append-overlay">
    <span class="input-group-text">
      <button class="btn btn-link bt-sm px-0" type="button">
        <i class="cxi-arrow-right lead nt-n1"></i>
      </button>
    </span>
  </div>
</div>
Top