Showing errors without yelling
Good form errors appear next to the field that caused them, in plain English, and only after the user has had a chance to fix them. Bad form errors appear at the top of the page, all at once, and blame the user. The difference is user research, not technology.
Three rules. Show the error next to the field, not at the top. Write the message in plain language: Please enter a valid email address, not Field invalid. Do not show the error before the user has had a chance to type. React Hook Form supports all of this with the mode option and the errors object.
const { register, handleSubmit, formState: { errors } } = useForm<FormValues>({
resolver: zodResolver(LoginSchema),
mode: 'onBlur', // show errors when the user leaves a field, not as they type
});
return (
<form onSubmit={handleSubmit(onSubmit)}>
<label>
Username
<input {...register('username')} />
{errors.username && (
<p className="text-sm text-red-600">{errors.username.message}</p>
)}
</label>
</form>
);Inline error messages appear only after the user interacts with a field.
Quiz: Quiz
Loading practice…