Chi · Textareas

Textareas

Textareas are used to input multi-line text data

Examples

To render a textarea, apply the class a-input to a textarea.

Base

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

Disabled

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

Icons

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

Left Aligned

<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>

Right Aligned

<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>

Left + Right Aligned

<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 offer three validation states: -success, -warning, and -danger.

Success

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

<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>

Warning

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

<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>

Danger

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

<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>

Additional Sizes

Textareas offer two size modifiers: -small and -large.

Small

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

Large

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