Documentation Index
Fetch the complete documentation index at: https://mintlify.com/Twilio-labs/paste/llms.txt
Use this file to discover all available pages before exploring further.
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
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>
</>
);
};
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
