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 -
Refer the following blogpost for more details
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.
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.
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 devOpen http://localhost:3000 or the URL displayed on terminal with your browser to see the result.