rhf
RHF Input
A React Hook Form input component with built-in error handling and validation support.
1. Import
Import the RHF Input component from the design system.
import { RHFInput } from "@/design-system/components/rhf";2. Props
RHF Input component props.
| Prop | Type | Default |
|---|---|---|
| control | Control<T> | -- |
| name | Path<T> | -- |
| register | UseFormRegister<T> | -- |
| callback | (newValue: string) => void | -- |
| label | string | -- |
| description | string | -- |
| required | boolean | false |
| wrapperClassName | string | -- |
| labelClassName | string | -- |
| descriptionClassName | string | -- |
| errorClassName | string | -- |
3. Usages
Common RHF Input patterns and configurations.
import { RHFInput } from "@/design-system/components/rhf";
import { useForm } from "react-hook-form";
function Example() {
const { control } = useForm({
defaultValues: {
email: "",
},
});
return (
<RHFInput
control={control}
register={register}
name="email"
type="email"
placeholder="Enter your email"
/>
);
}