Trusted Brands Login Block for React

Nothing leaves the page. Sign in waits under a spinner for less than a second, then shows "You're signed in" with the address you typed, and a polite status message says nothing was sent; Sign out brings the form back. For real, post the email and password to your auth endpoint where the code says so, keep the busy state until it answers and show its error under the field it concerns. The eight customers are typed in WORDMARKS as fictional names with a shape each: replace them with customers who have agreed to be shown, and with their own marks if their brand rules allow it.

Each wordmark carries a sector, and the filter lights the ones that match and dims the rest to a solid 5% tint with softer text that still passes contrast. Nothing is removed or reordered, so the strip never changes height or width and nothing jumps under the pointer. A polite status message says how many are lit ("Retail: 3 of 8 shown, the rest dimmed."). The filter is a single-choice group: arrow keys move between the chips and one is always on.

A loop that never stops is hard to read, hard to click and a problem for people who are sensitive to motion, and a customer strip is not worth that. This one is a still row that wraps to two rows of four on a phone. If you have many customers, filter by sector, link to a customers page, or show the few that matter most to the person signing in.

No. Each is a 24 by 24 path filled with the text colour and a name set in a typeface, a weight and a case of its own, so they follow your theme in light and dark and cost no image requests. The shapes are aria-hidden and the names are the text a screen reader reads, in a labelled list. To use real logos, swap the path and the name for an image with an empty alt and keep the name in text.

Yes. Tab runs through the email, the password, its show and hide toggle, Forgot password, Sign in, the quiet link and the sector filter, where the arrow keys move between chips. Each problem is tied to its field, focus goes to the first, and after signing in it moves to the result's heading while a polite status message says what happened.

The form comes first and Sign in ends on the first screen. The strip sits under it as two rows of four wordmarks, with the filter chips above it, and the page keeps its height as the filter changes.