const AccountSwitcherMenu = () => {const accountSwitcher = useAccountSwitcherState();const [selectedAccount, setSelectedAccount] = React.useState('Owl Telehealth');return (<><AccountSwitcherBadge {...accountSwitcher} i18nButtonLabel="Switch accounts">Owl Telehealth</AccountSwitcherBadge><AccountSwitcher {...accountSwitcher} aria-label="Avaiable accounts"><AccountSwitcherGroup label="Recent accounts"><AccountSwitcherItemRadioname="recent_accounts"value="Owl Telehealth"checked={selectedAccount === 'Owl Telehealth'}onChange={() => setSelectedAccount('Owl Telehealth')}{...accountSwitcher}>Owl Telehealth</AccountSwitcherItemRadio><AccountSwitcherItemRadioname="recent_accounts"value="Owl Health Demo"checked={selectedAccount === 'Owl Health Demo'}onChange={() => setSelectedAccount('Owl Health Demo')}{...accountSwitcher}>Owl Health Demo</AccountSwitcherItemRadio><AccountSwitcherItemRadioname="recent_accounts"value="Owl Subway"checked={selectedAccount === 'Owl Subway'}onChange={() => setSelectedAccount('Owl Subway')}{...accountSwitcher}>Owl Subway</AccountSwitcherItemRadio></AccountSwitcherGroup><AccountSwitcherSeparator /><AccountSwitcherItem {...accountSwitcher} href="#">Account settings</AccountSwitcherItem><AccountSwitcherSeparator /><AccountSwitcherItem {...accountSwitcher} href="#">View all accounts</AccountSwitcherItem><AccountSwitcherItem {...accountSwitcher} href="#">View all subaccounts</AccountSwitcherItem><AccountSwitcherSeparator /><AccountSwitcherItem {...accountSwitcher} href="#">Admin Center</AccountSwitcherItem></AccountSwitcher></>);};render(<AccountSwitcherMenu />)
Account Switcher can be used anywhere a user needs to switch between accounts or sub-accounts, and can usually be found in the Topbar. Other names for accounts in Twilio products include "workspaces" and "projects".
Account Switcher is a stylized Menu Badge, with groups of account options displayed in the menu item list. The Menu Badge itself should display the current account the user is viewing and update if a new account is selected.
Examples of account-related options include:
- Navigating to recently visited accounts
- Creating an account
- Viewing all of a user’s accounts
Account Switcher is an implementation of the Menu component and shares a lot of its sub-components and hooks. That means it shares a lot of the API.
The Account Switcher implements a grouped Menu and supports all the same keyboard navigation that the Menu component does.
const AccountSwitcherMenu = () => {const accountSwitcher = useAccountSwitcherState();const [selectedAccount, setSelectedAccount] = React.useState('Owl Telehealth');return (<><AccountSwitcherBadge {...accountSwitcher} i18nButtonLabel="Switch accounts">Owl Telehealth</AccountSwitcherBadge><AccountSwitcher {...accountSwitcher} aria-label="Avaiable accounts"><AccountSwitcherGroup label="Recent accounts"><AccountSwitcherItemRadioname="recent_accounts"value="Owl Telehealth"checked={selectedAccount === 'Owl Telehealth'}onChange={() => setSelectedAccount('Owl Telehealth')}{...accountSwitcher}>Owl Telehealth</AccountSwitcherItemRadio><AccountSwitcherItemRadioname="recent_accounts"value="Owl Health Demo"checked={selectedAccount === 'Owl Health Demo'}onChange={() => setSelectedAccount('Owl Health Demo')}{...accountSwitcher}>Owl Health Demo</AccountSwitcherItemRadio><AccountSwitcherItemRadioname="recent_accounts"value="Owl Subway"checked={selectedAccount === 'Owl Subway'}onChange={() => setSelectedAccount('Owl Subway')}{...accountSwitcher}>Owl Subway</AccountSwitcherItemRadio></AccountSwitcherGroup><AccountSwitcherSeparator /><AccountSwitcherItem {...accountSwitcher} href="#">Account settings</AccountSwitcherItem><AccountSwitcherSeparator /><AccountSwitcherItem {...accountSwitcher} href="#">View all accounts</AccountSwitcherItem><AccountSwitcherItem {...accountSwitcher} href="#">View all subaccounts</AccountSwitcherItem><AccountSwitcherSeparator /><AccountSwitcherItem {...accountSwitcher} href="#">Admin Center</AccountSwitcherItem></AccountSwitcher></>);};render(<AccountSwitcherMenu />)
The Account Switcher is made up of the following sub-components:
AccountSwitcherBadgeAccountSwitcherAccountSwitcherGroupAccountSwitcherItemAccountSwitcherItemRadioAccountSwitcherSeparatoruseAccountSwitcherState
Used to display the name of the current account selected or being viewed, and contains the menu trigger. The text inside the badge should update when a new account is selected.
Container for Account Switcher menu items.
Used to group similar items together in the Account Switcher menu. An example of this might be a list of recent accounts.
A menu item that can either perform an action or navigate to a new URL.
A menu item that can perform a single selection of an item within a named group. Similar to a radio button group, only one item can be selected at a time. Each item in the group should have a name and value and must be contained in a Group.
Simple horizontal rule used to separate groups or individual items.
React hook used to initialise the Account Switcher with various options. It returns state and actions that can be taken on the Account Switcher.