Text area
Use the text area component when you need to let users enter an amount of text that’s longer than a single line. If you need to let users enter shorter answers no longer than a single line, such as a phone number or name, use the text input component.
Do not use the text area to ask a complex question. Split it into simple questions, where you can use text input or radio button components instead.
Use appropriately sized text areas
Think about how much text you expect a user to enter. The default height of the text area component is 140px. You can change this, if you expect the user to enter more or less text, using the min-height attribute.
The area expands automatically if the user enters an amount of text that’s larger than the size you’ve set.
With hint text
With word count
You can add a word count to a text area so a user knows how much more they can enter, when there is a limit.
Users can enter or paste in more than the word count. They then get a warning rather than losing any of it, allowing them to edit their text down.
You have 68 words remaining
With error
Display an inline error when there's something wrong.
Example 1
If the question is mandatory and the user hasn’t entered any text.
Example 2
If the user tries to submit an amount of words when they’ve exceeded the word limit, show an error message that tells them by how many.
You have 16 words too many