How to use HeadlessUI with React Hook Form

React Hook Form is a popular library for managing form state and validation in React applications. It makes handling form input and validation a breeze. Headless UI, on the other hand, is a library that provides accessible, unstyled UI components that can be easily customized according to your design system.

Creating complex forms with accessible and stylish UI components can be a challenging task. In this blog post, we will explore how to seamlessly integrate Headless UI with React Hook Form to handle complex form elements like ComboBox and Radio Group. We will also discuss how to add validations and default values to your forms. By the end of this post, you'll be able to confidently use these tools to enhance your projects.

Prerequisites

To follow along with this tutorial, you should have a basic understanding of React and be familiar with React Hook Form and Headless UI. If you are new to these libraries, you can check out their respective documentation:

React: https://reactjs.org/
React Hook Form: https://react-hook-form.com/
Headless UI: https://headlessui.dev/

Integrating ComboBox and Radio Group with React Hook Form

To integrate Headless UI components like ComboBox and Radio Group with React Hook Form, you'll need to utilize the Controller component and the control prop provided by React Hook Form

Integration

1. Import the required components and hooks from Headless UI and React Hook Form.
2. Inside your form component, use the useForm hook from React Hook Form, passing the validation schema as an option.
3. Wrap the component from Headless UI with the Controller component from React Hook Form.
4. Pass the control prop from the useForm hook to the Controller component.
5. Use the render prop in the Controller component to render the ComboBox and pass down the necessary props, such as field, fieldState, and formState.

You can see a live example of it here - https://rhf-with-headlessui.vercel.app/

Adding Default Values

To set default values for your form elements, simply pass an object containing the default values to the defaultValues option when using the useForm hook.

An example with default values prefilled can be found here - https://rhf-with-headlessui.vercel.app/?storage=business&user=arlene

Default Behaviour

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 RadioGroupDefaul from the git repository.

Live example of this can be found here - https://rhf-with-headlessui.vercel.app/default
With a prefilled version - https://rhf-with-headlessui.vercel.app/default?storage=business&user=arlene

Conclusion

By integrating Headless UI with React Hook Form, you can easily create complex and accessible forms with ComboBox and Radio Group components. With the Controller component and the control prop, adding validations and default values becomes a breeze. Now you can confidently use these tools to enhance your projects and create powerful, accessible forms.

The complete source code can be found here - https://github.com/singhBinary/rhf-with-headlessui