Change log
Components
Textarea
- Overview
- Usage
Overview
When to use
Use the textarea component when you need to let users enter an amount of text that’s longer than a single line.
When not to use
Do not use the textarea component if you need to let users enter shorter answers no longer than a single line, such as an email address or a name. In this case, you should use the text input component.
Principles
Textareas should always have labels. Placeholder text is not a suitable substitute for a label, as it disappears when users click inside the textarea.
Make the height of a textarea proportional to the amount of text you expect users to enter.
Size
Regular size should be used in most cases.
Regular size
Compact size
Required indicator
Hint text
Error messages
Character counter
info
This example uses JavaScript to count the characters. Source code can be found here.