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