Status
The status of the component
Component checklist
Ready for use!
Figma component
A link to the Figma library where the component lives.
Repository
A link to the repo where the component lives.
Appropriate width and minimum height
The width of the text area should be appropriate that it can show enough data. The minimum height of a text area should at least display 4 lines of text.
When to use a Text Area VS Text Field
A text area should be used when the requested data is long standard text, whereas a text field is used when the requested data is short and may have a specific type (ie. email).
Do
Type of data that would use a text area may include: messages, descriptions/notes, and paragraphs of text like an article, journal entry, or explanations.
Don't
Text areas should not be used for responses that are short and specific. in this example, a text field is more fitting. The height of the text area is also too short.
Use descriptive labels
With very few exceptions, labels should always be used with a text area. The label itself should also be descriptive and clear in its meaning.
Do
Don't
Placeholder Text
Placeholder text within the text area is optional. When used, it should show an example of what the desired input is.
Do
Placeholder text displaying an example of the type of data input being requested.
Don't
A repeat of label or a generic description does not provide helpful guidance for users.
Do
Whether a field is mandatory or not, ghost text can be used to clarify what data is being requested.
Don't
Do not use placeholder text to reiterate that the text field is mandatory.
Related Components & Patterns