Textarea
A textarea is an input field that allows for extended user input.
Basic
HTML
<form class="o-form o-form--large">
<div class="o-form__item">
<textarea name="textarea" id="textarea" rows="3" class="o-form__textarea"></textarea>
<label for="textarea" class="o-form__label">Label</label>
<div class="o-form__description">Description text</div>
</div>
</form>
Read-only
HTML
<form class="o-form o-form--large">
<div class="o-form__item">
<textarea name="textarea_read_only" id="textarea_read_only" readonly rows="10" class="o-form__textarea has-value">{{ value }}</textarea>
<label for="textarea_read_only" class="o-form__label">Label</label>
<div class="o-form__description">Description text</div>
</div>
</form>
Disabled
HTML
<form class="o-form o-form--large">
<div class="o-form__item">
<textarea name="textarea_disabled" id="textarea_disabled" disabled="disabled" rows="3" class="o-form__textarea"></textarea>
<label for="textarea_disabled" class="o-form__label">Label</label>
<div class="o-form__description">Description text</div>
</div>
</form>
Auto expand
HTML
<form class="o-form o-form--large">
<div class="o-form__item">
<textarea name="textarea_auto_expand" id="textarea_auto_expand" data-auto-expand rows="3" class="o-form__textarea"></textarea>
<label for="textarea_auto_expand" class="o-form__label">Label</label>
<div class="o-form__description">Description text</div>
</div>
</form>
Usage
| Attribute | Description | Possible values | Type | Required | Default |
|---|---|---|---|---|---|
| size | Set with .o-form--large on .o-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 | - | - |