Skip to main content

​
About Account Switcher

Account Switcher is a menu component that allows users to switch between multiple accounts, organizations, or workspaces. Built on the Menu component, it provides account selection with grouping and badge support.

​
Components

  • AccountSwitcher - Main menu container
  • AccountSwitcherItem - Individual account option
  • AccountSwitcherItemRadio - Radio selection for current account
  • AccountSwitcherGroup - Group related accounts
  • AccountSwitcherBadge - Badge for account status
  • AccountSwitcherSeparator - Visual divider
  • useAccountSwitcherState - Hook for managing menu state

​
Installation

yarn add @twilio-paste/account-switcher

​
Usage

import {
  AccountSwitcher,
  AccountSwitcherGroup,
  AccountSwitcherItem,
  AccountSwitcherItemRadio,
  useAccountSwitcherState
} from '@twilio-paste/account-switcher';
import { MenuButton } from '@twilio-paste/menu';

const MyAccountSwitcher = () => {
  const menu = useAccountSwitcherState();
  const [selectedAccount, setSelectedAccount] = React.useState('account-1');
  
  return (
    <>
      <MenuButton {...menu} variant="secondary">
        My Account
      </MenuButton>
      <AccountSwitcher {...menu} aria-label="Account switcher">
        <AccountSwitcherGroup label="Personal Accounts">
          <AccountSwitcherItemRadio
            name="account"
            value="account-1"
            checked={selectedAccount === 'account-1'}
            onChange={() => setSelectedAccount('account-1')}
          >
            Personal Account
          </AccountSwitcherItemRadio>
        </AccountSwitcherGroup>
        <AccountSwitcherGroup label="Team Accounts">
          <AccountSwitcherItemRadio
            name="account"
            value="account-2"
            checked={selectedAccount === 'account-2'}
            onChange={() => setSelectedAccount('account-2')}
          >
            Team Account
          </AccountSwitcherItemRadio>
        </AccountSwitcherGroup>
      </AccountSwitcher>
    </>
  );
};

​
Props

​
AccountSwitcher

Accepts all Menu props for state management.

​
AccountSwitcherItem

​
AccountSwitcherItemRadio

​
AccountSwitcherGroup

​
AccountSwitcherBadge

​
State Management

Use useAccountSwitcherState hook to manage menu state: 
const menu = useAccountSwitcherState();

<MenuButton {...menu}>Account</MenuButton>
<AccountSwitcher {...menu}>
  {/* items */}
</AccountSwitcher>

​
Grouping Accounts

Use AccountSwitcherGroup to organize accounts: 
<AccountSwitcher {...menu}>
  <AccountSwitcherGroup label="Personal">
    <AccountSwitcherItem>Personal Account</AccountSwitcherItem>
  </AccountSwitcherGroup>
  <AccountSwitcherSeparator />
  <AccountSwitcherGroup label="Organizations">
    <AccountSwitcherItem>Acme Corp</AccountSwitcherItem>
    <AccountSwitcherItem>Tech Startup</AccountSwitcherItem>
  </AccountSwitcherGroup>
</AccountSwitcher>

​
Accessibility

  • Uses semantic menu markup with proper ARIA attributes
  • Keyboard navigation with arrow keys
  • Radio groups properly labeled
  • Menu state announced to screen readers
  • Focus management when opening/closing

​
Related components

Build docs developers (and LLMs) love

Get started for freeTalk to us