About this set
A sign-in screen for team plans that authenticate through a company identity provider. The main field takes the workspace subdomain with a fixed .northwind.app suffix drawn inside the same box, followed by a Continue with SSO button. Under an or use divider, three provider buttons name Okta, Microsoft Entra ID and Google Workspace, each with a small coloured initial badge, and a footer link sends people without a team plan to password sign-in. Use it for B2B products where the workspace decides which identity provider to redirect to. The field and suffix are wrapped in one container that takes the border, and :focus-within moves the focus ring to the whole box, so the suffix reads as part of the input. The suffix is linked to the input with aria-describedby, so screen readers announce the full address format. The field turns off spellcheck and autocapitalisation, which would otherwise mangle subdomains. In Bootstrap the field is an .input-group with .input-group-text; in Tailwind it is a flex row with focus-within utilities.
What’s included
- Workspace field with a fixed domain suffix inside the box
- Focus ring on the whole field via :focus-within
- Named provider buttons grouped under an accessible label
- Spellcheck and autocapitalise off for subdomains
- Suffix shrinks on screens under 400px wide
Accessibility
The workspace field has a visible label and is described by the suffix text; the provider buttons sit in a group labelled by the or use divider and each has its provider's name as visible text. The whole field shows a brand ring on focus and every button and link has a 2px outline. Transitions are removed under prefers-reduced-motion.
Customise it
Change the suffix text in the markup and its colour (#636a77, chosen for 4.5:1 on the grey band). Brand colour is --lf-brand (plain CSS, Bootstrap) or --color-brand (Tailwind). Provider badge colours are inline background values.
