John Doe
john.doe@email.com

Input group

The .input-group is a bootstrap component that allow us to extend form controls. The template allow us to treated the .input-group component as an input by adding the class .as-input. See the example below:

$
.00
$
.00

Component limitations

  1. Only works with input-group-text.
  2. For remove the side borders of the input you will need to add the utility classes:
    • .prepend if the .input-group has input-group-prepend
    • .append if the .input-group has input-group-append
Source code
<div class="input-group">
  <div class="input-group-prepend">
    <span class="input-group-text">$</span>
  </div>
  <input type="text" class="form-control">
  <div class="input-group-append">
    <span class="input-group-text">.00</span>
  </div>
</div>

<div class="input-group as-input prepend append">
  <div class="input-group-prepend">
    <span class="input-group-text">$</span>
  </div>
  <input type="text" class="form-control">
  <div class="input-group-append">
    <span class="input-group-text">.00</span>
  </div>
</div>

Input states

The component automatically respond to the input attributes states readonly and disabled. For validation you will need to add .is-valid or .is-invalid classes.

Examples

%
%
%
$
.00
Source code
<div class="form-group">
  <label>Append with default state</label>
  <div class="input-group as-input append">
    <input type="text" class="form-control">
    <div class="input-group-append">
      <span class="input-group-text">%</span>
    </div>
  </div>
</div>

<div class="form-group">
  <label>Append with readonly state</label>
  <div class="input-group as-input append">
    <input type="text" class="form-control" readonly>
    <div class="input-group-append">
      <span class="input-group-text">%</span>
    </div>
  </div>
</div>

<div class="form-group">
  <label>Append with disabled state</label>
  <div class="input-group as-input append">
    <input type="text" class="form-control" disabled>
    <div class="input-group-append">
      <span class="input-group-text">%</span>
    </div>
  </div>
</div>

<div class="form-group">
  <label>Prepend and append with invalid state</label>
  <div class="input-group as-input prepend append is-invalid">
    <div class="input-group-prepend">
      <span class="input-group-text">$</span>
    </div>
    <input type="text" class="form-control">
    <div class="input-group-append">
      <span class="input-group-text">.00</span>
    </div>
  </div>
</div>

<div class="form-group">
  <label>Prepend and append with valid state</label>
  <div class="input-group as-input prepend append is-valid">
    <div class="input-group-prepend">
      <span class="input-group-text">
        <i class="icon-user"></i>
      </span>
    </div>
    <input type="text" class="form-control" value="johndoe">
    <div class="input-group-append">
      <span class="input-group-text">
        <i class="icon-check text-success"></i>
      </span>
    </div>
  </div>
</div>