Layr
⌘K
Ctrl K
Design Systems
AI Designer
Account
Roadmap
Sign in
Twilio Paste - textarea
Getting started
Twilio Paste
Paste UI
Pro
Components
Account Switcher
Ai Chat Log
Alert
Alert Dialog
Anchor
Aspect Ratio
Avatar
Badge
Blockquote
Breadcrumb
Button
Button Group
Callout
Card
Chart Provider
Chat Composer
Chat Log
Checkbox
Code Block
Combobox
Corner Ornament
Data Grid
Date Picker
Description List
Detail Text
Disclosure
Display Heading
Display Pill Group
Editable Code Block
Example Text
File Picker
File Uploader
Flex
Form Layout
Form Pill Group
Grid
Heading
Help Text
Icon
In Page Navigation
Inline Code
Input
Keyboard Key
Label
List
Media Object
Menu
Meter
Minimizable Dialog
Modal
Multiselect Combobox
Page Header
Pagination
Paragraph
Popover
Product Switcher
Progress Bar
Progress Steps
Radio Button Group
Radio Group
Screen Reader Only
Select
Separator
Side Modal
Side Panel
Sidebar
Sidebar Navigation
Skeleton Loader
Slider
Spinner
Stack
Status Badge
Status Menu
Summary Detail
Switch
Table
Tabs
Textarea
Time Picker
Timeline
Toast
Tooltip
Topbar
Truncate
User Dialog
Visual Picker
<h3>Accessibility</h3> <ul> <li>Include a visible label on <strong>all</strong> form fields.</li> <li>Each label must use the <code>for</code> attribute that equals the <code>id</code> of the associated Textarea.</li> <li>Avoid placeholder text. It's not broadly supported by assistive technologies, doesn't display in older browsers, and disappears from the field when a user enters text.</li> <li>Use 1 of 3 ways to label a form field: <ul> <li>Visible label with Label (preferred)</li> <li>Visible label that's associated to the Textarea with <code>aria-labelledby</code></li> <li>Label directly using <code>aria-label</code></li> </ul> </li> <li>Provide clear identification of required fields in the label or at the start of a form.</li> <li>Use Help Text and an error icon to show inline error text on any field that errors.</li> <li>If the Textarea has associated help text or error text, include the <code>aria-describedby</code> attribute on the Textarea.</li> </ul> <div class="callout"> <div class="callout-heading">Accessibility insight</div> <div class="callout-text"> Make sure to connect the <code>Label</code> to the <code>TextArea</code>. This is done with the <code>for</code> attribute on the label, and the <code>id</code> attribute on the Textarea. Those two need to match. </div> <div class="callout-text"> If the Textarea has any associated help text, the Textarea should also use the <code>aria-describedby</code> attribute that equals the <code>id</code> of the help text. This ensures screen readers know the help text ties directly to the Textarea. </div> </div> <h2>Examples</h2> <!-- Textarea with add-ons --> <div class="example-section"> <h3>Textarea with prefix text</h3> <div class="form-field"> <label for="short_bio" style="display: block; margin-bottom: 8px; font-weight: 600; color: #121C2D;"> Short biography <span style="color: #D61F1F;">*</span> </label> <div style="position: relative;"> <span style="position: absolute; left: 12px; top: 12px; color: #606B85; font-weight: 600; z-index: 1;">Bio</span> <textarea id="short_bio" name="short_bio" required style="width: 100%; min-height: 80px; padding: 12px 12px 12px 45px; border: 1px solid #8891AA; border-radius: 4px; font-family: inherit; font-size: 14px; resize: vertical;" ></textarea> </div> </div> </div> <!-- Textarea with suffix icon --> <div class="example-section"> <h3>Textarea with suffix icon</h3> <div class="form-field"> <label for="body" style="display: block; margin-bottom: 8px; font-weight: 600; color: #121C2D;"> Body copy <span style="color: #D61F1F;">*</span> </label> <div style="position: relative;"> <textarea id="body" name="body" required aria-describedby="body_help_text" placeholder="Ahoy, World" style="width: 100%; min-height: 80px; padding: 12px 40px 12px 12px; border: 1px solid #8891AA; border-radius: 4px; font-family: inherit; font-size: 14px; resize: vertical;" ></textarea> <button type="button" style="position: absolute; right: 8px; top: 8px; background: none; border: none; cursor: pointer; padding: 4px; color: #0263E0;" title="Get more info" > ℹ️ </button> </div> <div id="body_help_text" style="margin-top: 4px; font-size: 14px; color: #606B85;"> Enter text for the copy area </div> </div> </div> <!-- Resizable Textarea --> <div class="example-section"> <h3>Resizable Textarea</h3> <div class="form-field"> <label for="resizable_message" style="display: block; margin-bottom: 8px; font-weight: 600; color: #121C2D;"> Message (at least 120 characters) <span style="color: #D61F1F;">*</span> </label> <textarea id="resizable_message" name="resizable_message" required aria-describedby="resizable_message_help_text" style="width: 100%; min-height: 80px; max-height: 200px; padding: 12px; border: 1px solid #8891AA; border-radius: 4px; font-family: inherit; font-size: 14px; resize: vertical;" ></textarea> <div id="resizable_message_help_text" style="margin-top: 4px; font-size: 14px; color: #606B85;"> Enter at least 120 characters </div> </div> </div> <h2>States</h2> <!-- Error State --> <div class="example-section"> <h3>Textarea with inline error</h3> <div class="form-field"> <label for="text_error" style="display: block; margin-bottom: 8px; font-weight: 600; color: #121C2D;"> Description </label> <textarea id="text_error" name="text_error" aria-describedby="text_error_help_text" style="width: 100%; min-height: 80px; padding: 12px; border: 2px solid #D61F1F; border-radius: 4px; font-family: inherit; font-size: 14px; resize: vertical;" ></textarea> <div id="text_error_help_text" style="margin-top: 4px; font-size: 14px; color: #D61F1F;"> Enter a description. </div> </div> </div> <!-- Disabled State --> <div class="example-section"> <h3>Disabled Textarea</h3> <div class="form-field"> <label for="text_disabled" style="display: block; margin-bottom: 8px; font-weight: 600; color: #8891AA;"> Description (disabled) </label> <textarea id="text_disabled" name="text_disabled" disabled placeholder="Paste is a design system used to build accessible, consistent, and high quality customer experiences at Twilio. Paste is open source and contributions are welcome." style="width: 100%; min-height: 80px; padding: 12px; border: 1px solid #E1E3EA; border-radius: 4px; font-family: inherit; font-size: 14px; resize: vertical; background-color: #F4F4F6; color: #8891AA; cursor: not-allowed;" ></textarea> </div> </div> <!-- Read-only State --> <div class="example-section"> <h3>Read-only Textarea</h3> <div class="form-field"> <label for="text_readonly" style="display: block; margin-bottom: 8px; font-weight: 600; color: #121C2D;"> Description (read-only) </label> <textarea id="text_readonly" name="text_readonly" readonly style="width: 100%; min-height: 80px; padding: 12px; border: 1px solid #8891AA; border-radius: 4px; font-family: inherit; font-size: 14px; resize: vertical; background-color: #FAFBFC;" >Paste is a design system used to build accessible, consistent, and high quality customer experiences at Twilio. Paste is open source and contributions are welcome.</textarea> </div> </div> <h2>Composition notes</h2> <p>A Textarea field must have at least a label and a Textarea.</p> <div class="example-section"> <h3>Minimal Textarea</h3> <div class="form-field"> <label for="details" style="display: block; margin-bottom: 8px; font-weight: 600; color: #121C2D;"> Details </label> <textarea id="details" name="details" style="width: 100%; min-height: 80px; padding: 12px; border: 1px solid #8891AA; border-radius: 4px; font-family: inherit; font-size: 14px; resize: vertical;" ></textarea> </div> </div> <h3>Positioning form fields</h3> <p>Stack form fields vertically with spacing between each field.</p> <div class="example-section"> <div style="margin-bottom: 32px;"> <label for="header" style="display: block; margin-bottom: 8px; font-weight: 600; color: #121C2D;"> Header </label> <textarea id="header" name="header" placeholder="Ahoy, World!" style="width: 100%; min-height: 80px; padding: 12px; border: 1px solid #8891AA; border-radius: 4px; font-family: inherit; font-size: 14px; resize: vertical;" ></textarea> </div> <div> <label for="footer" style="display: block; margin-bottom: 8px; font-weight: 600; color: #121C2D;"> Footer </label> <textarea id="footer" name="footer" placeholder="Bon voyage" style="width: 100%; min-height: 80px; padding: 12px; border: 1px solid #8891AA; border-radius: 4px; font-family: inherit; font-size: 14px; resize: vertical;" ></textarea> </div> </div> <h2>When to use a Textarea</h2> <p>Use a Textarea when users are expected to enter text that exceeds a single line, usually longer than a sentence.</p> <div class="do-dont-container"> <div class="do-dont-item do-item"> <div class="do-title">Do</div> <p>Use a Textarea to encourage longer text entry.</p> <div class="form-field"> <label for="long_do" style="display: block; margin-bottom: 8px; font-weight: 600; color: #121C2D;"> Tell us your life story </label> <textarea id="long_do" name="long_do" style="width: 100%; min-height: 80px; padding: 12px; border: 1px solid #8891AA; border-radius: 4px; font-family: inherit; font-size: 14px; resize: vertical;" ></textarea> </div> </div> <div class="do-dont-item dont-item"> <div class="dont-title">Don't</div> <p>Don't use a Textarea when text entry is expected to be short since it could confuse users. Use an input instead.</p> <div class="form-field"> <label for="long_dont" style="display: block; margin-bottom: 8px; font-weight: 600; color: #121C2D;"> First name </label> <textarea id="long_dont" name="long_dont" style="width: 100%; min-height: 80px; padding: 12px; border: 1px solid #8891AA; border-radius: 4px; font-family: inherit; font-size: 14px; resize: vertical;" ></textarea> </div> </div> </div> <div class="do-dont-container"> <div class="do-dont-item do-item"> <div class="do-title">Do</div> <p>If you limit the length of text entry, show a character counter and explain to users in help text why their entry is restricted.</p> <div class="form-field"> <label for="limited_do" style="display: block; margin-bottom: 8px; font-weight: 600; color: #121C2D;"> Job description (120 characters) </label> <textarea id="limited_do" name="limited_do" aria-describedby="limited_do_help_text" style="width: 100%; min-height: 80px; padding: 12px; border: 1px solid #8891AA; border-radius: 4px; font-family: inherit; font-size: 14px; resize: vertical;" ></textarea> <div id="limited_do_help_text" style="margin-top: 4px; font-size: 14px; color: #606B85;"> Limit to 120 characters </div> </div> </div> <div class="do-dont-item dont-item"> <div class="dont-title">Don't</div> <p>Don't have a character limit if you can't explain to the user why their text entry is restricted.</p> <div class="form-field"> <label for="limited_dont" style="display: block; margin-bottom: 8px; font-weight: 600; color: #121C2D;"> State motto </label> <textarea id="limited_dont" name="limited_dont" style="width: 100%; min-height: 80px; padding: 12px; border: 1px solid #8891AA; border-radius: 4px; font-family: inherit; font-size: 14px; resize: vertical;" ></textarea> </div> </div> </div> <h2 id="feedback">Feedback</h2> <p>Help us improve this component by providing feedback, asking questions on Slack, or updating this file on GitHub.</p> </div> <script> // Add basic interactivity document.addEventListener('DOMContentLoaded', function() { // Add focus/blur effects to textareas const textareas = document.querySelectorAll('textarea'); textareas.forEach(textarea => { textarea.addEventListener('focus', function() { this.style.borderColor = '#0263E0'; this.style.boxShadow = '0 0 0 1px #0263E0'; }); textarea.addEventListener('blur', function() { if (!this.hasAttribute('data-error')) { this.style.borderColor = '#8891AA'; this.style.boxShadow = 'none'; } }); }); // Add character counter functionality const limitedTextarea = document.getElementById('limited_do'); if (limitedTextarea) { const helpText = document.getElementById('limited_do_help_text'); const maxLength = 120; limitedTextarea.addEventListener('input', function() { const currentLength = this.value.length; const remaining = maxLength - currentLength; if (remaining >= 0) { helpText.textContent = `${remaining} characters remaining`; helpText.style.color = '#606B85'; } else { helpText.textContent = `${Math.abs(remaining)} characters over limit`; helpText.style.color = '#D61F1F'; } }); } }); </script></body></html>' width="100%" height="2000" frameborder="0" sandbox="allow-scripts allow-same-origin allow-popups">