Design Kit

Textarea

Textareas are used to input multi-line text data

Examples

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

Base

<div class="chi-form__item">
  <label class="chi-label" for="example__base">Label</label>
  <textarea class="chi-input" id="example__base">
    Sample text
  </textarea>
</div>

Disabled

<div class="chi-form__item">
  <label class="chi-label" for="example__disabled">Label</label>
  <textarea class="chi-input" id="example__disabled" disabled>
    Sample text
  </textarea>
</div>

Invalid

Textarea supports Chi's semantic class modifier -danger for indicating an invalid input.

This is an invalid label
<div class="chi-form__item">
  <label class="chi-label" for="example__invalid">Label</label>
  <div class="chi-input__wrapper -icon--right">
    <textarea class="chi-input -danger" id="example__invalid">
      Sample text
    </textarea>
  </div>
  <div class="chi-label -status -danger">This is an invalid label</div>
</div>

Icons

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

Left Aligned

<div class="chi-form__item">
  <label class="chi-label" for="example__icon-left">Label</label>
  <div class="chi-input__wrapper -icon--left">
    <textarea class="chi-input" id="example__icon-left">
      Sample text
    </textarea>
    <i class="chi-icon icon-map-marker -text--muted"></i>
  </div>
</div>

Right Aligned

<div class="chi-form__item">
  <label class="chi-label" for="example__icon-right">Label</label>
  <div class="chi-input__wrapper -icon--right">
    <textarea class="chi-input" id="example__icon-right">
      Sample text
    </textarea>
    <i class="chi-icon icon-circle-question-outline -text--muted"></i>
  </div>
</div>

Left + Right Aligned

<div class="chi-form__item">
  <label class="chi-label" for="example__icon-left-right">Label</label>
  <div class="chi-input__wrapper -icon--left -icon--right">
    <textarea class="chi-input" id="example__icon-left-right">
      Sample text
    </textarea>
    <i class="chi-icon icon-map-marker -text--muted"></i>
    <i class="chi-icon icon-check -text--success"></i>
  </div>
</div>

States

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

Success

<div class="chi-form__item">
  <label class="chi-label" for="example__success">Label</label>
  <textarea class="chi-input -success" id="example__success">
    Sample text
  </textarea>
</div>

<div class="chi-form__item">
  <label class="chi-label" for="example__success-icon">Label</label>
  <div class="chi-input__wrapper -icon--right">
    <textarea class="chi-input -success" id="example__success-icon">
      Sample text
    </textarea>
    <i class="chi-icon icon-check -text--success"></i>
  </div>
</div>

Warning

<div class="chi-form__item">
  <label class="chi-label" for="example__warning">Label</label>
  <textarea class="chi-input -warning" id="example__warning">
    Sample text
  </textarea>
</div>

<div class="chi-form__item">
  <label class="chi-label" for="example__warning-icon">Label</label>
  <div class="chi-input__wrapper -icon--right">
    <textarea class="chi-input -warning" id="example__warning-icon">
      Sample text
    </textarea>
    <i class="chi-icon icon-warning -text--warning"></i>
  </div>
</div>

Danger

<div class="chi-form__item">
  <label class="chi-label" for="example__danger">Label</label>
  <textarea class="chi-input -danger" id="example__danger">
    Sample text
  </textarea>
</div>

<div class="chi-form__item">
  <label class="chi-label" for="example__danger-icon">Label</label>
  <div class="chi-input__wrapper -icon--right">
    <textarea class="chi-input -danger" id="example__danger-icon">
      Sample text
    </textarea>
    <i class="chi-icon icon-circle-warning -text--danger"></i>
  </div>
</div>

Sizes

Textareas support the following sizes: -sm, -md, -lg, -xl. The default size is -md.

<div class="chi-form__item">
  <label class="chi-label" for="example__sm">Label</label>
  <textarea class="chi-input -sm" id="example__sm">
    Sample text
  </textarea>
</div>
<div class="chi-form__item">
  <label class="chi-label" for="example__md">Label</label>
  <textarea class="chi-input -md" id="example__md">
    Sample text
  </textarea>
</div>
<div class="chi-form__item">
  <label class="chi-label" for="example__lg">Label</label>
  <textarea class="chi-input -lg" id="example__lg">
    Sample text
  </textarea>
</div>
<div class="chi-form__item">
  <label class="chi-label" for="example__xl">Label</label>
  <textarea class="chi-input -xl" id="example__xl">
    Sample text
  </textarea>
</div>

Web Component

Properties

Web component coming soon

Accessibility

Accessibility guidelines coming soon