Style Guide

4.6 #Form.Input Groups Addons Input Groups Addons

Examples

Default styling

.is-focus

Focus

.is-inactive

Inactive

Markup

<div class="inputGroup inputGroup--infieldAddon [modifier class]">
  <input type="text" />
  <span class="inputGroup__addon"><i class="icon icon-search"></i></span>
</div>
<br/>
<div class="inputGroup inputGroup--infieldAddon [modifier class]">
  <span class="inputGroup__addon"><i class="icon icon-search"></i></span>
  <input type="text" />
</div>
<br/>
<div class="inputGroup inputGroup--infieldAddon [modifier class]">
  <input type="text" />
  <button type="submit" class="inputGroup__addon"><i class="icon icon-search"></i></button>
</div>
<br/>
<div class="inputGroup inputGroup--infieldAddon [modifier class]">
  <input type="text" />
  <span class="inputGroup__addon inputGroup__addon--clickable"><i class="icon icon-search"></i></span>
</div>

Source: build/doc/doc.css, line 10806