Layr
⌘K
Ctrl K
Design Systems
AI Designer
Account
Roadmap
Sign in
Twilio Paste - label
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
<li>Avoid articles ("a", "the") and punctuation. For example, use "SIM registration code" rather than "The SIM registration code".</li> </ul> <p>To support internationalization, avoid starting a sentence with the label and using the field to finish it since sentence structures vary across languages. For example, use "Call log expiration date" or "How long should logs be stored?". Don't use "Remove logs after:".</p> <h3>Accessibility</h3> <ul> <li>Include a visible label on <strong>all</strong> form fields.</li> <li>Each label must use the <code>htmlFor</code> prop that equals the <code>id</code> of the associated input.</li> <li>The text of the label needs to remain same. It should not change based on the state of the input.</li> </ul> <div class="callout"> <p class="callout-text"> Make sure to connect the <code>Label</code> to the <code>Input</code>. This is done with the <code>htmlFor</code> prop on the label, and the <code>id</code> prop on the form field. Those two need to match. </p> </div> <h2>Examples</h2> <h3>Label with Input</h3> <div class="example-section"> <div class="form-group"> <label for="email_example" style="display: block; font-weight: 600; margin-bottom: 8px; color: #121C2D;"> Email address <span style="color: #D61F1F;">*</span> </label> <input id="email_example" name="email_example" type="email" placeholder="example@twilio.com" aria-describedby="email_example_help" required style="width: 100%; padding: 12px; border: 1px solid #8891AA; border-radius: 4px; font-size: 14px; background-color: white;" /> <div id="email_example_help" style="margin-top: 4px; font-size: 14px; color: #606B85;"> Use your work email address. </div> </div> </div> <h3>Label with Select</h3> <div class="example-section"> <div class="form-group"> <label for="author" style="display: block; font-weight: 600; margin-bottom: 8px; color: #121C2D;"> Select an author </label> <select id="author" style="width: 100%; padding: 12px; border: 1px solid #8891AA; border-radius: 4px; font-size: 14px; background-color: white;" > <option value="baldwin">James Baldwin</option> <option value="brown">adrienne maree brown</option> <option value="butler">Octavia Butler</option> <option value="coates">Ta-Nehisi Coates</option> <option value="lorde">Audre Lorde</option> <option value="nnedi">Nnedi Okorafor</option> </select> </div> </div> <h3>Label with TextArea</h3> <div class="example-section"> <div class="form-group"> <label for="message" style="display: block; font-weight: 600; margin-bottom: 8px; color: #121C2D;"> Message (at least 120 characters) <span style="color: #D61F1F;">*</span> </label> <textarea id="message" name="message" placeholder="Enter message" aria-describedby="message_help_text" required rows="4" style="width: 100%; padding: 12px; border: 1px solid #8891AA; border-radius: 4px; font-size: 14px; background-color: white; resize: vertical;" ></textarea> <div id="message_help_text" style="margin-top: 4px; font-size: 14px; color: #606B85;"> Enter at least 120 characters </div> </div> </div> <h3>Label with DatePicker</h3> <div class="example-section"> <div class="form-group"> <label for="date_picker" style="display: block; font-weight: 600; margin-bottom: 8px; color: #121C2D;"> Select a date <span style="color: #D61F1F;">*</span> </label> <input id="date_picker" name="date_picker" type="date" aria-describedby="date_picker_help" required style="width: 100%; padding: 12px; border: 1px solid #8891AA; border-radius: 4px; font-size: 14px; background-color: white;" /> <div id="date_picker_help" style="margin-top: 4px; font-size: 14px; color: #606B85;"> Select a date above. </div> </div> </div> <h3>Label with TimePicker</h3> <div class="example-section"> <div class="form-group"> <label for="appointment-time" style="display: block; font-weight: 600; margin-bottom: 8px; color: #121C2D;"> What time is your appointment? </label> <input id="appointment-time" name="appointment-time" type="time" aria-describedby="appointment-time-help-text" style="width: 100%; padding: 12px; border: 1px solid #8891AA; border-radius: 4px; font-size: 14px; background-color: white;" /> <div id="appointment-time-help-text" style="margin-top: 4px; font-size: 14px; color: #606B85;"> Select a time above. </div> </div> </div> <h2>States</h2> <h3>Default Label</h3> <div class="example-section"> <div class="form-group"> <label for="email_default" style="display: block; font-weight: 600; margin-bottom: 8px; color: #121C2D;"> Email address </label> <input id="email_default" name="email_default" type="email" placeholder="example@twilio.com" aria-describedby="email_default_help" style="width: 100%; padding: 12px; border: 1px solid #8891AA; border-radius: 4px; font-size: 14px; background-color: white;" /> <div id="email_default_help" style="margin-top: 4px; font-size: 14px; color: #606B85;"> Use your work email address. </div> </div> </div> <h3>Required Label</h3> <p>Use required indicators to show users which fields they must fill out.</p> <div class="example-section"> <div class="form-group"> <label for="email_required" style="display: block; font-weight: 600; margin-bottom: 8px; color: #121C2D;"> Email address <span style="color: #D61F1F;">*</span> </label> <input id="email_required" name="email_required" type="email" placeholder="example@twilio.com" aria-describedby="email_required_help" required style="width: 100%; padding: 12px; border: 1px solid #8891AA; border-radius: 4px; font-size: 14px; background-color: white;" /> <div id="email_required_help" style="margin-top: 4px; font-size: 14px; color: #606B85;"> Use your work email address. </div> </div> </div> <h3>Optional Label</h3> <p>Use <code>optional</code> prop to show users which fields are optional to fill out.</p> <div class="example-section"> <div class="form-group"> <label for="email_optional" style="display: block; font-weight: 600; margin-bottom: 8px; color: #121C2D;"> Email address <span style="color: #606B85; font-weight: 400;">(optional)</span> </label> <input id="email_optional" name="email_optional" type="email" placeholder="example@twilio.com" aria-describedby="email_optional_help" style="width: 100%; padding: 12px; border: 1px solid #8891AA; border-radius: 4px; font-size: 14px; background-color: white;" /> <div id="email_optional_help" style="margin-top: 4px; font-size: 14px; color: #606B85;"> Use your work email address. </div> </div> </div> <h3>Disabled Label</h3> <p>Use the disabled prop if a the label is associated with a disabled form field to show users that they can't interact with the field.</p> <div class="example-section"> <div class="form-group"> <label for="email_disabled" style="display: block; font-weight: 600; margin-bottom: 8px; color: #8891AA;"> Email address </label> <input id="email_disabled" name="email_disabled" type="email" placeholder="example@twilio.com" aria-describedby="email_disabled_help" disabled style="width: 100%; padding: 12px; border: 1px solid #D1D5DB; border-radius: 4px; font-size: 14px; background-color: #F4F4F6; color: #8891AA; cursor: not-allowed;" /> <div id="email_disabled_help" style="margin-top: 4px; font-size: 14px; color: #8891AA;"> Use your work email address. </div> </div> </div> <h2>When to use a Label</h2> <p>Use a Label to clearly describe the the form field.</p> <div class="do-dont-container"> <div class="do-card"> <div class="do-title">Do</div> <p>Use Label in composition with a form element.</p> <div style="padding: 16px; background: white; border-radius: 4px;"> <label for="short_do" style="display: block; font-weight: 600; margin-bottom: 8px; color: #121C2D;"> Name </label> <input id="short_do" name="short_do" type="text" style="width: 100%; padding: 12px; border: 1px solid #8891AA; border-radius: 4px; font-size: 14px; background-color: white;" /> </div> </div> <div class="dont-card"> <div class="dont-title">Don't</div> <p>Don't use Label as a stand-alone component.</p> <div style="padding: 16px; background: white; border-radius: 4px;"> <label style="display: block; font-weight: 600; color: #121C2D;"> Tell us your life story </label> </div> </div> </div> <div class="do-dont-container"> <div class="do-card"> <div class="do-title">Do</div> <p>Include a visible label on every form field.</p> <div style="padding: 16px; background: white; border-radius: 4px;"> <label for="label_do" style="display: block; font-weight: 600; margin-bottom: 8px; color: #121C2D;"> Name </label> <input id="label_do" name="label_do" type="text" style="width: 100%; padding: 12px; border: 1px solid #8891AA; border-radius: 4px; font-size: 14px; background-color: white;" /> </div> </div> <div class="dont-card"> <div class="dont-title">Don't</div> <p>Don't use prefix/suffix text as a replacement for a label.</p> <div style="padding: 16px; background: white; border-radius: 4px;"> <div style="position: relative;"> <input id="label_dont" name="label_dont" type="text" style="width: 100%; padding: 12px 12px 12px 60px; border: 1px solid #8891AA; border-radius: 4px; font-size: 14px; background-color: white;" /> <span style="position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: #606B85; font-weight: 600;"> Name </span> </div> </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></body></html>' width="100%" height="2400" frameborder="0" sandbox="allow-scripts allow-same-origin allow-popups">