Layr
⌘K
Ctrl K
Design Systems
AI Designer
Account
Roadmap
Sign in
Twilio Paste - account-switcher
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
</ul> <h2>Composition Notes</h2> <p>The Account Switcher is made up of the following sub-components:</p> <ul> <li><strong>AccountSwitcherBadge</strong> - Used to display the name of the current account selected</li> <li><strong>AccountSwitcher</strong> - Container for Account Switcher menu items</li> <li><strong>AccountSwitcherGroup</strong> - Used to group similar items together</li> <li><strong>AccountSwitcherItem</strong> - A menu item that can perform an action or navigate</li> <li><strong>AccountSwitcherItemRadio</strong> - A menu item for single selection within a group</li> <li><strong>AccountSwitcherSeparator</strong> - Horizontal rule to separate groups or items</li> <li><strong>useAccountSwitcherState</strong> - React hook to initialize the Account Switcher</li> </ul> <h2>Accessibility</h2> <p>The Account Switcher implements a grouped Menu and supports all the same keyboard navigation that the Menu component does.</p> <script> // Wait for modules to load setTimeout(() => { if (window.PasteComponents) { const container = document.getElementById("account-switcher-example"); // Create a simple account switcher example container.innerHTML = ` <div data-paste-element="ACCOUNT_SWITCHER_BADGE" id="account-badge" onclick="toggleAccountSwitcher()"> My Production Account <span>▼</span> </div> <div data-paste-element="ACCOUNT_SWITCHER" id="account-menu" style="display: none; position: absolute; margin-top: 8px;"> <div data-paste-element="ACCOUNT_SWITCHER_GROUP"> <div data-paste-element="ACCOUNT_SWITCHER_ITEM_RADIO" aria-checked="true" onclick="selectAccount(this, 'My Production Account')"> <span>●</span> My Production Account </div> <div data-paste-element="ACCOUNT_SWITCHER_ITEM_RADIO" aria-checked="false" onclick="selectAccount(this, 'My Development Account')"> <span>○</span> My Development Account </div> <div data-paste-element="ACCOUNT_SWITCHER_ITEM_RADIO" aria-checked="false" onclick="selectAccount(this, 'My Staging Account')"> <span>○</span> My Staging Account </div> </div> <div data-paste-element="ACCOUNT_SWITCHER_SEPARATOR"></div> <div data-paste-element="ACCOUNT_SWITCHER_GROUP"> <div data-paste-element="ACCOUNT_SWITCHER_ITEM" onclick="createAccount()"> + Create new account </div> <div data-paste-element="ACCOUNT_SWITCHER_ITEM" onclick="viewAllAccounts()"> View all accounts </div> </div> </div> `; } }, 100); function toggleAccountSwitcher() { const menu = document.getElementById("account-menu"); menu.style.display = menu.style.display === "none" ? "block" : "none"; } function selectAccount(element, accountName) { // Update badge text const badge = document.getElementById("account-badge"); badge.innerHTML = accountName + ' <span>▼</span>'; // Update radio states const radioItems = document.querySelectorAll('[data-paste-element="ACCOUNT_SWITCHER_ITEM_RADIO"]'); radioItems.forEach(item => { item.setAttribute("aria-checked", "false"); item.innerHTML = item.innerHTML.replace("●", "○"); }); element.setAttribute("aria-checked", "true"); element.innerHTML = element.innerHTML.replace("○", "●"); // Hide menu document.getElementById("account-menu").style.display = "none"; } function createAccount() { alert("Create new account clicked"); document.getElementById("account-menu").style.display = "none"; } function viewAllAccounts() { alert("View all accounts clicked"); document.getElementById("account-menu").style.display = "none"; } // Close menu when clicking outside document.addEventListener("click", function(event) { const badge = document.getElementById("account-badge"); const menu = document.getElementById("account-menu"); if (badge && menu && !badge.contains(event.target) && !menu.contains(event.target)) { menu.style.display = "none"; } }); </script> <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></body></html>' width="100%" height="1200" frameborder="0" sandbox="allow-scripts allow-same-origin allow-popups">