Text Input

Class Attribute Order

The order of the classes as defined in the class attribute should be as follows: Size, Width, Icon, JavaScript Related Class. JavaScript Related Class must be prefixed with js-

EXAMPLE HTML

<input class="input-default input-long input-icon-left input-icon-search js-related-class" type="text" />

Input Sizes

HTML

<input type="text" placeholder="input-small" class="input-small" />

<input type="text" placeholder="input-default" class="input-default" />

<input type="text" placeholder="input-large" class="input-large" />

<input type="text" placeholder="input-jumbo" class="input-jumbo" />

Input Widths

HTML

<input type="text" placeholder="input-shortest" class="input-shortest" />

<input type="text" placeholder="input-shorter" class="input-shorter" />

<input type="text" placeholder="input-short" class="input-short" />

<input type="text" placeholder="input-medium" class="input-medium" />

<input type="text" placeholder="input-long" class="input-long" />

<input type="text" placeholder="input-longer" class="input-longer" />

<input type="text" placeholder="input-wide-full" class="input-wide-full" />

Input Icons

Input with Search Icon

Input with Pin Icon

Input with Percent Icon

HTML

<input type="text" placeholder="input-small input-icon-left input-icon-search" class="input-small input-icon-left input-icon-search" />

<input type="text" placeholder="input-icon-left input-icon-search" class="input-icon-left input-icon-search" />

<input type="text" placeholder="input-large input-icon-left input-icon-search" class="input-large input-icon-left input-icon-search" />

<input type="text" placeholder="input-jumbo input-icon-left input-icon-search" class="input-jumbo input-icon-left input-icon-search" />

CSS dollar label

HTML

<label class="dollar-label">
  <input type="text" class="input-default" />
</label>

<label class="dollar-label dollar-large">
  <input type="text" class="input-large" />
</label>

<label class="dollar-label dollar-jumbo">
  <input type="text" class="input-jumbo" />
</label>