Using Form Add-ons

Input Add-ons allow you to align an icon or a button with any form input. Learn how to do it here.

Occasionally you might want to align a button or an icon with an input to save space. The add-on classes allow you to achieve that, combined with some simple html markup.

Right Add-on

To align a button on the right-hand side if the input:

  <div class="form-addon addon-right">
  <label>Newsletter Sign-Up</label>
  <input class="input-text" type="email">
  <button>Submit</button>
  </div>

Left Add-on

To align a button on the left:

  <div class="form-addon addon-left">
  <label>Newsletter Sign-Up</label>
  <input class="input-text" type="email">
  <button>Submit</button>
  </div>

Icon Add-on

To align an icon and a button to the input:

  <div class="form-addon addon-icon">
  <label>How much?</label>
  <span>£</span>
  <input class="input-text" type="number">
  <button>Donate now!</button>
  </div>

An example of all three types:

Example Form Addons
£