Textarea

A textarea is an input field that allows for extended user input.

Basic

Description text
HTML
    <form class="form form--large">
  <div class="form__item">
    <textarea name="textarea" id="textarea" rows="3" class="form__textarea"></textarea>
    <label for="textarea" class="form__label">Label</label>
    <div class="form__description">Description text</div>
  </div>
</form>
  

Read-only

Description text
HTML
    <form class="form form--large">
  <div class="form__item">
    <textarea name="textarea_read_only" id="textarea_read_only" readonly rows="10" class="form__textarea has-value">{{ value }}</textarea>
    <label for="textarea_read_only" class="form__label">Label</label>
    <div class="form__description">Description text</div>
  </div>
</form>
  

Disabled

Description text
HTML
    <form class="form form--large">
  <div class="form__item">
    <textarea name="textarea_disabled" id="textarea_disabled" disabled="disabled" rows="3" class="form__textarea"></textarea>
    <label for="textarea_disabled" class="form__label">Label</label>
    <div class="form__description">Description text</div>
  </div>
</form>
  

Auto expand

Description text
HTML
    <form class="form form--large">
  <div class="form__item">
    <textarea name="textarea_auto_expand" id="textarea_auto_expand" data-auto-expand rows="3" class="form__textarea"></textarea>
    <label for="textarea_auto_expand" class="form__label">Label</label>
    <div class="form__description">Description text</div>
  </div>
</form>
  

Usage

Attribute Description Possible values Type Required Default
size Set with .form--large on .form large string - -
disabled Set with disabled attribute on textarea disabled string - -
read-only Set with readonly attribute on textarea readonly string - -
data-auto-expand Set with data-auto-expand attribute on textarea, that makes textarea autoresize data-auto-expand string - -