Form

A form container component providing seamless integration with React Hook Form for state management and submit handling.

form.tsx

Core implementation of the Form component.

ReactReact Hook FormTailwindForms

"use client";

import * as React from "react";
import {
  useForm,
  UseFormReturn,
  FieldValues,
  SubmitHandler,
  UseFormProps,
} from "react-hook-form";
import { cn } from "@/lib/utils";

export interface FormProps<TFieldValues extends FieldValues = FieldValues>
  extends Omit<React.FormHTMLAttributes<HTMLFormElement>, "onSubmit"> {
  form: UseFormReturn<TFieldValues>;
  onSubmit: SubmitHandler<TFieldValues>;
}

export function Form<TFieldValues extends FieldValues = FieldValues>({
  form,
  onSubmit,
  children,
  className,
  ...props
}: FormProps<TFieldValues>) {
  return (
    <form
      onSubmit={form.handleSubmit(onSubmit)}
      className={cn("space-y-4 w-full", className)}
      {...props}
    >
      {children}
    </form>
  );
}

export { useForm };
export type { UseFormReturn, SubmitHandler, UseFormProps };

Basic Usage

Form validation and submit workflow.

API Reference

Props — Form

Properties to configure the Form component.

Prop	Type	Default	Description
form	UseFormReturn	—	React Hook Form instance returned from useForm().
onSubmit	SubmitHandler	—	Callback function executed on valid form submit.