Toggle

react-hook-form-bound on/off switch. Wraps the @uxf/ui/toggle primitive and manages its value and isInvalid from form state.

When to use

Use @uxf/form/toggle for a single binary on/off setting inside a @uxf/form form — it registers the field with react-hook-form via control/name. For a standalone, manually-controlled switch (outside a form), use the @uxf/ui/toggle twin directly.

Usage

import { Toggle } from "@uxf/form/toggle";
import { Form } from "@uxf/form/form";
import { useForm } from "react-hook-form";

interface FormData {
    notifications: boolean;
}

function Example() {
    const formApi = useForm<FormData>({ defaultValues: { notifications: false } });

    return (
        <Form formApi={formApi} id="example" onSubmit={(values) => console.log(values)}>
            <Toggle control={formApi.control} label="Notifications" name="notifications" />
        </Form>
    );
}

Value is boolean | undefined.

Props

ToggleProps<FormData> = ControlProps<FormData> + the visual props of the @uxf/ui/toggle twin (minus the ones this field manages: isFocused, isInvalid, name, onChange, value) + the field props below.

All other props (label, variant, hiddenLabel, …) are forwarded to the twin — see @uxf/ui/toggle. Note: size is part of the props type but is not currently forwarded by this field.

Validation

• isRequired adds a required rule; its message defaults to a localized string (EN: "This field is required") and can be overridden with requiredMessage.
• Add further rules via rules; the field-level error sets the twin's isInvalid. (The twin has no helperText, so a required error styles the switch but shows no message text.)

Requirements

• Must be rendered inside a Form — it reads the form context (formId, and inherits isDisabled / isReadOnly) and needs a react-hook-form control.
• Ships no CSS of its own; it renders @uxf/ui/toggle, so include that component's stylesheet(s) and the @uxf/ui token layer — see @uxf/ui/toggle.

Links

• Visual/primitive twin: @uxf/ui/toggle