Input groups

Months 
  <label for="group-input-example" class=" form-field__label">Some label</label>
  <div class="input-group">
        <input type="text" id="group-input-example" name="group-input-example" class=" input-text input-group__input" placeholder="Place holder text">
        
        <span class="input-group__add-on input-group__add-on--right">Months</span>
  </div>
Yards 
  <label for="group-input-example-2" class=" form-field__label">Some label 2</label>
  <div class="input-group">
        <input type="text" id="group-input-example-2" name="group-input-example-2" class=" input-text input-group__input" placeholder="Place holder text">
        
        <span class="input-group__add-on input-group__add-on--right has-info">Yards</span>
  </div>
% 
  <label for="group-input-example-3" class=" form-field__label">Some label 3</label>
  <div class="input-group">
        <input type="text" id="group-input-example-3" name="group-input-example-3" class=" input-text input-group__input" placeholder="Place holder text">
        
        <span class="input-group__add-on input-group__add-on--right">%</span>
  </div>
$ 
  <label for="group-input-example-left" class=" form-field__label">Amount</label>
  <div class="input-group">
        <span class="input-group__add-on">$</span>
        <input type="text" id="group-input-example-left" name="group-input-example-left" class=" input-text input-group__input" placeholder="0.00">
        
  </div>

Introduction

Input groups allow for additional information or functionality to be prepended or appended to the input field. If prepended, like the Dollar amount example above, then the fancy label enhancement can't be applied, unless there's a big refactor of the component.

Usage

Class name Effect Remarks
.input-group Placed on the tag that wraps around the .input-group__input and .input-group__add-on elements. Required.
.input-group__input Placed on the input tag Required.
.input-group__add-on Placed on the tag that will contain the appended information Required.
.input-group__add-on--right Placed on add on elements that should have right-aligned text. Optional.