Login — Organization domain gateway

A wide domain-entry band opens organization access above three policy notes. Use before routing someone to their organization identity provider.

ReactHTML

1440 × 900

Open in new tab

Component.tsx81 lines

export default function LoginOrganizationGateway() {
  return (
    <section className="bg-white text-neutral-900">
      <div className="mx-auto max-w-6xl px-6 py-16 sm:py-24">
        <div className="max-w-3xl">
          <div>
            <h1 className="text-3xl font-semibold tracking-tight text-balance sm:text-4xl">
              Find your organization
            </h1>
            <p className="mt-4 max-w-2xl text-lg text-pretty text-neutral-600">
              Enter the workspace address to continue with your organization
              account.
            </p>
          </div>
        </div>
        <form className="mt-10 grid items-end gap-4 rounded-lg border border-neutral-200 p-6 sm:grid-cols-[minmax(0,1fr)_auto]">
          <div>
            <label
              htmlFor="login-organization-gateway-domain"
              className="block text-sm font-medium"
            >
              Workspace address
            </label>
            <div className="mt-2 flex min-w-0">
              <input
                id="login-organization-gateway-domain"
                name="domain"
                type="text"
                required
                autoComplete="organization"
                aria-describedby="login-organization-gateway-hint"
                placeholder="workspace"
                className="h-10 w-full min-w-0 rounded-md border border-neutral-300 bg-white px-3 text-sm placeholder:text-neutral-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900 rounded-r-none"
              />
              <span className="flex shrink-0 items-center rounded-r-md border border-l-0 border-neutral-300 px-3 text-sm text-neutral-600">
                .example.com
              </span>
            </div>
            <p
              id="login-organization-gateway-hint"
              className="mt-2 text-sm text-neutral-600"
            >
              Use the address supplied by your administrator.
            </p>
          </div>
          <button
            type="submit"
            className="inline-flex h-11 items-center justify-center rounded-md bg-neutral-900 px-5 text-sm font-medium text-white transition-colors hover:bg-neutral-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900"
          >
            Continue
          </button>
        </form>
        <dl className="mt-8 grid gap-6 sm:grid-cols-3">
          <div>
            <dt className="text-sm font-semibold">Managed access</dt>
            <dd className="mt-2 text-sm text-neutral-600">
              Short identity-provider note.
            </dd>
          </div>
          <div>
            <dt className="text-sm font-semibold">Account requirements</dt>
            <dd className="mt-2 text-sm text-neutral-600">
              Short membership requirement.
            </dd>
          </div>
          <div>
            <dt className="text-sm font-semibold">Need help?</dt>
            <dd className="mt-2 text-sm">
              <a
                href="#"
                className="font-medium text-neutral-900 underline underline-offset-4 hover:text-neutral-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900"
              >
                Contact administrator
              </a>
            </dd>
          </div>
        </dl>
      </div>
    </section>
  )
}

Pattern notes

When to use: Use when sign-in depends on an organization address. Choose login-sso-first for a known provider. Variations: replace the suffix with a tenant prefix, add a remembered workspace link, or show a membership note.
Hierarchy: The 30px heading explains the destination. A single 14px workspace label and fixed domain suffix precede Continue. Each policy slot has a 3-word title and 8-word note.
Responsive: The action stacks below the domain field under 640px, and the policy notes become a single column. The input shrinks before its fixed suffix; the heading grows at sm.
Layout: White section with a 1152px max-w-6xl container, 24px side gutters and 64px vertical padding, increasing to 96px at 640px. A max-w-3xl introduction sits above a p-6 domain band. At 640px its grid uses minmax(0,1fr)/auto with 16px gaps. A three-column definition list follows after 32px.
States: Links and controls have a 2px neutral-900 keyboard-focus outline offset by 2px. Filled actions change to neutral-700 on hover, outlined actions to neutral-50, and underlined links to neutral-600. Native form fields retain browser validation; controls describe structure and need application integration for persistence or navigation.

Desktop wireframe

┌──────────────────────────────────────────────────────────────┐
│Find your organization                                        │
│Lede                                                          │
│Workspace address                                             │
│[workspace                ].example.com  [Continue]           │
│Address hint                                                  │
│Managed access     Account requirements     [Get help]        │
└──────────────────────────────────────────────────────────────┘

View all

Login — Organization domain gateway

Pattern notes

Login — Account picker with credential pane

Login — Card over full-bleed media

Login — Centred card

Login — Organization domain gateway

Pattern notes

More in Login

Login — Account picker with credential pane

Login — Card over full-bleed media

Login — Centred card