Textarea Preview
A textarea allows people to enter long, free-form text data, like a comment.
If you only need someone to enter one line of information, try an input instead.
Resources
Behavior
By default, textareas are not resizable. If there is overflow content, the textarea will scroll. Optionally, you can change the value of the resize prop to let people control how large the textarea is and how much information they see at once.
Layout
The size of the textarea should fit the approximate volume of the content you expect people to enter.
Accessibility
Don’t use placeholder text in the textarea for essential information that people will need to complete the textarea. If you do include placeholder text, be sure it is combined with a label. When someone focuses on the input, the placeholder disappears, and removing the prompt can make it difficult for some people, including those with cognitive impairments, to enter information.
Placeholder text must be associated with an aria-label for assistive technologies.
Include a label and use the placeholder to reinforce it
Don’t put too much information in the placeholder
Content
Placeholder text
You can use platceholder text to give a short, supplementary hint, or an example of formatting for the expected input value. It should guide people toward how to provide data if it’s not intuitive from the label. For example, “Type a new message” as placeholder text in a chat box.
Skip the period in placeholder text. For more info, see Periods in the Microsoft Writing Style Guide.
Don’t use placeholder text for essential information, which should appear either in the label or in helper text below the textarea, so it’s always visible. If you do include placeholder text, be sure it is combined with a label. See the field component for more info.
