- Guidelines
- React API Reference
- Blazor API Reference
Textareas allow users to enter and edit multi-line text content. They provide a flexible input area for longer form content such as comments, descriptions, or messages.
Guidance
| Aspect | Best Practice |
|---|---|
| Usage | Use textareas for multi-line text entry where users need to enter paragraphs or longer content. For single-line text, use standard inputs instead. |
| Content | Provide clear labels. Use placeholder text sparingly. Include helper text to guide users on expected content length, format, or purpose. |
| Behavior | Support expected keyboard interactions (Enter for new lines, tab navigation). Allow resizing when appropriate. Consider auto-growing height for longer content. |
| States | Clearly indicate default, focus, disabled, read-only, error, and success states through visual styling. |
| Feedback | Provide character count or validation feedback when appropriate. Show clear focus states to indicate active editing. |
| Examples | Comment fields, feedback forms, description areas, message composition, or other long-form text entry. |
Best Practices
- Clear Labeling: Always provide visible labels that indicate the purpose and any content requirements.
- Appropriate Sizing: Size textareas appropriately for the expected content length and available space.
- Resize Behavior: Consider whether users should be able to resize the textarea vertically, horizontally, or both.
- Validation Feedback: Provide clear feedback about minimum/maximum length requirements or other content constraints.
- Character Counters: Include character counters for textareas with specific length limitations.
Do’s and Don’ts
Do
- Provide clear, visible labels.
- Size appropriately for expected content.
- Support standard keyboard interactions.
- Include character counters when there are length limitations.
Don't
- Use for single-line text entry.
- Make textareas too small for expected content.
- Rely solely on placeholder text for instructions.
- Disable standard keyboard behaviors users expect.
Additional Guidance
- Psychological Impact:
- Writing Comfort: Appropriately sized textareas create a comfortable writing environment that encourages more thoughtful input.
- Cognitive Load: Clear guidance and feedback reduce the mental effort required to understand requirements.
- User Confidence: Visible character counters and validation help users feel confident about meeting content requirements.