Form validation errors are inline and specific

Generic error messages at the top of a form — "Something went wrong" or "Invalid input" — require users to scan all fields to find what failed. WCAG 2.2 SC 3.3.1 (Error Identification) and SC 3.3.3 (Error Suggestion) mandate that validation errors identify the specific field and describe how to fix it, making inline field-level errors a legal accessibility requirement for many SaaS products. Beyond compliance, forms with global-only error banners have measurably higher abandonment rates — users who typed a complex password and can't tell which field is wrong often give up rather than re-enter everything.

Use react-hook-form with a Zod resolver to get per-field error messages with zero manual state management.

const schema = z.object({
  email: z.string().email('Please enter a valid email address'),
  password: z.string().min(8, 'Password must be at least 8 characters'),
})

const { register, formState: { errors } } = useForm({ resolver: zodResolver(schema) })

// In JSX, render the error adjacent to the field:
<input {...register('email')} aria-invalid={!!errors.email} aria-describedby="email-error" />
{errors.email && <p id="email-error" className="text-destructive text-sm">{errors.email.message}</p>}

For server-side validation rejections, return field-keyed errors from the API route ({ error: 'Validation failed', fields: { email: 'Already registered' } }) and map them back to form state on the client using setError('email', { message: ... }).