Input groups

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

Basic example

@example.com

Your URL

https://example.com/users/

.00


<div class="md-form input-group">
    <div class="input-group-prepend" id="basic-addon1">
        <span class="input-group-text" id="basic-addon1">@</span>
    </div>
    <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
</div>

<div class="md-form input-group">
    <input type="text" class="form-control" placeholder="Recipient's username" aria-describedby="basic-addon2">
    <div class="input-group-append" id="basic-addon2">
        <span class="input-group-text" id="basic-addon2">@example.com</span> 
    </div>
</div>

<label for="basic-url">Your vanity URL</label>
<div class="md-form input-group">
    <div class="input-group-prepend" id="basic-addon3">
        <span class="input-group-text" id="basic-addon3">https://example.com/users/</span>
    </div>
    <input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
</div>

<div class="md-form input-group">
    <div class="input-group-prepend">
        <span class="input-group-text">$</span>
    </div>
    <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
    <div class="input-group-append">
        <span class="input-group-text">.00</span>
    </div>
</div>

Checkboxes and radio add-ons

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


<!--Checkbox-->
  <div class="input-group">
      <span class="input-group-prepend">
          <input type="checkbox" id="checkbox1">
          <label for="checkbox1"></label>
      </span>
      <input type="text" class="form-control" aria-label="Text input with checkbox">
  </div>

  <!--Radio-->
  <div class="input-group">
      <span class="input-group-prepend">
          <input type="radio" id="radio1">
          <label for="radio1"></label>
      </span>
      <input type="text" class="form-control" aria-label="Text input with checkbox">
  </div>

Button addons

Buttons in input groups are a bit different and require one extra level of nesting. Instead of .input-group-prepend / .input-group-append, you’ll need to use .input-group-btn to wrap the buttons. This is required due to default browser styles that cannot be overridden.


<!--Left-->
<div class="md-form input-group">
    <div class="input-group-btn">
        <button class="btn btn-primary btn-lg waves-light" type="button" mdbWavesEffect>Go!</button>
    </div>
    <input type="search" class="form-control" placeholder="Search for...">
</div>

<!--Right-->
<div class="md-form input-group">
    <input type="search" class="form-control" placeholder="Search for...">
    <div class="input-group-btn">
        <button class="btn btn-primary btn-lg waves-light" type="button" mdbWavesEffect>Go!</button>
    </div>
</div>

<!--Both sides-->
<div class="md-form input-group">
    <div class="input-group-btn">
        <button class="btn btn-default btn-lg waves-light" type="button" mdbWavesEffect>Hate it</button>
    </div>
    <input type="text" class="form-control" placeholder="Product name">
    <div class="input-group-btn">
        <button class="btn btn-danger btn-lg waves-light" type="button" mdbWavesEffect>Love it</button>
    </div>
</div>

Introduction
Input groups