Forms that forgive

Validate at the right moment, explain how to fix each error next to the field, and never throw away what someone typed.

Work email

We send payslips here.Enter a full email address, like sara@northwind.io

The problem

Forms that shout “Invalid input” on the first keystroke, clear the field on error, or list every problem at the top after submit make people retype work and guess at the rules.

When to use it

Use it for

Any form that collects data people type.

Not for

Single-field actions like search: validate nothing, just run it.

Anatomy

LabelAlways visible. Placeholders disappear and aren't labels.
DescriptionThe rule, before anyone breaks it: “We send payslips here.”
Error messageReplaces nothing. Says what's wrong and how to fix it, with an example.
Error summaryOn submit with several errors: an Alert listing them, each linking to its field.

How to build it

Write the rule in the description before anyone gets it wrong.
Validate when the field loses focus or on submit, not on every keystroke.
Once a field shows an error, re-check it as they type so the error clears as soon as it's fixed.
Write errors as instructions with an example: “Enter a full email address, like sara@northwind.io”.
On submit, move focus to the first invalid field, or to a summary when there are several.
Keep every value the person typed, including the wrong one.

app.tsx

import { Input } from "@nexera-ui/react";

<Input
  label="Work email"
  type="email"
  value={email}
  onChange={setEmail}
  isInvalid={touched && !isEmail(email)}
  errorMessage="Enter a full email address, like sara@northwind.io"
  description="We send payslips here."
  onBlur={() => setTouched(true)}
/>

Accessibility

The error is linked to the field with aria-describedby and read when the field is focused.
isInvalid sets aria-invalid; the red border is never the only signal.
Use autoComplete values (email, tel, new-password) so browsers and password managers can fill fields (WCAG 1.3.5).
Don't put a time limit on forms, and don't clear them on error.

Do and don't

DoSay what is wrong and how to fix it, next to the field.

Don'tClear the field when the value is wrong.

DoAccept formats people actually type: spaces in phone numbers, mixed-case emails.

Don'tReject “+44 7700 900123” because it has spaces.

DoShow the password rules and strength as they type.

Don'tReveal the rules only after the password is rejected.