Use the textarea component to let users enter text that is longer than a single line.
Do not use the textarea component to let users enter:
In these cases, use input component instead.
The textarea component is a form element that should always be used in a form. For a description of the usage, the behavior, the layout and validation of form elements, see the form component documentation.
{% include '@form-item' with _context %}
<!-- Default -->
<div class="form-item ">
<label for="textearea">Textarea
</label>
<div class="form-columns">
<div class="form-item-column">
<textarea name="textearea" id="textearea">
</textarea>
</div>
<div class="form-item-column"></div>
</div>
</div>
<!-- With Error -->
<div class="form-item error">
<label for="textarea--error">Textarea
</label>
<div class="field-message " id="textarea--error-description">
You can add an optional field description here.
<div class="accolade "></div>
</div>
<div class="form-columns">
<div class="form-item-column">
<textarea name="textarea--error" id="textarea--error" class="error">
</textarea>
</div>
<div class="form-item-column">
<div class="field-message error" role="alert" id="textarea--error-message">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec laoreet, urna sit amet convallis rhoncus, felis ex.
<div class="accolade "></div>
</div>
</div>
</div>
</div>
<!-- With Success -->
<div class="form-item success">
<label for="textarea--success">Textarea
</label>
<div class="field-message " id="textarea--success-description">
You can add an optional field description here.
<div class="accolade "></div>
</div>
<div class="form-columns">
<div class="form-item-column">
<textarea name="textarea--success" id="textarea--success" class="success">
</textarea>
</div>
<div class="form-item-column">
<div class="field-message success" role="alert" id="textarea--success-message">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec laoreet, urna sit amet convallis rhoncus, felis ex.
<div class="accolade "></div>
</div>
</div>
</div>
</div>
<!-- Disabled -->
<div class="form-item ">
<label for="textarea--disabled">Textarea
</label>
<div class="form-columns">
<div class="form-item-column">
<textarea name="textarea--disabled" id="textarea--disabled" disabled="disabled">
</textarea>
</div>
<div class="form-item-column"></div>
</div>
</div>
/* Default */
{
"id": "textearea",
"input_component": "input-textarea",
"label": "Textarea"
}
/* With Error */
{
"id": "textarea--error",
"input_component": "input-textarea",
"label": "Textarea",
"modifier": "error",
"field_description": "You can add an optional field description here.",
"field_message": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec laoreet, urna sit amet convallis rhoncus, felis ex."
}
/* With Success */
{
"id": "textarea--success",
"input_component": "input-textarea",
"label": "Textarea",
"modifier": "success",
"field_description": "You can add an optional field description here.",
"field_message": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec laoreet, urna sit amet convallis rhoncus, felis ex."
}
/* Disabled */
{
"id": "textarea--disabled",
"input_component": "input-textarea",
"label": "Textarea",
"disabled": true
}