Layr
⌘K
Ctrl K
Design Systems
AI Designer
Account
Roadmap
Sign in
Twilio Paste - multiselect-combobox
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 autocomplete and multiselect.</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.</li> <li>You need the component to work out-of-the-box across all operating systems and browsers.</li> </ul> <p><strong>Use a Multiselect 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 (e.g., text paired with an icon).</li> <li>You need to group options under labels.</li> <li>You need to disable options in the list.</li> <li>Users would benefit from autocomplete functionality.</li> <li>You need to lazy load a much longer list of options to improve page load performance.</li> </ul> <!-- Add-ons Example --> <h2>Multiselect Combobox with add-ons</h2> <p>Use add-ons to provide users with guidance on formatting their input and to offer more context about the value a user is entering.</p> <div class="example-container" id="addons-example"> <!-- Add-ons example will be rendered here --> </div> <!-- Option Groups Example --> <h2>Multiselect Combobox with option groups</h2> <p>Use option groups to create labeled sections of options.</p> <div class="example-container" id="groups-example"> <!-- Groups example will be rendered here --> </div> <!-- States --> <h2>States</h2> <h3>Disabled Multiselect Combobox</h3> <div class="example-container" id="disabled-example"> <!-- Disabled example will be rendered here --> </div> <h3>Multiselect Combobox with error</h3> <div class="example-container" id="error-example"> <!-- Error example will be rendered here --> </div> <!-- When to use --> <h2>When to use Multiselect Combobox</h2> <div class="do-dont-container"> <div class="do-card"> <div class="do-title">Do</div> <p>Use a Multiselect Combobox when there are multiple options for a user to type or select.</p> </div> <div class="dont-card"> <div class="dont-title">Don't</div> <p>Don't use a Multiselect Combobox when a user should only select a single option. Use a Singleselect Combobox instead.</p> </div> </div> <div class="do-dont-container"> <div class="do-card"> <div class="do-title">Do</div> <p>Use a Multiselect Combobox when there are at least 7 options for a user to type or select from.</p> </div> <div class="dont-card"> <div class="dont-title">Don't</div> <p>Don't use a Multiselect Combobox if there are less than 7 options in a list for users to select multiple values from. Use a Checkbox Group instead.</p> </div> </div> <!-- Accessibility --> <h2>Accessibility</h2> <p>Multiselect Combobox is built with consideration for the ARIA combobox pattern.</p> <h3>Keyboard interaction</h3> <p>When the user is focused on a Combobox, the following keyboard interactions apply:</p> <ul> <li>Up and down arrows move the user between the options</li> <li>Enter selects the currently active option</li> </ul> <p>When the user is focused within the Form Pill Group, they can use these keyboard interactions:</p> <ul> <li>Left and right arrow keys move focus within the group.</li> <li>If a pill is selectable, spacebar and enter will toggle pill selection.</li> <li>If a pill is dismissible, the pill can be removed by pressing the delete or backspace key.</li> </ul> </div> <script> // Wait for components to load setTimeout(() => { if (window.PasteComponents) { const { MultiselectCombobox, Box, Text, Anchor, InformationIcon } = window.PasteComponents; // Basic Example const basicOptions = [ { label: "Alert", value: "alert" }, { label: "Anchor", value: "anchor" }, { label: "Button", value: "button" }, { label: "Card", value: "card" }, { label: "Heading", value: "heading" }, { label: "List", value: "list" }, { label: "Modal", value: "modal" }, { label: "Paragraph", value: "paragraph" } ]; // Render basic example const basicContainer = document.getElementById("basic-example"); if (basicContainer) { const basicCombobox = React.createElement(MultiselectCombobox, { labelText: "Choose a component:", helpText: "Select multiple components from the list", items: basicOptions, initialSelectedItems: [basicOptions[0], basicOptions[1]], onSelectedItemsChange: (changes) => { console.log("Selected items changed:", changes.selectedItems); } }); ReactDOM.render(basicCombobox, basicContainer); } // Add-ons Example const addonsContainer = document.getElementById("addons-example"); if (addonsContainer) { const addonsCombobox = React.createElement(MultiselectCombobox, { labelText: "Search components:", helpText: "Type to search or select from the list", items: basicOptions, insertBefore: React.createElement(InformationIcon, { decorative: true, size: "sizeIcon20" }), insertAfter: React.createElement(Anchor, { href: "#" }, "Help") }); ReactDOM.render(addonsCombobox, addonsContainer); } // Groups Example const groupedOptions = [ { label: "Alert", value: "alert", group: "Feedback" }, { label: "Toast", value: "toast", group: "Feedback" }, { label: "Button", value: "button", group: "Actions" }, { label: "Menu", value: "menu", group: "Actions" }, { label: "Card", value: "card", group: "Layout" }, { label: "Grid", value: "grid", group: "Layout" } ]; const groupsContainer = document.getElementById("groups-example"); if (groupsContainer) { const groupsCombobox = React.createElement(MultiselectCombobox, { labelText: "Choose components by category:", helpText: "Components are grouped by their purpose", items: groupedOptions, groupItemsBy: "group" }); ReactDOM.render(groupsCombobox, groupsContainer); } // Disabled Example const disabledContainer = document.getElementById("disabled-example"); if (disabledContainer) { const disabledCombobox = React.createElement(MultiselectCombobox, { labelText: "Disabled combobox:", helpText: "This combobox is disabled", items: basicOptions, disabled: true }); ReactDOM.render(disabledCombobox, disabledContainer); } // Error Example const errorContainer = document.getElementById("error-example"); if (errorContainer) { const errorCombobox = React.createElement(MultiselectCombobox, { labelText: "Components with error:", helpText: "Please select at least one component", items: basicOptions, hasError: true, errorText: "Selection is required" }); ReactDOM.render(errorCombobox, errorContainer); } } }, 1000); </script> <!-- React and ReactDOM for rendering --> <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script></body></html>' width="100%" height="1200" frameborder="0" sandbox="allow-scripts allow-same-origin allow-popups">