Textarea
Displays a form textarea or a component that looks like a textarea.
Last updated: March 11, 2026
This page now includes textarea patterns for forms, writing flows, feedback, validation, and editor-like inputs.
Basic Textarea
Default textarea state.
Command Textarea
A slash-command writing surface with inline /commands plus keyboard shortcuts (Arrow keys + Enter + Esc).
/ to trigger writing commandsShortcuts: ↑/↓ navigate, Enter apply,Esc close.
Diff Textarea
A rewrite-focused textarea that highlights added text inline and surfaces removed text below.
Added text shows green tint inside textarea. Removed text is listed below.
Removed Text
clear onboarding copy
Textarea With Label
Textarea field paired with a standard label.
Textarea With Character Count
Textarea that limits and displays character usage.
0/200
Textarea With Helper Text
Textarea with supporting copy below the field.
This will be displayed on your public profile.
Textarea With Error
Error-state textarea with destructive styling.
This field is required.
Textarea Disabled
Disabled textarea state.
Textarea Read Only
Read-only textarea for terms and immutable content.
Textarea Auto Resize
Textarea that grows as content expands.
Textarea With Submit
Comment-style textarea with inline submit action.
Textarea With Clear
Textarea with clear/reset affordance.
Textarea Fixed Height
Textarea with resizing disabled and fixed vertical space.
Textarea Large Editor
Full-width larger editor-like writing surface.
Textarea Code Input
Monospace textarea tuned for code snippets.
Textarea With Badge
Label area with additional status badge.
Textarea Floating Label
Floating label treatment for compact forms.
Textarea With Word Count
Shows both word and character totals.
Textarea With Save State
Draft editing with save/revert controls.
Textarea Success
Validated/success state for positive feedback.
Looks good!
Textarea Borderless
Minimal borderless writing surface.
Textarea With Subject
Two-field composition pattern with subject and body.