Textarea
Use the textarea component when users need to enter multiple lines of text, such as feedback, descriptions, or longer responses.
Default Textarea
Textareas automatically resize vertically. The default height accommodates approximately 5 lines of text.
Do not include personal or financial information.
<div class="form-group">
<label class="form-label" for="textarea-1">Can you provide more details?</label>
<span class="form-hint">Do not include personal or financial information.</span>
<textarea class="form-textarea" id="textarea-1" name="more-details" rows="5"></textarea>
</div>With Character Count
Show a character count when there's a limit on how much users can enter.
Enter up to 500 characters.You have 500 characters remaining
<div class="form-group">
<label class="form-label" for="textarea-2">Describe the issue</label>
<span class="form-hint">Enter up to 500 characters.</span>
<textarea class="form-textarea" id="textarea-2" name="issue" rows="5" maxlength="500"></textarea>
<span class="form-character-count">You have 500 characters remaining</span>
</div>Character Count Exceeded
When the character limit is exceeded, use the error style.
You have entered too many charactersYou have 23 characters too many
<div class="form-group form-group-error">
<label class="form-label" for="textarea-3">Describe the issue</label>
<span class="form-error-message">You have entered too many characters</span>
<textarea class="form-textarea" id="textarea-3" ...></textarea>
<span class="form-character-count form-character-count-error">
You have 23 characters too many
</span>
</div>Error State
Use the error state when validation fails.
Enter a description of your complaint
<div class="form-group form-group-error">
<label class="form-label" for="textarea-4">Describe your complaint</label>
<span class="form-error-message">Enter a description of your complaint</span>
<textarea class="form-textarea" id="textarea-4" name="complaint" rows="5"></textarea>
</div>Different Heights
Adjust the rows attribute to change the initial height.
<textarea class="form-textarea" rows="3"></textarea>
<textarea class="form-textarea" rows="8"></textarea>Disabled State
<textarea class="form-textarea" disabled>
This content cannot be edited.
</textarea>Usage Guidelines
Do
- Use for multi-line text input
- Provide hint text about character limits
- Make the textarea tall enough for the expected content
- Allow users to resize the textarea vertically
Don't
- Don't use for single-line input (use text input instead)
- Don't set unreasonably low character limits
- Don't disable resizing unless absolutely necessary
Accessibility
- Always associate a label with the textarea
- Announce character count changes to screen readers
- Error messages are clearly linked to the textarea
- Focus state is clearly visible
CSS Classes
/* Textarea */
.form-textarea { }
/* Character count */
.form-character-count { }
.form-character-count-error { }
/* Error state */
.form-group-error { }
.form-error-message { }