Layr
⌘K
Ctrl K
Design Systems
AI Designer
Account
Roadmap
Sign in
Twilio Paste - select
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
<p>At its most basic, a Select has an options list that's styled according to the browser default. A Combobox has a Twilio-styled options list and can allow for additional functionality like typeahead.</p> <p><strong>Use a Select when:</strong></p> <ul> <li>You need a native picker experience, especially on mobile devices.</li> <li>Users will be selecting from a list of 4-10 options, or a sorted list of highly familiar options, like an alphabetical list of states or countries.</li> <li>You need the component to work out-of-the-box across all operating systems and browsers.</li> </ul> <p><strong>Use a Combobox when:</strong></p> <ul> <li>You need a Twilio-styled options list.</li> <li>You need to show more than text in an option, like text paired with an icon.</li> <li>Users would benefit from typeahead functionality.</li> <li>You need to lazy load a much longer list of options to improve page load performance.</li> </ul> <h3>Accessibility</h3> <ul> <li>Include a visible label on <strong>all</strong> form fields.</li> <li>Each label must use the <span class="inline-code">htmlFor</span> prop that equals the <span class="inline-code">id</span> of the associated input.</li> <li>Provide clear identification of required fields in the label or at the start of a form.</li> <li>Use the <span class="inline-code">required</span> prop to programmatically indicate they are required to browsers.</li> <li>Include inline error text with the error icon on any field that errors.</li> <li>If the input has associated help text or error text, include the <span class="inline-code">aria-describedby</span> prop on the input.</li> </ul> <h2>Examples</h2> <h3>Base Select</h3> <div class="example-section"> <div class="form-field"> <label for="base-author">Select an author</label> <select id="base-author" style="width: 100%; padding: 0.75rem; border: 1px solid #8891AA; border-radius: 4px; font-size: 1rem;"> <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>Select with Label and Help Text</h3> <div class="accessibility-note"> <h4>Accessibility insight</h4> <p>Make sure to connect the <span class="inline-code">Label</span> to the <span class="inline-code">Select</span>. This is done with the <span class="inline-code">htmlFor</span> prop on the label, and the <span class="inline-code">id</span> prop on the select. Those two need to match.</p> </div> <div class="example-section"> <div class="form-field"> <label for="select_product_demo">Select a product <span style="color: #D61F69;">*</span></label> <select id="select_product_demo" required style="width: 100%; padding: 0.75rem; border: 1px solid #8891AA; border-radius: 4px; font-size: 1rem;"> <option value="messaging">SMS</option> <option value="numbers">Phone Numbers</option> <option value="video">Video</option> </select> <div style="color: #606B85; font-size: 0.875rem; margin-top: 0.25rem;">Choose a Twilio product.</div> </div> </div> <h3>Select with Prefix</h3> <div class="example-section"> <div class="form-field"> <label for="select_add_ons_prefix_demo">Phone number</label> <div style="position: relative; display: flex; align-items: center;"> <span style="position: absolute; left: 0.75rem; color: #606B85; font-weight: 600; z-index: 1;">+1</span> <select id="select_add_ons_prefix_demo" style="width: 100%; padding: 0.75rem 0.75rem 0.75rem 2.5rem; border: 1px solid #8891AA; border-radius: 4px; font-size: 1rem;"> <option value="cats">(415) 555-CATS</option> <option value="dogs">(415) 555-DOGS</option> <option value="mice">(415) 555-MICE</option> </select> </div> <div style="color: #606B85; font-size: 0.875rem; margin-top: 0.25rem;">Select with prefix.</div> </div> </div> <h3>Select with Default Value</h3> <div class="example-section"> <div class="form-field"> <label for="default_value_demo">Phone number <span style="color: #D61F69;">*</span></label> <select id="default_value_demo" required style="width: 100%; padding: 0.75rem; border: 1px solid #8891AA; border-radius: 4px; font-size: 1rem;"> <option value="cats">(415) 555-CATS</option> <option value="dogs" selected>(415) 555-DOGS</option> <option value="mice">(415) 555-MICE</option> </select> </div> </div> <h3>Select with Option Groups</h3> <div class="example-section"> <div class="form-field"> <label for="option_group_demo">Product offering <span style="color: #D61F69;">*</span></label> <select id="option_group_demo" required style="width: 100%; padding: 0.75rem; border: 1px solid #8891AA; border-radius: 4px; font-size: 1rem;"> <optgroup label="SMS"> <option value="geomatch">Area-code geomatch</option> <option value="channels">Channels</option> <option value="short-codes">Short codes</option> </optgroup> <optgroup label="Voice"> <option value="conference">Conference</option> <option value="recording">Recordings</option> <option value="tts">Text to Speech</option> </optgroup> <optgroup label="Video"> <option value="hipaa">HIPAA eligibility</option> <option value="p2p">Peer to peer</option> <option value="recordings">Recordings</option> </optgroup> </select> <div style="color: #606B85; font-size: 0.875rem; margin-top: 0.25rem;">Select a product to learn more.</div> </div> </div> <h2>States</h2> <h3>Select with Inline Error</h3> <div class="example-section"> <div class="form-field"> <label for="inline_error_demo">Emergency caller ID</label> <select id="inline_error_demo" style="width: 100%; padding: 0.75rem; border: 2px solid #D61F69; border-radius: 4px; font-size: 1rem; background-color: #FEF7F0;"> <option value="cats">(415) 555-CATS</option> <option value="dogs">(415) 555-DOGS</option> <option value="mice">(415) 555-MICE</option> </select> <div style="color: #D61F69; font-size: 0.875rem; margin-top: 0.25rem;">⚠ The number you have selected is not configured for emergency calling.</div> </div> </div> <h3>Select with Disabled Options</h3> <div class="example-section"> <div class="form-field"> <label for="disabled_options_demo">Phone number capability</label> <select id="disabled_options_demo" style="width: 100%; padding: 0.75rem; border: 1px solid #8891AA; border-radius: 4px; font-size: 1rem;"> <option disabled value="fax">Fax</option> <option disabled value="voice">Voice</option> <option value="sms">SMS</option> </select> <div style="color: #606B85; font-size: 0.875rem; margin-top: 0.25rem;">Some options in this select are disabled.</div> </div> </div> <h3>Disabled Select</h3> <div class="example-section"> <div class="form-field"> <label for="disabled_select_demo" style="color: #8891AA;">Phone number capabilities</label> <select id="disabled_select_demo" disabled style="width: 100%; padding: 0.75rem; border: 1px solid #E1E3EA; border-radius: 4px; font-size: 1rem; background-color: #F4F4F6; color: #8891AA;"> <option value="fax">Fax</option> <option value="voice">Voice</option> <option value="sms">SMS</option> </select> <div style="color: #606B85; font-size: 0.875rem; margin-top: 0.25rem;">This select is currently disabled.</div> </div> </div> <h2>Composition Notes</h2> <h3>Positioning Form Fields</h3> <div class="example-section"> <div style="margin-bottom: 2rem;"> <label for="voice_callback_method">HTTP method</label> <select id="voice_callback_method" required style="width: 100%; padding: 0.75rem; border: 1px solid #8891AA; border-radius: 4px; font-size: 1rem;"> <option value="get">GET</option> <option value="post">POST</option> <option value="put">PUT</option> </select> </div> <div> <label for="voice_callback">Primary Voice callback</label> <input id="voice_callback" name="voice_callback" type="text" placeholder="https://demo.twilio.com/welcome/voice/" required style="width: 100%; padding: 0.75rem; border: 1px solid #8891AA; border-radius: 4px; font-size: 1rem;" /> </div> </div> <h2>When to Use a Select</h2> <p>Use a select when:</p> <ul> <li>You need a native picker experience, especially on mobile devices.</li> <li>You need the component to work out-of-the-box across all operating systems and browsers.</li> </ul> <h2>Do and Don't Examples</h2> <div class="do-dont-container"> <div class="do-section"> <div class="do-title">✓ Do</div> <p>Sort options in a list logically (e.g., alphabetically, ascending, descending).</p> <div class="form-field"> <label for="sort_do">Ascending numbers</label> <select id="sort_do" style="width: 100%; padding: 0.75rem; border: 1px solid #8891AA; border-radius: 4px; font-size: 1rem;"> <option value="1">1</option> <option value="100">100</option> <option value="100000">100,000</option> </select> </div> </div> <div class="dont-section"> <div class="dont-title">✗ Don't</div> <p>Don't order options in a list randomly or in a "recommended" order that hasn't been validated with users.</p> <div class="form-field"> <label for="sort_dont">Random numbers</label> <select id="sort_dont" style="width: 100%; padding: 0.75rem; border: 1px solid #8891AA; border-radius: 4px; font-size: 1rem;"> <option value="100000">100,000</option> <option value="1">1</option> <option value="100">100</option> </select> </div> </div> </div> <div class="do-dont-container"> <div class="do-section"> <div class="do-title">✓ Do</div> <p>Use a safe and reversible option as the default selected value, or an option that tells users to choose from the list.</p> <div class="form-field"> <label for="reversible_do">Caller ID</label> <select id="reversible_do" style="width: 100%; padding: 0.75rem; border: 1px solid #8891AA; border-radius: 4px; font-size: 1rem;"> <option value="">Choose a Caller ID</option> <option value="+14155552287">+1(415) 555-CATS</option> <option value="+14155553647">+1(415) 555-DOGS</option> </select> </div> </div> <div class="dont-section"> <div class="dont-title">✗ Don't</div> <p>Don't restrict users to options that unnecessarily reinforce biases and discrimination, such as gender binaries.</p> <div class="form-field"> <label for="reversible_dont">Gender</label> <select id="reversible_dont" style="width: 100%; padding: 0.75rem; border: 1px solid #8891AA; border-radius: 4px; font-size: 1rem;"> <option value="male">Male</option> <option value="female">Female</option> </select> </div> </div> </div> <div class="do-dont-container"> <div class="do-section"> <div class="do-title">✓ Do</div> <p>Keep option text concise and simple.</p> <div class="form-field"> <label for="option_text_do">HTTP method</label> <select id="option_text_do" style="width: 100%; padding: 0.75rem; border: 1px solid #8891AA; border-radius: 4px; font-size: 1rem;"> <option value="get">GET</option> <option value="post">POST</option> <option value="put">PUT</option> </select> </div> </div> <div class="dont-section"> <div class="dont-title">✗ Don't</div> <p>Avoid long option text that may truncate if it's longer than the width of the container.</p> <div class="form-field"> <label for="option_text_dont">Voice URL</label> <select id="option_text_dont" style="width: 100%; padding: 0.75rem; border: 1px solid #8891AA; border-radius: 4px; font-size: 1rem;"> <option value="demo">https://demo.twilio.com/welcome/voice/</option> <option value="test-one">https://test.twilio.com/welcome/voice/long-test/too-long/text-continuing</option> <option value="test-two">https://test.twilio.com/welcome/voice/long-test/too-long/text-continuing/still-continuing</option> </select> </div> </div> </div> <div class="do-dont-container"> <div class="do-section"> <div class="do-title">✓ Do</div> <p>Include a visible label on every form field.</p> <div class="form-field"> <label for="use_label_do">HTTP method</label> <select id="use_label_do" style="width: 100%; padding: 0.75rem; border: 1px solid #8891AA; border-radius: 4px; font-size: 1rem;"> <option value="get">GET</option> <option value="post">POST</option> <option value="put">PUT</option> </select> </div> </div> <div class="dont-section"> <div class="dont-title">✗ Don't</div> <p>Don't use prefix/suffix text as a replacement for a label.</p> <div class="form-field"> <div style="position: relative; display: flex; align-items: center;"> <span style="position: absolute; left: 0.75rem; color: #606B85; z-index: 1;">HTTP</span> <select id="use_label_dont" style="width: 100%; padding: 0.75rem 0.75rem 0.75rem 3.5rem; border: 1px solid #8891AA; border-radius: 4px; font-size: 1rem;"> <option value="get">GET</option> <option value="post">POST</option> <option value="put">PUT</option> </select> </div> </div> </div> </div> <div class="do-dont-container"> <div class="do-section"> <div class="do-title">✓ Do</div> <p>Use a checkbox group to allow users to make multiple selections.</p> <fieldset style="border: none; padding: 0; margin: 0;"> <legend style="font-weight: 600; margin-bottom: 0.5rem;">Select the clients you would like to test.</legend> <div style="display: flex; flex-direction: column; gap: 0.5rem;"> <label style="display: flex; align-items: center; gap: 0.5rem;"> <input type="checkbox" id="apple_mail" value="apple_mail" /> Apple Mail </label> <label style="display: flex; align-items: center; gap: 0.5rem;"> <input type="checkbox" id="g_mail" value="g_mail" /> GMail </label> <label style="display: flex; align-items: center; gap: 0.5rem;"> <input type="checkbox" id="outlook" value="outlook" /> Outlook </label> </div> </fieldset> </div> <div class="dont-section"> <div class="dont-title">✗ Don't</div> <p>When possible, avoid allowing multiple selection on a select component.</p> <div class="form-field"> <label for="multiple_dont">Select the clients you would like to test</label> <select multiple size="3" id="multiple_dont" style="width: 100%; padding: 0.75rem; border: 1px solid #8891AA; border-radius: 4px; font-size: 1rem;"> <option value="apple_mail">Apple Mail</option> <option value="g_mail">GMail</option> <option value="outlook">Outlook</option> </select> </div> </div> </div> <h2>Feedback</h2> <p> <a href="https://github.com/twilio-labs/paste/tree/main/packages/paste-core/components/select" target="_blank">Source code</a> | <a href="https://paste.twilio.design/components/select/" target="_blank">Usage guidelines</a> | <a href="https://paste.twilio.design/components/select/#accessibility" target="_blank">Accessibility</a> </p> <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="1200" frameborder="0" sandbox="allow-scripts allow-same-origin allow-popups">