Input Group

Input with prefix or suffix addons for icons, symbols, or text.

Prefix and suffix

<div class="af-input-group">
  <span class="af-input-group-addon">
    $
  </span>
  <input type="text" class="af-input" placeholder="Amount" />
  <span class="af-input-group-addon">
    .00
  </span>
</div>

Prefix only

<div class="af-input-group">
  <span class="af-input-group-addon">
    @
  </span>
  <input type="text" class="af-input" placeholder="Username" />
</div>

Suffix only

<div class="af-input-group">
  <input type="text" class="af-input" placeholder="Search" />
  <span class="af-input-group-addon">
    🔍
  </span>
</div>

Live example

$.00

@

🔍