Input groups

Basic example

<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="md-form input-group">
  <span class="input-group-prepend">
    <div class="input-group-text">
      <input type="checkbox" id="checkbox1" class="form-check-input">
      <label for="checkbox1" class="form-check-label"></label>
    </div>
  </span>
  <input type="text" class="form-control" aria-label="Text input with checkbox">
</div>

<!--Radio-->
<div class="md-form input-group">
  <span class="input-group-prepend">
    <div class="input-group-text">
      <input type="radio" id="radio1" class="form-check-input">
      <label for="radio1" class="form-check-label"></label>
    </div>
  </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 mdbBtn color="primary" size="lg" class="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 mdbBtn color="primary" size="lg" class="waves-light" type="button" mdbWavesEffect>Go!</button>
    </div>
</div>

<!--Both sides-->
<div class="md-form input-group">
    <div class="input-group-btn">
        <button mdbBtn color="default" size="lg" class="waves-light" type="button" mdbWavesEffect>Hate it</button>
    </div>
    <input type="text" class="form-control" placeholder="Product name">
    <div class="input-group-btn">
        <button mdbBtn color="danger" size="lg" class="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, ButtonsModule } from 'ng-uikit-pro-standard'

// MDB Angular Free
import { InputsModule, WavesModule, ButtonsModule } from 'angular-bootstrap-md'