Text area
Text areas allow for input that extends across multiple lines.
- CSS
- Marko
- React
- Label
- Value
- Container
- Helper text
Label
Include a label unless another adjacent element already serves that purpose. The label names what the user enters in the field.
- Use sentence case
- No ending punctuation
- Use a noun or noun phrase
- Aim for 1–3 words
Value
The value is the text the user enters and submits with the form. User input replaces any placeholder text after the first character is entered.
Placeholder text
Placeholder text, or “ghost text,” gives users a hint about the expected input format. Use realistic examples of what a user might enter, not descriptions of the field.
Placeholder disappears when the user starts typing, so don’t use it for instructions or required information.
- Use sentence case
- End with ellipsis
Helper text
Helper text is placed below the field and informs the user of any requirements or disclaimers. It's shown persistently or on focus. Don't repeat the label.
- Use sentence case
- No ending punctuation, unless there's more than 1 sentence
- Keep to one line
Character count
A character counter appears when a character limit is set. It updates in real time as the user types.
Format as xx / n (with spaces for clarity).
Rows
The default number of rows can be customized to increase or decrease the height of the field. The default is 4 rows.
Resize
Web browsers add a resize indicator to the bottom right of text area fields by default. Dragging the corner adjusts the field’s width and height. Resizing can be disabled if the behavior isn’t desirable.
Overflow
Text area fields overflow top and bottom. While focused, the content will shift to keep the cursor in view as the user enters characters. When the field loses focus, the content will scroll to the beginning. Focusing on the field again returns the user to the end of the content.
Error messages
Error messages appear below the field when the input doesn't meet the required format or conditions. The error message replaces any existing helper text.
Keep the tone neutral, don’t blame or scare the user. Clearly inform users the requirements so they know how to fix it.
- Use sentence case
- No ending punctuation
- Avoid technical language or filler words like “please”, “sorry”, or “oops”
Disabled
Users cannot focus on or change disabled fields. Their availability depends on certain requirements. No value will be submitted from disabled fields.
Small
Text area fields expand the full width of the screen up to the page margins on small screens.
Medium and large
Text area fields expand up to their full width on larger screens. Web devices will have the browser’s native text area resize indicator in the bottom right corner.
Usage
Do use text area fields when longer values and sentences are encouraged.
Don’t use text area fields when the expected value is short. Use a simple text field instead.
