Design Kit

Textarea

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>

With Label

<div class="m-form__item">
  <label class="a-label" for="example">Label</label>
  <textarea class="a-input" id="example">
    Sample text
  </textarea>
</div>

Icons

To add icons to a textarea, wrap the input in a div using the class m-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="m-input__wrapper -icon--left">
  <textarea class="a-input">
    Sample text
  </textarea>
  <i class="a-icon icon-map-marker -text--muted"></i>
</div>

Right Aligned

<div class="m-input__wrapper -icon--right">
  <textarea class="a-input">
    Sample text
  </textarea>
  <i class="a-icon icon-circle-question-outline -text--muted"></i>
</div>

Left + Right Aligned

<div class="m-input__wrapper -icon--left -icon--right">
  <textarea class="a-input">
    Sample text
  </textarea>
  <i class="a-icon icon-map-marker -text--muted"></i>
  <i class="a-icon icon-check-alt -text--success"></i>
</div>

States

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

Success

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

<div class="m-input__wrapper -icon--right">
  <textarea class="a-input -success">
    Sample text
  </textarea>
  <i class="a-icon icon-check-alt -text--success"></i>
</div>

Warning

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

<div class="m-input__wrapper -icon--right">
  <textarea class="a-input -warning">
    Sample text
  </textarea>
  <i class="a-icon icon-warning -text--warning"></i>
</div>

Danger

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

<div class="m-input__wrapper -icon--right">
  <textarea class="a-input -danger">
    Sample text
  </textarea>
  <i class="a-icon icon-circle-warning -text--danger"></i>
</div>

Sizes

Textareas supports a full spectrum of sizes: -sm, -md, -lg, -xl. The default size is -md.

<textarea class="a-input -sm">
  Sample text
</textarea>
<textarea class="a-input -md">
  Sample text
</textarea>
<textarea class="a-input -lg">
  Sample text
</textarea>
<textarea class="a-input -xl">
  Sample text
</textarea>