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