Form Component Library

A composable, flexible form library for React, built on top of react-hook-form.

Change log

$3

- Initial release

$3

- Fix: update README.md add demo application https://codesandbox.io/p/sandbox/react-hook-form-easy-access-pxclnl

$3

- Fix: add export type FormRef

$3

- Fix: add props classNameLabel and classNameError to FormField component
- Fix: add props className to Form component
- Fix: call onchange event from different component

Features

- 🧩 Composable: Build forms using Form and FormField components.
- 🛡️ Schema Validation: Built-in support for Zod, Yup, Joi, Superstruct, and Vest (auto-detected).
- 🔄 Dynamic Fields: Easy management of array fields with useFormField.
- 💅 Headless UI: Full control over styling (Tailwind ready).
- 🚀 Performance: Optimized renders using react-hook-form.

Installation

How to install react-hook-form-easy-access:

``bash
npm install react-hook-form-easy-access react-hook-form @hookform/resolvers

choose validator

The Form component acts as a provider, and FormField handles individual inputs.

`tsx
import { Form, FormField } from "react-hook-form-easy-access";
import { z } from "zod";

// 1. Define Schema
const schema = z.object({
username: z.string().min(3, "Username must be at least 3 chars"),
email: z.string().email("Invalid email"),
});

export default function LoginForm() {
const handleSubmit = (data) => {
console.log("Form Data:", data);
};

return (


If you need access to form methods like reset, setValue, or isPending inside the form, use the render prop pattern.

`tsx


Use useFormField (which wraps useFieldArray) to handle dynamic lists.

`tsx
import { Form, FormField } from "react-hook-form-easy-access";

function DynamicList({ useFieldArray }) {
// This hook must be used inside a component that is a child of