Login with:


Or:


Not a member? Sign Up

Forgot Password?

Signup with:


Or:


Already have an account? Log in

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">
    <span class="input-group-addon" id="basic-addon1">@</span>
    <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">
    <span class="input-group-addon" id="basic-addon2">@example.com</span>
</div>

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

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

Checkboxes and radio add-ons

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



<!--Checkbox-->
  <div class="input-group">
      <span class="input-group-addon">
          <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-addon">
          <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-addon, 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">
    <span class="input-group-btn">
        <button class="btn btn-primary btn-lg waves-light" type="button" mdbRippleRadius>Go!</button>
    </span>
    <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...">
    <span class="input-group-btn">
        <button class="btn btn-primary btn-lg waves-light" type="button" mdbRippleRadius>Go!</button>
    </span>
</div>

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