{"library":"react-hook-form","title":"React Hook Form","description":"React Hook Form is a high-performance, flexible, and extensible forms library for React applications, currently stable at version 7.72.1. It leverages an uncontrolled component approach, minimizing re-renders and improving performance by isolating component updates from form state changes. The library maintains a rapid release cadence, frequently delivering patches and minor versions, with a beta for version 8 already available. Key differentiators include its focus on performance, small bundle size, seamless integration with native HTML form validation, and robust TypeScript support for enhanced type safety across form values and errors. It provides essential hooks like `useForm` for comprehensive form management, `Controller` for integrating with external controlled components, and `useFieldArray` for dynamic lists of inputs, making it suitable for a wide spectrum of form complexities.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install react-hook-form"],"cli":null},"imports":["import { useForm } from 'react-hook-form';","import { Controller } from 'react-hook-form';","import { useFieldArray } from 'react-hook-form';","import { FormProvider } from 'react-hook-form';"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import React from 'react';\nimport { useForm } from 'react-hook-form';\n\ntype FormData = {\n  firstName: string;\n  lastName: string;\n  email: string;\n  age: number;\n};\n\nexport default function MyForm() {\n  const {\n    register,\n    handleSubmit,\n    formState: { errors },\n  } = useForm<FormData>({\n    defaultValues: {\n      firstName: '',\n      lastName: '',\n      email: '',\n      age: 18,\n    },\n  });\n\n  const onSubmit = (data: FormData) => {\n    console.log('Form Submitted:', data);\n    // In a real app, you would send this data to an API\n    // Example: fetch('/api/submit-form', { method: 'POST', body: JSON.stringify(data) });\n    alert(JSON.stringify(data, null, 2));\n  };\n\n  return (\n    <form onSubmit={handleSubmit(onSubmit)} className=\"space-y-4 p-4 max-w-md mx-auto bg-white shadow-md rounded-lg\">\n      <div>\n        <label htmlFor=\"firstName\" className=\"block text-sm font-medium text-gray-700\">First Name:</label>\n        <input\n          id=\"firstName\"\n          {...register('firstName', { required: 'First name is required' })}\n          className=\"mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500\"\n        />\n        {errors.firstName && <p className=\"mt-1 text-sm text-red-600\">{errors.firstName.message}</p>}\n      </div>\n\n      <div>\n        <label htmlFor=\"lastName\" className=\"block text-sm font-medium text-gray-700\">Last Name:</label>\n        <input\n          id=\"lastName\"\n          {...register('lastName', { required: 'Last name is required' })}\n          className=\"mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500\"\n        />\n        {errors.lastName && <p className=\"mt-1 text-sm text-red-600\">{errors.lastName.message}</p>}\n      </div>\n\n      <div>\n        <label htmlFor=\"email\" className=\"block text-sm font-medium text-gray-700\">Email:</label>\n        <input\n          id=\"email\"\n          type=\"email\"\n          {...register('email', { \n            required: 'Email is required',\n            pattern: { value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\\.[A-Z]{2,}$/i, message: 'Invalid email address' }\n          })}\n          className=\"mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500\"\n        />\n        {errors.email && <p className=\"mt-1 text-sm text-red-600\">{errors.email.message}</p>}\n      </div>\n\n      <div>\n        <label htmlFor=\"age\" className=\"block text-sm font-medium text-gray-700\">Age:</label>\n        <input\n          id=\"age\"\n          type=\"number\"\n          {...register('age', { required: 'Age is required', min: { value: 18, message: 'Must be at least 18' } })}\n          className=\"mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500\"\n        />\n        {errors.age && <p className=\"mt-1 text-sm text-red-600\">{errors.age.message}</p>}\n      </div>\n\n      <button\n        type=\"submit\"\n        className=\"w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500\"\n      >\n        Submit\n      </button>\n    </form>\n  );\n}","lang":"typescript","description":"This quickstart demonstrates a basic form using `useForm` with TypeScript, `register` for input binding and validation, `handleSubmit` for submission, and `formState.errors` for displaying validation feedback. It includes required fields, email pattern validation, and minimum age constraint.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}