Browse Components
Textarea
Room for longer thoughts, with native editing and clear guidance.
Basic
A visible label, useful help, and room to write. Drag the resize handle where supported.
Include goals, context, and any important details.
View Code
<div class="field">
<label for="project-notes">
Project notes
</label>
<textarea
class="input textarea"
id="project-notes"
name="notes"
rows="4"
aria-describedby="notes-help"
placeholder="What should the team know?"
>
</textarea>
<p id="notes-help" class="muted">
Include goals, context, and any important details.
</p>
</div>Length limit
Use a limit only when needed and explain it before people start typing. No live counter is included.
Maximum 500 characters. Some emoji count as more than one.
View Code
<div class="field">
<label for="project-notes">
Project notes
</label>
<textarea
class="input textarea"
id="project-notes"
name="notes"
rows="4"
maxlength="500"
aria-describedby="notes-help"
placeholder="What should the team know?"
>
</textarea>
<p id="notes-help" class="muted">
Maximum 500 characters. Some emoji count as more than one.
</p>
</div>Required and invalid
A static error after validation. Your application clears the error and aria-invalid when corrected.
Error: add project notes before continuing.
View Code
<div class="field">
<label for="project-notes">
Project notes (required)
</label>
<textarea
class="input textarea"
id="project-notes"
name="notes"
rows="4"
required
aria-invalid="true"
aria-describedby="notes-help"
placeholder="What should the team know?"
>
</textarea>
<p class="field-error" id="notes-help">
Error: add project notes before continuing.
</p>
</div>Disabled
Explain why editing is unavailable. Disabled values are not submitted.
Only the project owner can edit these notes.
View Code
<div class="field">
<label for="project-notes">
Project notes
</label>
<textarea
class="input textarea"
id="project-notes"
name="notes"
rows="4"
disabled
aria-describedby="notes-help"
placeholder="What should the team know?"
>
</textarea>
<p id="notes-help" class="muted">
Only the project owner can edit these notes.
</p>
</div>Read-only
People can focus, select, and copy the text. The value is still submitted.
These approved notes are available to copy.
View Code
<div class="field">
<label for="project-notes">
Project notes
</label>
<textarea
class="input textarea"
id="project-notes"
name="notes"
rows="4"
readonly
aria-describedby="notes-help"
placeholder="What should the team know?"
>
Launch checklist approved.
Review the final assets on Monday.
</textarea>
<p id="notes-help" class="muted">
These approved notes are available to copy.
</p>
</div>Right-to-left
Use the reading direction and language of the content.
הוסיפו מטרות ופרטים חשובים.
View Code
<div dir="rtl" lang="he">
<div class="field">
<label for="project-notes">
הערות לפרויקט
</label>
<textarea
class="input textarea"
id="project-notes"
name="notes"
rows="4"
aria-describedby="notes-help"
placeholder="מה הצוות צריך לדעת?"
>
</textarea>
<p id="notes-help" class="muted">
הוסיפו מטרות ופרטים חשובים.
</p>
</div>
</div>Without motion
Focus stays immediate. Shared color transitions respect reduced motion and this local opt-out.
Include goals, context, and any important details.
View Code
<div data-motion="none">
<div class="field">
<label for="project-notes">
Project notes
</label>
<textarea
class="input textarea"
id="project-notes"
name="notes"
rows="4"
aria-describedby="notes-help"
placeholder="What should the team know?"
>
</textarea>
<p id="notes-help" class="muted">
Include goals, context, and any important details.
</p>
</div>
</div>Installation
Download these files into the matching paths in your project, or use Create to assemble a kit. Include each dependency once. Do not also load app.css.
<link rel="stylesheet" href="/library/assets/base.css">
<link rel="stylesheet" href="/library/assets/field.css">
<link rel="stylesheet" href="/library/assets/textarea.css">11,003 bytes CSS including base · 0 bytes runtime JavaScript
Usage
Give it a clear purpose
Use a visible label and connect help text with aria-describedby. A placeholder is an example, never a replacement for the label.
Leave room to write
Set rows for the starting height. Textarea fills its container and allows vertical resizing where supported. Automatic growth is not included.
Preserve normal editing
Enter adds a new line. Keep paste, selection, undo, and keyboard navigation native. Put initial text between the tags, not in a value attribute.
Explain constraints and errors
Show required status and length limits before typing. Associate useful errors and clear aria-invalid when corrected. Validate on the server too.
Choose the right state
Disabled fields cannot be edited, focused, or submitted. Read-only fields remain focusable, copyable, and submitted.
Keep responsibilities clear
Your application owns saving, validation messages, and any character counter. Styling does not store or send the text.
Building with AI? The AI Manifest has these notes and the full contract. See the AI Guide.