Input Group

Input groups extend form controls by combining them with addons, prepended or appended text, or icons into a single visual unit.

Prepend & Append

$ .00
HTML
<div class="ms-input-group">
  <span class="ms-input-group-prepend">$</span>
  <input type="text" placeholder="Amount" class="form-control">
  <span class="ms-input-group-append">.00</span>
</div>

Addon

Use ms-input-group-addon for a generic addon slot in either position.

@
HTML
<div class="ms-input-group">
  <span class="ms-input-group-addon">@</span>
  <input type="text" placeholder="Username" class="form-control">
</div>

Notes

  • The input group gains an elevated shadow while a child control is focused (:focus-within).
  • Addons and append/prepend elements join the bordered field seamlessly; the group radius is applied to the outer corners only.
  • Combine with any form-control element (input, select, textarea).
<