rhf

RHF Error Message

A React Hook Form error message component that displays validation errors for form fields.

1. Import

Import the RHF Error Message component from the design system.

import { RHFErrorMessage } from "@/design-system/components/rhf";

2. Props

RHF Error Message component props.

Prop	Type	Default
name	Path<T>	--
control	Control<T>	--
showErrorWithTooltip	boolean	false
className	string	--

3. Usages

Common RHF Error Message patterns and configurations.

This field is required

import { RHFErrorMessage } from "@/design-system/components/rhf";
import { useForm } from "react-hook-form";

function Example() {
  const { control } = useForm({
    defaultValues: {
      email: "",
    },
  });

  return (
    <div>
      <input type="email" name="email" />
      <RHFErrorMessage name="email" control={control} />
    </div>
  );
}