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

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.