Input Structure

<div class="c-input">
  <label for="default" class="c-input__label">
    <span>Input label</span>
    <abbr class="c-input__required" title="required">*</abbr>
  </label>
  <div class="c-input__controls">
    <div class="c-textfield-wrapper">
      <input id="default" class="c-textfield c-textfield--error" />
    </div>
    <div class="c-input__error">Inline error message.</div>
  </div>
</div>

<div class="c-input">
  <label for="icon" class="c-input__label">Input with icon</label>
  <div class="c-input__controls">
    <div class="c-textfield-wrapper c-textfield-wrapper--icon">
      <input id="icon" type="number" class="c-textfield" />
      <i class="c-textfield__icon icon icon-price"></i>
    </div>
    <div class="c-input__helper">Helper text</div>
  </div>
</div>

<div class="c-input">
  <label for="group" class="c-input__label">
    <span>Input group</span>
  </label>
  <div class="c-input__controls">
    <div class="c-input-group">
      <div class="c-input">
        <div class="c-input__controls">
          <div class="c-textfield-wrapper">
            <input id="group" class="c-textfield" placeholder="Fixed" />
          </div>
        </div>
      </div>
      <div class="c-input c-input--flexible">
        <div class="c-input__controls">
          <div class="c-textfield-wrapper">
            <input id="group" class="c-textfield" placeholder="Flexible" />
          </div>
        </div>
      </div>
      <div class="c-input">
        <div class="c-input__controls">
          <div class="c-textfield-wrapper">
            <input id="group" class="c-textfield" placeholder="Fixed" />
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="c-input c-input--horizontal">
  <label for="horizontal" class="c-input__label">
    <span>Horizontal input</span>
  </label>
  <div class="c-input__controls">
    <div class="c-textfield-wrapper">
      <input id="horizontal" class="c-textfield" />
    </div>
  </div>
</div>

<div class="c-input c-input--horizontal">
  <label for="subform" class="c-input__label">
    <span>Subform</span>
  </label>
  <div class="c-input__controls">
    <div class="c-select-wrapper">
      <select class="c-select" id="subform">
        <option>Option A</option>
        <option>Option B</option>
        <option>Option C</option>
      </select>
      <i class="icon icon-caret-down c-select__caret"></i>
    </div>
    <div class="c-input__subform">
      <div class="c-input">
        <label for="subform1" class="c-input__label">Subform field A</label>
        <div class="c-input__controls">
          <div class="c-textfield-wrapper">
            <input id="subform1" class="c-textfield" />
          </div>
        </div>
      </div>
      <div class="c-input">
        <label class="c-input__label">Subform field B</label>
        <div class="c-input__controls">
          <div class="c-checkbox-group c-checkbox-group--inline">
            <label class="c-checkbox-block">
              <input type="checkbox" class="c-checkbox" checked />
              <span class="c-checkbox-block__label">Option A</span>
            </label>
            <label class="c-checkbox-block">
              <input type="checkbox" class="c-checkbox" />
              <span class="c-checkbox-block__label">Option B</span>
            </label>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>