Tenant Select Login Block for React

Everything. The four workspaces, your roles, member counts and last-used days are typed, the default star only changes the page's state and opening a workspace waits 700 milliseconds and says "Opened" without going anywhere. In a product, list the account's memberships from your server, store the default on the account and start a session in the chosen workspace on open.

The Workspace and Last used heads are buttons. A first press sorts in the order that column starts with (names A to Z, last used newest first), a second press reverses it and a third puts the rows back in their listed order; the active head carries aria-sort and a polite line reads the result. Ties fall to the workspace name, so a tie never reshuffles.

It matches the text of the name, address and role, ignoring case and accents, so mill finds Cobalt Mill and guest finds the workspace where you are a Guest. The count beside the field updates at once; a polite line reads it about half a second after the last keystroke ("2 of 4 match."), never once per letter. A filter with no match shows a short message and a button to clear it, and the frame keeps its height.

It makes that workspace the one that opens first next time. Exactly one workspace is the default, so pressing the star of the current default just says it already is. The star is a toggle button named "Default workspace, Cobalt Mill" and pressed for the default; it is a filled star against an outline one, not a color.

In this demo it signs the page out: the table is replaced, inside the same frame, by a message, the first band reads "Signed out", and the button beside it becomes Sign back in. The main button stays quiet until you sign back in, and says so when pressed.

Role and Members, and the address under each name. The role moves under the name as a short line, and the radio, the name, the last-used day and the star stay in three columns. The button stays pinned to the foot of the panel.