Text Input

Text inputs are used for inputting single line text data.

Examples

To render a text input, apply the class a-input to an input type="text", input type="password", input type="email", etc.

Base

<input type="text" class="a-input" placeholder="Placeholder">

Disabled

<input type="text" class="a-input" value="Sample Text" disabled>

With Label

<div class="m-formGroup -labeled">
  <label class="a-label" for="example">Label</label>
  <input type="text" class="a-input" id="example" placeholder="Placeholder">
</div>

Icons

To add icons to a text input, wrap the input in a div using the class a-inputWrapper. Next, add the icon as a sibling of the input and utilize an icon alignment utility class (e.g. -icon--left) to specify where it should be placed.

Left Aligned

<div class="a-inputWrapper -icon--left">
  <input type="text" class="a-input" placeholder="Placeholder" value="Sample text">
  <i class="a-icon icon-search -text--muted"></i>
  </div>
</div>

Right Aligned

<div class="a-inputWrapper -icon--right">
  <input type="text" class="a-input" placeholder="Placeholder" value="Sample text">
  <i class="a-icon icon-search -text--muted"></i>
</div>

Left + Right Aligned

<div class="a-inputWrapper -icon--left -icon--right">
  <input type="text" class="a-input" placeholder="Placeholder" value="Sample text">
  <i class="a-icon icon-search -text--muted"></i>
  <i class="a-icon icon-check-alt -text--success"></i>
</div>

States

Text inputs offer three validation states: -success, -warning, and -danger.

Success

<input type="text" class="a-input -success" placeholder="Placeholder" value="Sample Text">

<div class="a-inputWrapper -icon--right">
  <input type="text" class="a-input -success" placeholder="Placeholder" value="Sample Text">
  <i class="a-icon icon-check-alt -text--success"></i>
</div>

Warning

<input type="text" class="a-input -warning" placeholder="Placeholder" value="Sample Text">

<div class="a-inputWrapper -icon--right">
  <input type="text" class="a-input -success" placeholder="Placeholder" value="Sample Text">
  <i class="a-icon icon-warning -text--warning"></i>
</div>

Danger

<input type="text" class="a-input -danger" placeholder="Placeholder" value="Sample Text">

<div class="a-inputWrapper -icon--right">
  <input type="text" class="a-input -danger" placeholder="Placeholder" value="Sample Text">
  <i class="a-icon icon-circle-warning -text--danger"></i>
</div>

Sizes

Text inputs supports a full spectrum of sizes: -sm, -md, -lg, -xl. The default size is -md.

<input type="text" class="a-input -sm" placeholder="Sample Text">
<input type="text" class="a-input -md" placeholder="Sample Text">
<input type="text" class="a-input -lg" placeholder="Sample Text">
<input type="text" class="a-input -xl" placeholder="Sample Text">

Floating labels

This component requires Javascript

Floating labels are a solution to keep the placeholder visible when no label is attached to the input. Chi supports floating labels for -lg and -xl inputs. This component requires JavaScript to add/remove the -active class whenever the input focuses or is not empty.

<div class="a-inputWrapper -floatingLabel">
  <input class="a-input -lg" type="text" id="floating-label-lg">
  <label for="floating-label-lg">Placeholder text</label>
</div>

<div class="a-inputWrapper -floatingLabel">
  <input class="a-input -xl" type="text" id="floating-label-xl">
  <label for="floating-label-xl">Placeholder text</label>
</div>
<div class="a-inputWrapper -floatingLabel">
  <input class="a-input -lg" type="text" id="floating-label-lg">
  <label class="-active" for="floating-label-lg">Placeholder text</label>
</div>

<div class="a-inputWrapper -floatingLabel">
  <input class="a-input -xl" type="text" id="floating-label-xl">
  <label class="-active" for="floating-label-xl">Placeholder text</label>
</div>