Headless UI with React Hook Forms

App.tsx

import "./styles.css";
import { Person } from "./types";
import { Listbox } from "./listbox/listbox";
import { useForm } from "react-hook-form";

const people: Person[] = [
  { id: 1, name: "Durward Reynolds", unavailable: false },
  { id: 2, name: "Kenton Towne", unavailable: false },
  { id: 3, name: "Therese Wunsch", unavailable: false },
  { id: 4, name: "Benedict Kessler", unavailable: true },
  { id: 5, name: "Katelyn Rohan", unavailable: false }
];

export default function App() {
  const { control } = useForm();

  return (
    <div className="App">
      <Listbox
        name="people"
        control={control}
        rules={{ required: true }}
        people={people}
      />
    </div>
  );
}

listbox.tsx

import { useController, UseControllerProps } from "react-hook-form";

import { Listbox as ListBox } from "@headlessui/react";
import { Person } from "../types";

type Props = {
  people: Person[];
};

export const Listbox = (props: Props & UseControllerProps) => {
  const {
    field: { value, onChange }
  } = useController(props);

  const { people } = props;

  return (
    <>
      <ListBox value={value} onChange={onChange}>
        <ListBox.Button>
          {value ? (value as Person).name : "Select Person"}
        </ListBox.Button>
        <ListBox.Options>
          {people.map((person) => (
            <ListBox.Option
              key={person.id}
              value={person}
              disabled={person.unavailable}
            >
              {person.name}
            </ListBox.Option>
          ))}
        </ListBox.Options>
      </ListBox>
    </>
  );
};

types.ts

export type Person = {
  id: number;
  name: string;
  unavailable: boolean;
};

I am also curious how it will be implemented for combobox 😄

It will be super nice to have an example with Combobox :)

combobox please....

I will get an example up soon.

combobox with react-window it will be nice 😁

here is a demo repo for combobox. tomorrow I will resolve the display issue with headless, but as of right now, RHF and headless are both in sync when it comes to state (contact selected).

essentially you are using the Controller component to pass the required props to the Combobox component. HUI will consider it to be an uncontrolled component if you pass defaultValue to the main combobox component.

https://github.com/jasonabullard/hui-rhf-demo

@faqihalif @DecadentIpsum @tomaszzmudzinski

Working combobox just pushed

https://github.com/jasonabullard/hui-rhf-demo

Thanks a lot @jasonabullard !

@faqihalif @DecadentIpsum @tomaszzmudzinski

Working combobox just pushed

https://github.com/jasonabullard/hui-rhf-demo

thankssss

Thanks for the Gist! It really helped me.
I used it with RadioGroup. The only adjustment I needed to make was to add the by attribute on the RadioGroup

Thanks @jasonabullard ! It worked fine, but has one issue when field is errored it is not getting autofocused, maybe issue related to ref, still not able to find any solution.

Thanks you @jasonabullard. Based on this, I added an example of a controlled component using headlessui Switch here.

Thanks bro! It really helped me.

Does the error message work?

Its funny cause when I think of contributions to open source I am always stuck in the mindset of "packages" but this post is a wonderful example of a super impactful open source contribution that is super achievable.

Thank you for saving me two hours of reading through docs, going to try to think of these kind of contributions in the future.

It's very helpful, but when I use useForm like this:

const schema = yup....
type FormData = yup.InferType<typeof schema>;

const {
  control
} = useForm<FormData>({
  resolver: yupResolver(schema),
});

I have to use component like this:

<ListBox
  name="type"
  options={options}
  control={control as any}
/>

cause if I use control={control}, it show error of "types...."

how to do validation, consider a user hasn't selected any option.