Layr
⌘K
Ctrl K
Design Systems
AI Designer
Account
Roadmap
Sign in
Getting started
Github Primer
Primer UI
Pro
Components
Action Bar
Action List
Action Menu
Anchored Overlay
Autocomplete
Avatar
Avatar Pair
Avatar Stack
Banner
Blankslate
Border Box
Box
Branch Name
Breadcrumbs
Button
Button Group
Button Marketing
Checkbox
Checkbox Group
Circle Badge
Circle Octicon
Clipboard Copy
Clipboard Copy Button
Close Button
Comment Box
Counter Label
Data Table
Details
Dialog
Form Control
Header
Heading
Hidden Text Expander
Icon
Icon Button
Image
Inline Message
Label
Label Group
Layout
Link
Markdown
Nav List
Octicon Symbols
Overlay
Page Header
Page Layout
Pagehead
Pagination
Pointer Box
Popover
Progress Bar
Radio
Radio Group
Relative Time
Segmented Control
Select
Selectpanel
Skeleton Avatar
Skeleton Box
Skeleton Text
Spinner
Split Page Layout
Stack
State Label
Subnav
Tab Container
Tab Nav
Tab Panels
Text
Text Input
Text Input With Tokens
Textarea
Timeline
Timeline Item
Toggle Switch
Token
Tooltip
Tree View
Truncate
Underline Nav
Underline Panels
<div class="anatomy-item"> <strong>Required indicator:</strong> Indicates that a value is required. Must be shown for any required field, even if all fields in the form are required. When using symbols -e.g., an asterisk (*)- to indicate particular fields are required within a form, consider adding a "Required fields are marked with an asterisk (*)" message at the top of the form for extra clarity. </div> <div class="anatomy-item"> <strong>Input (required):</strong> Accepts user free-form text input </div> <div class="anatomy-item"> <strong>Caption:</strong> Provides additional context about the field to help users fill in the correct data or explain how the data will be used. Caption text should be as short as possible. Caption text may be displayed at the same time as a validation message, or it may be hidden if it only provides redundant information. </div> <div class="anatomy-item"> <strong>Validation message:</strong> A single validation message may be displayed to provide helpful information for a user to complete their task. It is most commonly used to explain why a value is invalid so they can correct it and submit the form. </div> </div> <!-- Complete Anatomy Example --> <div class="form-group-example"> <label class="form-label" for="anatomy-example"> Project Description <span style="color: var(--color-danger-fg);">*</span> </label> <p class="form-caption">Provide a detailed description of your project goals and requirements.</p> <textarea class="form-control" id="anatomy-example" rows="4" required></textarea> <p class="form-validation-message" style="color: var(--color-danger-fg);">Please provide a description of at least 10 characters.</p> </div> </div> <!-- Options Section --> <div class="section"> <h2>Options</h2> <h3>Width</h3> <img class="hero-image" src="https://user-images.githubusercontent.com/2313998/226424288-001f5f16-94d3-445e-8e61-d7f18acd39b5.png" alt="Textarea width options" role="presentation"> <p>By default, a textarea will the width of a line of 30 characters.</p> <p>You can change this to be any number of characters, or render the textarea to fill the width of its parent element.</p> <div class="width-example"> <div class="form-group"> <label class="form-label" for="width-small">Small (20 chars)</label> <textarea class="form-control" id="width-small" rows="3" style="width: 20ch;"></textarea> </div> <div class="form-group"> <label class="form-label" for="width-default">Default (30 chars)</label> <textarea class="form-control" id="width-default" rows="3" style="width: 30ch;"></textarea> </div> <div class="form-group" style="width: 100%;"> <label class="form-label" for="width-full">Full Width</label> <textarea class="form-control" id="width-full" rows="3" style="width: 100%;"></textarea> </div> </div> <h3>Height</h3> <img class="hero-image" src="https://user-images.githubusercontent.com/2313998/226424290-d32d48a0-9b6b-4899-8c45-2031bbd09a1f.png" alt="Textarea height options" role="presentation"> <p>By default, a textarea will the height of 7 lines of text.</p> <p>You can change this to be any number of lines. Consider the length of the expected value to set a height.</p> <p>If the height of the content exceeds the height of textarea, users can scroll the content or resize the textarea.</p> <div class="height-example"> <div class="form-group"> <label class="form-label" for="height-small">Small (3 rows)</label> <textarea class="form-control" id="height-small" rows="3"></textarea> </div> <div class="form-group"> <label class="form-label" for="height-default">Default (7 rows)</label> <textarea class="form-control" id="height-default" rows="7"></textarea> </div> <div class="form-group"> <label class="form-label" for="height-large">Large (12 rows)</label> <textarea class="form-control" id="height-large" rows="12"></textarea> </div> </div> <h3>Resizing</h3> <p>By default, a textarea can be resized vertically and horizontally.</p> <p>You can limit a user''s resizing options to:</p> <ul> <li>no resizing</li> <li>only resize vertically</li> <li>only resize horizontally</li> </ul> <div class="resize-example"> <div class="form-group"> <label class="form-label" for="resize-both">Both directions (default)</label> <textarea class="form-control" id="resize-both" rows="4" style="resize: both;"></textarea> </div> <div class="form-group"> <label class="form-label" for="resize-vertical">Vertical only</label> <textarea class="form-control" id="resize-vertical" rows="4" style="resize: vertical;"></textarea> </div> <div class="form-group"> <label class="form-label" for="resize-horizontal">Horizontal only</label> <textarea class="form-control" id="resize-horizontal" rows="4" style="resize: horizontal;"></textarea> </div> <div class="form-group"> <label class="form-label" for="resize-none">No resizing</label> <textarea class="form-control" id="resize-none" rows="4" style="resize: none;"></textarea> </div> </div> </div> <!-- Accessibility Section --> <div class="section"> <h2>Accessibility</h2> <div class="accessibility-note"> <h4>Important Accessibility Guidelines:</h4> <ul> <li>Textareas must be labeled. The label may be visually hidden, but visible labels are preferred.</li> <li><strong>Placeholder text is never an acceptable substitute for a label</strong> because: <ul> <li>The placeholder text disappears as soon as the input has a value</li> <li>Placeholder text colors are typically too light to meet the minimum color contrast ratio required for accessibility</li> <li>Screen readers do not read placeholder text as a label</li> </ul> </li> </ul> </div> <!-- Accessibility Examples --> <div class="form-group-example"> <label class="form-label sr-only" for="visually-hidden-label">Visually Hidden Label Example</label> <textarea class="form-control" id="visually-hidden-label" rows="3" aria-label="Comments with visually hidden label"></textarea> <p class="note">This textarea has a visually hidden label but is still accessible to screen readers.</p> </div> <div class="form-group-example"> <label class="form-label" for="proper-label">Proper Label Example</label> <textarea class="form-control" id="proper-label" rows="3" placeholder="This placeholder supplements the label"></textarea> <p class="note">This textarea has both a visible label and placeholder text for enhanced usability.</p> </div> </div> <!-- Related Links Section --> <div class="section"> <h2>Related Links</h2> <ul> <li><a href="#forms">Forms</a></li> <li><a href="#text-input">Text input</a></li> </ul> </div> <!-- Footer --> <div class="section"> <h2>Feedback</h2> <p>Help us improve this component by providing feedback, asking questions on Slack, or updating this file on GitHub.</p> <p> <a href="https://github.com/primer/design" target="_blank">Source code</a> | <a href="https://primer.style/components/textarea" target="_blank">Usage guidelines</a> | <a href="https://primer.style/guides/accessibility" target="_blank">Accessibility</a> </p> </div> <script> // Add interactive focus states document.querySelectorAll("textarea").forEach(textarea => { textarea.addEventListener("focus", function() { this.style.borderColor = "var(--color-accent-emphasis)"; this.style.boxShadow = "0 0 0 3px var(--color-accent-muted)"; }); textarea.addEventListener("blur", function() { this.style.borderColor = ""; this.style.boxShadow = ""; }); }); // Simulate validation on the invalid example const invalidTextarea = document.getElementById("invalid-textarea"); if (invalidTextarea) { invalidTextarea.addEventListener("input", function() { const validationMessage = this.parentNode.querySelector(".form-validation-message"); if (this.value.length > 0) { this.style.borderColor = "var(--color-success-emphasis)"; validationMessage.style.color = "var(--color-success-fg)"; validationMessage.textContent = "Looks good!"; } else { this.style.borderColor = "var(--color-danger-emphasis)"; validationMessage.style.color = "var(--color-danger-fg)"; validationMessage.textContent = "This field is required."; } }); } </script></body></html>' width="100%" height="2400" frameborder="0" sandbox="allow-scripts allow-same-origin allow-popups">