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
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>
        

API Reference:

In order to speed up your application, you can choose to import only the modules you actually need, instead of importing the entire MDB Angular library. Remember that importing the entire library, and immediately afterwards a specific module, is bad practice, and can cause application errors.

API Reference for MDB Angular Input Groups:
// MDB Angular Pro
import { InputsModule, WavesModule } from 'ng-uikit-pro-standard'
// MDB Angular Free
import { InputsModule, WavesModule } from 'angular-bootstrap-md'