Textarea
Default
<div class="e-field">
<label class="e-field__label" for="textarea1">
Form input label
<span class="e-field__label__info">
<b>
150
</b>
character left
</span>
</label>
<textarea class="e-input e-input-textarea" id="textarea1"></textarea>
</div>
<div class="e-field"><label class="e-field__label" for="textarea1">Form input label<span class="e-field__label__info"><b>150</b> character left</span></label><textarea class="e-input e-input-textarea" id="textarea1"></textarea></div>Variations
Error
<div class="e-field">
<label class="e-field__label" for="textarea3">
Form input label
</label>
<textarea class="e-input e-input-textarea e-input-error" id="textarea3"></textarea>
</div>
<div class="e-field"><label class="e-field__label" for="textarea3">Form input label</label><textarea class="e-input e-input-textarea e-input-error" id="textarea3"></textarea></div>Disabled
<div class="e-field">
<label class="e-field__label" for="textarea2">
Form input label
</label>
<textarea class="e-input e-input-textarea" id="textarea2" disabled></textarea>
</div>
<div class="e-field"><label class="e-field__label" for="textarea2">Form input label</label><textarea class="e-input e-input-textarea" id="textarea2" disabled></textarea></div>Code
<div class="e-field">
<label class="e-field__label" for="textarea4">
Form input label
</label>
<textarea class="e-input e-input-textarea e-input-code" id="textarea4"></textarea>
</div>
<div class="e-field"><label class="e-field__label" for="textarea4">Form input label</label><textarea class="e-input e-input-textarea e-input-code" id="textarea4"></textarea></div>Code
<div class="e-field">
<label class="e-field__label" for="textarea5">
auto height input
</label>
<textarea class="e-input e-input-textarea e-input-auto_height" id="textarea5" rows="10"></textarea>
</div>
<div class="e-field"><label class="e-field__label" for="textarea5">auto height input</label><textarea class="e-input e-input-textarea e-input-auto_height" id="textarea5" rows="10"></textarea></div>Related components
InputTextarea
Use textarea to allow users to enter a larger amount of text that would not fit into a single line. The text can be letters, numbers or punctuation.
Structure
Best practices
Textareas should:
- Be clearly labeled to define what information a user can enter. Use only a few words.
- The label should be aligned to the left or above the textarea, in harmony with the surrounding layout.
- Have a placeholder text - when not edited - to provide a hint or example about what should be entered.
- The placeholder text should be set in lighter color and with cursive to be visually distinguishable from the content typed in the textarea.
- Have a helper message under the textarea if the placeholder text is insufficient for further instructions.
- Show the cursor when clicking into it.
- Allow the user to write, edit, copy, paste or select text in it.
- Provide options to format the text, if it makes sense.
- E.g. bold, italic, insert links, etc.
- Limit the text formatting options to match the options that are actually available on the output.
- Have it as a WYSIWYG editor when having formatting options, or provide a preview of the output.
- Allow the user to set the height of the textarea to fit the amount of text, or it should grow in height dynamicaly as the text in the textarea exceeds the original height of it.
- Provide a feedback on the amount of text already in the textarea, especially if it is limited.
- Have a counter of characters above the top right corner of the textarea. E.g. '150 characters left'.
- Consider highlighting text that are over the character limit.
- Have a red asterisk after its label if it is a mandatory field.
Try to avoid:
- Using it for a few words of text that would fit into a single line. Use Input instead.
- Providing formatting options that are not available on the output.