Switch

Switches for toggling a value between two states

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

<Switch />;

The <Switch /> component includes all the props and namespaces the regular HeadlessUI <Switch /> component has, while automatically registering the component to the useForm hook context.

Ensure the component is wrapped in the <FormElement /> component so that is it registered to your useForm hook context correctly.

tip

The HeadlessUI Switch component will always register as a controlled input

Styling

Please refer to the HeadlessUI docs for their Switch component, you can still achieve everything demonstrated there.

We just simply wrap it with the useForm register logic for you!

Error Handling

Namespace crossover?

You may notice that HeadlessUI exports a <Switch.Label /> component for adding an accessible label to the switch.

While Formatomus also exports <FormElement.Label /> for the same functionality, it is up to you which one you would like to use here (they both perform in the same way).

For example:

Formatomus' Label

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

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

HeadlessUI's Label

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

<FormElement name="switch">
  <Switch.Group>
    <Switch.Label>Switch</Switch.Label>
    <Switch.Description>I've looked at the word Switch too much and now it looks funny</Switch.Description>
    <Switch />
  </Switch.Group>
</FormElement>;

Component API

Please refer to the HeadlessUI docs for their Switch component

caution

However you can't use the props id, onChange, onBlur, checked, ref, value, name, defaultChecked as these are handled by React Form Hook