Chi Design System

Text Inputs

In order to use a text input, a password or an email input just use an input type="[text|password|email]" with the class a-input. By default text inputs are fluid, adjusting them to it's parent width.

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

If we want to add some icon to the text input we must wrap the input inside a div using the class a-inputWrapper, add the icon as a sibling of the input and specify where is going to be placed the icon.

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

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

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

States

Text inputs has three states vailable:

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

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

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

Also we can add icons to emphasize the state.

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

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

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

Sizes

There are two modifiers available for the text input size:

  • Small: -small
  • Large: -large
<input type="text" class="a-input -small" placeholder="Placeholder" value="Sample Text">

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