eliteknightdeveloper/react-hook-form-headlessui

This is the sample project using React-Hook-Form with HeadlessUI

About

This repo demonstartes how to use Headless UI components with the React Hook Form by creating wrapper over for headless ui components for better resuability and then hooking up them with the react hook form library and start using them in forms without breaking a sweat.

Components covered -

• Combobox (Autocomplete)
• Radio Group

Refer the following blogpost for more details

Good to know

The headless ui components like combobox and radio group use an array of options and each option in this array is an object. By default, headless ui sends you the complete information of selected option i.e the complete object of the selected option. But, it is very rare that you'll need this. So, I have modified the components to return only the value of the selected option instead of complete object. If you want to stick to the default behaviou you can use the default components i.e, ComboBoxDefault and RadioGroupDefault.

The Combobox also has an ongoing bug/enhancement where the options are not displayed automatically on field focus. This has also been taken care of with the help of this thread

I also noticed a class "select-none" added to <Combobox.Option /> which caused issues for me like moving the cursor to the extreme left (starting of input field) on selection of an option from the mouse. Hence, I have removed it. Because, anyways the design of these components is upto the users.

Demo

A working demo for the same can be found at https://rhf-with-headlessui.vercel.app

This project is deployed using the Vercel Platform from the creators of Next.js.

Getting Started on local

This is a Next.js project bootstrapped with create-next-app.

To run this project locally make sure that you have Node.js 14.6.0 or newer

Next, Clone this repo and run the following commands

npm install
#followed by
npm run dev # or
yarn dev
# or
pnpm dev

Open http://localhost:3000 or the URL displayed on terminal with your browser to see the result.