Toggle

A labelled on/off switch — a controlled boolean input built on Headless UI's Switch.

When to use

Use Toggle for a single binary on/off setting that you drive yourself via value / onChange.

Inside a @uxf/form form use @uxf/form/toggle instead — it registers the field with react-hook-form (value, onChange, validation, disabled/read-only from the form context) and renders this component underneath. @uxf/ui/toggle is the controlled primitive with no form wiring.

Usage

import { Toggle } from "@uxf/ui/toggle";
import { useState } from "react";

function Example() {
    const [isChecked, setIsChecked] = useState(true);

    return <Toggle label="Notifications" name="notifications" onChange={setIsChecked} value={isChecked} />;
}

Props

Extends FormControlProps<boolean | undefined> (from @uxf/ui/types).

onBlur, onFocus and isFocused are part of the inherited FormControlProps type but are not wired up by this primitive — the @uxf/form/toggle twin is what makes use of them.

Variants & states

Built-in values (from theme.ts):

reversed renders the label before the switch (flex-direction: row-reverse).

ToggleVariants and ToggleSizes are open interfaces, so a project can add its own values via module augmentation:

// toggle.d.ts
declare module "@uxf/ui/toggle/theme" {
    interface ToggleSizes {
        lg: true;
    }
}

Behavioural states: isDisabled, isInvalid, isReadOnly and isRequired toggle the shared state classes on the wrapper and switch; isDisabled also disables the underlying Switch.

Requirements

Import the component stylesheet once in your global CSS:

@import url("@uxf/ui/css/toggle.css");

Also requires the global @uxf/ui token layer, set up once per app — see @uxf/ui setup.