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;
};

@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.