Input Groups

Input groups are an extension of form controls where you'll find an element, such as a button, at the beginning or end of a text related input field.

Input groups are built with the .form-element-group class.

Basic Styling

For text-based appended/prepended elements, use the class .form-element-extra. In this example it's at the end.

The order of your markup depends on whether the button/form-element-extra is in the beginning or end of the form-element-group.

EXAMPLE

Form Element Extra

<div class="form-element-group">
 <input type="text" class="form-element" placeholder="placeholder">
 <span class="form-element-extra">Form Element Extra</span>
</div>

Now it's in the front of the group.

EXAMPLE

Form Element Extra

<div class="form-element-group">
 <span class="form-element-extra">Form Element Extra</span>
 <input type="text" class="form-element" placeholder="placeholder">
</div>

Sizing

For a bigger or smaller form-group use classes .form-element-group-lg and .form-element-group-sm

EXAMPLE

Large Form Group

Default Form Group

Small Form Group

<div class="form-element-group-lg">
 <input type="text" class="form-element" placeholder="placeholder">
 <span class="form-element-extra">Large Form Group</span>
</div>

<div class="form-element-group">
 <input type="text" class="form-element" placeholder="placeholder">
 <span class="form-element-extra">Default Form Group</span>
</div>

<div class="form-element-group-sm">
 <input type="text" class="form-element" placeholder="placeholder">
 <span class="form-element-extra">Small Form Group</span>
</div>

Adding Elements

You can add addons such as checkboxes, radio buttons, icons, etc.

EXAMPLE

<div class="row-fluid">
 <div class="col6">
  <div class="form-element-group">
   <input type="text" class="form-element" placeholder="placeholder">
   <span class="form-element-extra"><input type="checkbox"></span>
  </div>
 </div>
 <div class="col6">
  <div class="form-element-group">
   <input type="text" class="form-element" placeholder="placeholder">
   <span class="form-element-extra"><input type="radio"></span>
  </div>
 </div>
</div>

<div class="row-fluid">
 <div class="col6">
  <div class="form-element-group">
   <input type="text" class="form-element" placeholder="placeholder">
   <span class="form-element-extra"><span class="fa fa-check"></span></span>
  </div>
 </div>
 <div class="col6">
  <div class="form-element-group">
   <input type="text" class="form-element" placeholder="placeholder">
   <span class="form-element-extra"><span class="fa fa-arrow-right"></span></span>
  </div>
 </div>
</div>

Adding Buttons

You can add buttons at the beginning or end of the form-element-groups.

Wrap your buttons in the class .form-group-btn

EXAMPLE

<div class="form-element-group">
     <input class="form-element" type="text" />
     <span class="form-group-btn">
      <button class="btn btn-default">Default</button>
     </span>
    </div>