Skip to main content

HeadlessUI Elements

You can also add HeadlessUI form components to Formatomus, meaning the HeadlessUI components will also automatically register themselves to the useForm context.

For this to work you must install the following:

danger

From my testing this is currently not working

yarn add @formatomus/headlessui @headlessui/react

Here are all the available HeadlessUI form components that work:

Use within Formatomus​

For the HeadlessUI components to work with Formatomus you must wrap the component with the <FormElement /> component like the regular native elements. It's that simple!

import { FormElement } from "@formatomus/core";
import { Switch } from "@formatomus/headlessui";

<FormElement name="switch">
  <Switch />
</FormElement>;

Error Handling​

Error handling with HeadlessUI components are still as simple as with the native elements in Formatomus

import { FormElement } from "@formatomus/core";
import { Switch } from "@formatomus/headlessui";

<FormElement name="switch">
  <Switch />
  <FormElement.Error>{({ message }) => <p>{message}</p>}</FormElement.Error>
</FormElement>;

and we recommend powering it with yup.

Full example​

Here's a full example using the HeadlessUI Switch component.

import { Form, FormElement } from "@formatomus/core";
import { Switch } from "@formatomus/headlessui";
import { useForm } from "react-hook-form";

type FormData = { switch: boolean };

const Component = () => {
  const methods = useForm<FormData>();

  return (
    <Form methods={methods}>
      <FormElement name="switch">
        <FormElement.Label>Switch</FormElement.Label>

        <Switch />

        <FormElement.Error>{({ message }) => <p>{message}</p>}</FormElement.Error>
      </FormElement>
    </Form>
  );
};