Search Components...

React Hook Form

A form wrapper for react-hookform components.

Installation

note: you need to modify index file as you add more rhf components

npx shadcn@latest add /registry/form-provider.json

Manual Installation

Install the following dependencies:

npm install @hookform/resolvers react-hook-form zod

1. Copy and paste the following code into your project.

import type { ReactNode } from "react";
import { FieldValues, FormProvider as Form, SubmitHandler, type UseFormReturn } from "react-hook-form";
 
// ----------------------------------------------------------------------
 
interface FormProviderProps<TFieldValues extends FieldValues = FieldValues> extends UseFormReturn<TFieldValues> {
	className?: string;
	children?: ReactNode;
	onSubmit: SubmitHandler<TFieldValues>;
}
 
export default function FormProvider<TFieldValues extends FieldValues = FieldValues>({
	children,
	className,
	onSubmit,
	...props
}: FormProviderProps<TFieldValues>) {
	return (
		<Form {...props}>
			<form className={className} onSubmit={props.handleSubmit(onSubmit)}>
				{children}
			</form>
		</Form>
	);
}

2. Add these to your @/components/ui/hook-form/index.tsx file for easy import. You can remove/comments exports that you don't need or don't have yet.

//
 
// ----------------------------------------------------------------------
 
export { default } from "./form-provider";
// export { default as RHFInput } from "./rhf-input";
// export { default as RHFTextarea } from "./rhf-textarea";
// export { default as RHFFloatingInput } from "./rhf-floating-input";
// export { default as RHFSelect } from "./rfh-select";
// export { default as RHFMultiSelect } from "./rhf-multi-select";
// export { default as RHFCheckbox } from "./rhf-checkbox";
// export { default as RHFRadioGroup } from "./rhf-radio-group";
 
//
// export { default as RHFCombobox } from "./rhf-combobox";
 
//
// export { default as RHFDatePicker } from "./rhf-date-picker";
// export { default as RHFTimePicker } from "./rhf-time-picker";
 
//
// export { RHFUpload } from "./rhf-upload";
// export { RHFUploadMultiple } from "./rhf-upload-multiple";