Account Switcher Command Menu Block for React

So you can see it without a click. On load the menu is the Command drawn inline under the drawn chip, in a plain shell that is not modal, so nothing is trapped, hidden or focused and the page around the preview keeps working. The header's field opens the real command dialog, modal, with its focus trap, Escape and focus return, and the inline copy stays closed until a reload. Both show the same Palette and share the block's state, so what you typed in the copy is in the real dialog. In your app keep the dialog and drop the copy: the "in-place" state, the scrim with its shell and the Escape and blur effects.

A capture listener on the menu reads event.code (Digit1 to Digit4, or the keypad) while the search box is empty and focus is inside the menu, and switches to the account at that place. It reads the physical key, so a layout that needs Shift for its digits still works. Once the box has any text the digits are ordinary characters, and the caps beside the rows go away so the screen never promises a key that would not work. Alt, Ctrl, Cmd and Shift with a digit are left alone.

Everything. Choosing an account changes the chip and the status line and nothing else: no session changes, no request goes out, "Add account…" opens nothing and "Sign out of all" signs nobody out. In your app the choice would change the session (a cookie, a token or a route) and refetch the page; keep choose as the one place that happens, and keep the status line, which is the one polite live region.

The account's name, your role in it and its plan, so "owner", "team" or "dental" all find rows, and the matches are marked in the name and the second line. The foot counts the accounts that match ("2 of 4 accounts") and says it aloud a moment after typing stops. A search with no match says what to try: a name, a role or a plan.

Yes. Type to search, the arrow keys move, Enter switches to the highlighted account and Escape closes the menu and puts focus on the field; Ctrl or ⌘ K opens the dialog while focus is inside the block, and only then. The current account's row says so for screen readers as well as with the tick. The rows are options of a cmdk listbox; the block turns off its own fuzzy filter and lists the rows itself.

The copy shown on load docks to the top of the page at full width under the bar, so the keyboard does not cover the foot; the key hints go and the count stays. The digit keys need a hardware keyboard, so rows stay the way in. The real dialog keeps the Command dialog's own phone layout.