in development

Textarea

Description

The <textarea> element is used for multi-line text input, making it ideal for comments, messages, or other longer user inputs. Unlike the <input> element, which is limited to a single line, <textarea> allows users to input and edit text over multiple lines.

A <label> should always accompany a <textarea> to ensure accessibility and clarity. The label is typically positioned above the field and follows the standard label styling of our design system.

Usage

• Use clear and descriptive labels: Each <textarea> should have an associated <label> describing its purpose. The for attribute of the <label> must match the id of the <textarea> to ensure compatibility with screen readers.
• Define appropriate sizing: Set a sensible rows and cols value or use CSS for flexible resizing while avoiding excessively small or large default sizes.
• Avoid using placeholders as labels: Since placeholder text remains visible until the user starts typing, it should not replace a proper <label>. Instead, use it to provide hints or examples of expected input.
• Ensure visible focus indicators: The focus state of the <textarea> should be clearly visible for users navigating via keyboard.
• Error identification: If validation is required, indicate errors using aria-invalid="true" and provide a helpful error message linked with aria-describedby.
• Support resizing appropriately: By default, <textarea> elements are resizable. Ensure resizing does not break layouts or cause usability issues. Use resize: none; in CSS if resizing should be disabled.
• Contrast and readability: Maintain proper contrast between text, background, and borders to ensure readability.
• Provide accessible instructions: If a specific format or length limit is required, use help text or aria-describedby to communicate these requirements.

Example

<textarea>

Textarea with label

The label

Textarea with error

Please fill this field

Resources

• textarea in Figma