Text areas allow for the collection of input longer than a single line.
Default text area
disabledclass if you want to disable the text area
- Label: Inform users of what data should be put into the field, labels must always be outside of the text field.
- Word count (situational): Serves to let users know the max number of characters is allowed and when they have gone over.
Within the text area
Ensure that there is a min of 16px horizontal spacing and 8px vertical spacing within the text area.
Text area should be used:
- When users are required to enter more than a line of text.
Text area should not be used:
- When have complex or too many open-ended answers. We recommend that you break your questions up into a series of simpler questions instead. For example, consider using the checkbox component if you want users to give multiple answers from a predetermined set of options.
Use word count
Do use word count if you want to limit a users answers.
Labels are outside of the text field
Labels should be above or next to the text field. This makes it clear that the user is able to input a answer.
Avoid placeholder text
Placeholder text disappears when a text input is filled in. If the placeholder text is not visible, users will no longer have the text when they need to review their entries. Use hint text instead of placeholder text.