Textarea
A textarea is an input field that allows for extended user input.
Basic
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
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
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
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 | - | - |