Chi Design System

Textareas

In order to use a textarea just use textarea with the class a-input.

<textarea class="a-input">
  Sample text
</textarea>

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

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

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

<div class="a-inputWrapper -iconLeft -iconRight">
  <textarea class="a-input">
    Sample text
  </textarea>
  <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

Textareas has three states vailable:

  • success: -success
  • warning: -warning
  • danger: -danger
<textarea class="a-input -success">
  Sample text
</textarea>

<textarea class="a-input -warning">
  Sample text
</textarea>

<textarea class="a-input -danger">
  Sample text
</textarea>

Also we can add icons to emphasize the state.

<div class="a-inputWrapper -iconRight">
  <textarea class="a-input -success">
    Sample text
  </textarea>
  <div class="a-icon -success">
    <svg>
      <use xlink:href="#check"></use>
    </svg>
  </div>
</div>

<div class="a-inputWrapper -iconRight">
  <textarea class="a-input -warning">
    Sample text
  </textarea>
  <div class="a-icon -warning">
    <svg>
      <use xlink:href="#warning"></use>
    </svg>
  </div>
</div>

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

Sizes

There are two modifiers available for the textarea size:

  • Small: -small
  • Large: -large
<textarea class="a-input -small">
  Sample text
</textarea>

<textarea class="a-input -large">
  Sample text
</textarea>