Chi Documentation

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>

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. -iconLeft) to specify where it should be placed.

Left Aligned

<div class="a-inputWrapper -iconLeft">
  <input type="text" class="a-input" placeholder="Placeholder" value="Sample text">
  <div class="a-icon -text--muted">
    <svg>
      <use xlink:href="#icon-edit"></use>
    </svg>
  </div>
</div>

Right Aligned

<div class="a-inputWrapper -iconRight">
  <input type="text" class="a-input" placeholder="Placeholder" value="Sample text">
  <div class="a-icon -text--muted">
    <svg>
      <use xlink:href="#icon-edit"></use>
    </svg>
  </div>
</div>

Left + Right Aligned

<div class="a-inputWrapper -iconLeft -iconRight">
  <input type="text" class="a-input" placeholder="Placeholder" value="Sample text">
  <div class="a-icon -text--muted">
    <svg>
      <use xlink:href="#icon-edit"></use>
    </svg>
  </div>
  <div class="a-icon -text--muted">
    <svg>
      <use xlink:href="#icon-check"></use>
    </svg>
  </div>
</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 -iconRight">
  <input type="text" class="a-input -success" placeholder="Placeholder" value="Sample Text">
  <div class="a-icon -text--success">
    <svg>
      <use xlink:href="#icon-check"></use>
    </svg>
  </div>
</div>

Warning

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

<div class="a-inputWrapper -iconRight">
  <input type="text" class="a-input -success" placeholder="Placeholder" value="Sample Text">
  <div class="a-icon -text--warning">
    <svg>
      <use xlink:href="#icon-warning"></use>
    </svg>
  </div>
</div>

Danger

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

<div class="a-inputWrapper -iconRight">
  <input type="text" class="a-input -danger" placeholder="Placeholder" value="Sample Text">
  <div class="a-icon -text--danger">
    <svg>
      <use xlink:href="#icon-circle-warning"></use>
    </svg>
  </div>
</div>

Additional Sizes

Text inputs offer two size modifiers, -small and -large.

Small

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

Large

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