rhf
RHF Textarea
A React Hook Form textarea component with built-in error handling, validation support, and character counter.
1. Import
Import the RHF Textarea component from the design system.
import { RHFTextarea } from "@/design-system/components/rhf";2. Props
RHF Textarea component props.
| Prop | Type | Default |
|---|---|---|
| control | Control<T> | -- |
| name | Path<T> | -- |
| register | UseFormRegister<T> | -- |
| callback | (newValue: string) => void | -- |
| showMaxLength | boolean | true |
| maxLength | number | 512 |
| rows | number | 5 |
| label | string | -- |
| required | boolean | false |
| labelClassName | string | -- |
| errorClassName | string | -- |
3. Usages
Common RHF Textarea patterns and configurations.
0/512
import { RHFTextarea } from "@/design-system/components/rhf";
import { useForm } from "react-hook-form";
function Example() {
const { control, register } = useForm({
defaultValues: {
description: "",
},
});
return (
<RHFTextarea
control={control}
register={register}
name="description"
label="Description"
placeholder="Enter a description"
/>
);
}