Login Form with Server Errors

ProNew

A login form that does not say whether the email or the password was wrong, clears and refocuses the password after a failure, and shows a lock-out message when the server asks to wait. Use this when you want safe, accessible sign-in error handling.

Customize

This item has no props to tune. Use the lens above to change theme, density, direction and more.

Guide and examples

When to use it

You build a sign-in form and want the failure handling to follow security guidance: one generic message for bad credentials, the password cleared and focused, and a clear wait message after too many attempts.

Do not use it when: Do not use it for sign-up, where you must tell the person which email is taken, or for a second factor, which needs its own step.

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Props

Prop	Type	Description
`onLogin`	`(values) => Promise<LoginResult>`	`{ ok: true }`, `{ ok: false, reason: "invalid" }` or `{ ok: false, reason: "locked", retryAfterSeconds }`.
`onSuccess`	`() => void`	After a successful sign-in.

Accessibility

A bad login produces one role="alert" message that does not reveal which part was wrong, which is both a security and a clarity choice.
Focus moves to the emptied password field so the person can retype at once; the email stays.
During a lock-out the countdown is a polite status message that updates once per second, and the button stays disabled until the time is up.

Testing

The pattern ships with a Testing Library test (login-form-server-errors.test.tsx) that covers: its main behaviour, the keyboard path and the error or empty states.

Guide and examples

When to use it

Do not use it when: Do not use it for sign-up, where you must tell the person which email is taken, or for a second factor, which needs its own step.

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Props

Prop	Type	Description
`onLogin`	`(values) => Promise<LoginResult>`	`{ ok: true }`, `{ ok: false, reason: "invalid" }` or `{ ok: false, reason: "locked", retryAfterSeconds }`.
`onSuccess`	`() => void`	After a successful sign-in.

Accessibility

A bad login produces one role="alert" message that does not reveal which part was wrong, which is both a security and a clarity choice.
Focus moves to the emptied password field so the person can retype at once; the email stays.
During a lock-out the countdown is a polite status message that updates once per second, and the button stays disabled until the time is up.

Testing

The pattern ships with a Testing Library test (login-form-server-errors.test.tsx) that covers: its main behaviour, the keyboard path and the error or empty states.