Adding a Root Error Component to a shadcn/ui Form

When building a form with shadcn/ui, there are existing form error messages for form fields, but there is no component to display the root error of the form.

Why display the root error as text?

Some people might prefer using a toast to show the root error, but I personally feel it’s better to display it as text in the form, allowing the user to read it without worrying that the error message will disappear. This approach also feels more consistent with how field errors are displayed as text in the form.

The Component

Below is an example of how I extended the shadcn/ui form to include a component for displaying the root error.

function FormRootMessage({ className, ...props }: React.ComponentProps<"p">) {
  const { errors } = useFormState();
  const rootError = errors.root;
  if (!rootError) {
    return null;
  }

  return (
    <p
      data-slot="form-message"
      className={cn("text-destructive text-sm", className)}
      {...props}
    >
      {rootError.message}
    </p>
  );
}

Reference:

• https://github.com/shadcn-ui/ui/discussions/2312#discussioncomment-9103210