Skip to content

Instantly share code, notes, and snippets.

@j-bullard
Created July 4, 2021 07:15
Show Gist options
  • Save j-bullard/dfa2ec92bff5ff0a498f649c3c4cb432 to your computer and use it in GitHub Desktop.
Save j-bullard/dfa2ec92bff5ff0a498f649c3c4cb432 to your computer and use it in GitHub Desktop.
Headless UI with React Hook Forms
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>
);
}
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>
</>
);
};
export type Person = {
id: number;
name: string;
unavailable: boolean;
};
@JohanAltamar
Copy link

Does the error message work?

@LinnJS
Copy link

LinnJS commented Jan 4, 2023

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.

@buiducnhat
Copy link

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

@aqibgatoo
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment