shadcn.io is not affiliated with official shadcn/ui
Organization Select Login Block for React
A sign-in page that starts from the organisation: a combobox over six companies narrows as you type, and the one you pick sets the form below it, single sign-on only, password and code, or password alone.
Installation
Overview
Let the organisation decide how people sign in, with this organization select login block for React with Base UI. It's the sign-in page of Orbitbook, multi-company bookkeeping: the page's side rails run the full height of the screen and one band crosses it between two rules, holding one centered column. A Combobox lists six organisations and narrows to the names that hold what you type ("ha" leaves two); picking one turns the field into a chip with a Change button and sets the form beneath it. Halvern Savings and Ostmere Surveyors sign in with single sign-on only, so there is no password and the button reads Continue with SSO. Yarrowdale Clinic and Thackwell Freight ask for a password and a six-digit Input OTP code, and Ashprior Studio and Kessend Dental for a password alone. Before a choice the one Shine Button is quiet and says "Choose your organisation"; pressed, it names what is missing and moves focus to the field. Each result shows in the form's own space, and nothing is sent. It's built from Combobox, Field, Password Input, Input OTP, Button, Shine Button and Guides, with a CSS entrance only. For multi-tenant products where the company, not the person, decides the method.
FAQ
What stays in the page, and how do I wire it for real?
All of it. The six organisations and their methods are typed, any password is accepted, the one code that works (482913) is printed under the code field, and nothing is looked up or sent. In a product, ask your server for the organisation's sign-in policy when it is chosen (from its domain or its stored settings), show that method, and send single sign-on organisations to their identity provider with a SAML or OpenID Connect request.
How does the field narrow the list?
By what the name holds, ignoring case: typing ha shows the organisations with those two letters in their name, and clearing the box shows all six again. Picking a row with Enter or a press chooses it. When nothing matches, the list says so and points to Request access under the form, which is always there for people whose organisation isn't listed.
What changes when I pick an organisation?
The panel under the field changes to that organisation's method, and the height of the page never changes, so nothing moves under your pointer: before a choice it explains the three ways in; for single sign-on it lists the method, that passwords are off and where the sign-in page lives; for the others it shows the fields, with the code row either live or marked "Not asked". The button's label follows: Choose your organisation, Continue with SSO, or Sign in.
How do I go back to another organisation?
Change, in the chip, clears the choice and puts focus back in the field, ready to type. Whatever you typed into the email and password is kept for the next organisation that asks for them, and a result's Sign out button returns to the form.
Why is the button quiet before a choice, and not disabled?
A disabled button can't explain itself and keyboard users can't reach it. Here it stays pressable: pressing it with no organisation says "Choose your organisation first." in a polite message and moves focus to the combobox. With a choice made, it takes its full look and its label names the step.
Which keys work, and how is it read out?
Type to narrow the list, the arrow keys move through the rows, Enter chooses one and Escape closes the list. The field is named Organisation, picking says how that organisation signs in ("Halvern Savings uses single sign-on only. Continue with SSO is ready."), and focus moves to the first field of the new form, or to the button for single sign-on. The code field reads left to right whatever the page direction.
Related
- Pro
Workspace Picker Login
Workspaces and rolesA sign-in page that starts from the workspaces this browser remembers: tiles on hairlines with an add cell, a password field that fills the space under the grid, and Forget with a permanent Undo.
- Pro
Domain Routing Login
SSO and providersA sign-in page for workforce scheduling that reads the domain of your email and says how that company signs in: one required provider, a provider with a password option, a choice of two, or a password for a stranger.
- Pro
Enterprise SSO Login
SSO and providersA sign-in page for a construction project manager that asks for the workspace address first: it looks the workspace up as you type, offers the right spelling for a typo and turns the button into Continue with SSO.
- Pro
Identity Provider Login
SSO and providersA searchable list of ten sign-in providers in three groups with counts and a Connected before marker: typing filters, Enter or a press chooses, the button names the choice and shows where a real sign-in would go.
- Pro
Tenant Select Login
Workspaces and rolesThe workspace chooser shown after sign-in: a signed-in line, a filter, a native table of four workspaces sortable by name or last used, a star that sets the default and one button that opens the chosen one.
- Pro
Federated Identity Login
SSO and providersA provider chooser for a cloud console: a table of five identity providers with protocol, a health word and dot, and the last check, where a provider in maintenance can't be chosen and says why, and one button connects.