TextArea
The TextArea component can be used as a multi-line plain-text editing control to enter free-form text, such as a comment on a form. The component uses a fallback FormFieldMessages context if it wasn't wrapped in a FormField.
When to use
- The text input spans more than one sentence, such as for comments, descriptions, feedback, or messages. Add appropriate security measures if the input should be masked.
- The length or line breaks of the user's input can't be predicted.
- Character limits with validation (minLength, maxLength) are needed.
- Users want to see their full text input at once, without horizontal scrolling.
When not to use
- The text input is a single line, an email, a URL, or a phone number. Use TextInput instead.
- The text input is a password, use PasswordInput.
Content guidelines
Label (recommended)
Add a label that describes the purpose or context for the input. It should be descriptive but short (1-2 words).
- Do: Feedback
- Don't: Do you have some feedback for us?
- Don't: Text area
Placeholder (required)
- Default text: Add text
A customized placeholder in the text area can be more helpful with this component. If you choose to customize the placeholder, do the following:
- Use the formula Add + [subject] or [Verb] + [subject].
- “Add” is the default verb for our placeholders. Don't replace it with alternates like “Enter,” “Fill,” or “Type,” unless there's a good reason to do so.
- Omit unnecessary articles (a, an, the).
- Don't add periods, ellipses, or exclamation marks.
Custom example: Add your feedback here
Don't use the placeholder for information users need to complete the task, as placeholders disappear when users start typing.
Hint (optional)
Use the hint (FormFieldMessages component) for additional information that helps users add a valid input and avoid an error. Include a character counter if there's a character limit. Always provide any error messages here too.
Example hint: 0/100 characters
- Keep the hint short.
- Only add periods after sentences.