Input Group

Joins addons, buttons, or icons with an input into a single visually-connected control. Border radii are fused automatically.

Addon + control

<div class="ln-input-group">
  <span class="ln-input-group__addon">https://</span>
  <input class="ln-input-group__control" type="text" placeholder="example.com">
</div>

https://

Button + control

<div class="ln-input-group">
  <input class="ln-input-group__control" type="text" placeholder="Search...">
  <button class="ln-input-group__button ln-button ln-button--solid">Search</button>
</div>

Addon on both sides

<div class="ln-input-group">
  <span class="ln-input-group__addon">$</span>
  <input class="ln-input-group__control" type="text" placeholder="0.00">
  <span class="ln-input-group__addon">USD</span>
</div>

$USD

Reference

Class	Description	Responsive
`.ln-input-group`	Input group container	No
`.ln-input-group__addon`	Text addon (prefix or suffix)	No
`.ln-input-group__control`	Input element	No
`.ln-input-group__button`	Button inside the group	No
`.ln-input-group__icon`	Icon overlay inside the group	No
`.ln-input-group--sm`	Small size (2rem height)	No
`.ln-input-group--lg`	Large size (3rem height)	No