Checkbox

Controlled checkbox primitive. Renders a <div role="switch"> that shows a check icon when selected (or a minus icon when indeterminate).

When to use

Use Checkbox as a low-level, controlled control when you render your own label and layout — it has no built-in label element.

• Labeled field: use CheckboxInput, which wraps Checkbox with a label and helper/error text.
• Group of related options: use CheckboxList.
• Inside a @uxf/form form: use @uxf/form/checkbox-input, which registers the field with react-hook-form. There is no @uxf/form/checkbox twin.

Usage

import { Checkbox } from "@uxf/ui/checkbox";
import { useState } from "react";

function Example() {
    const [checked, setChecked] = useState(false);
    const onChange = (value: boolean | undefined) => setChecked(value ?? false);

    return <Checkbox name="terms" onChange={onChange} value={checked} />;
}

Props

Extends FormControlProps<boolean | undefined>, which supplies the shared controlled-field props (value, onChange, name, onBlur, onFocus, isDisabled, isFocused, isReadOnly, isInvalid, isRequired).

Variants & states

Sizes (from theme.ts):

CheckboxSizes is an open interface, so a project can add its own sizes via module augmentation:

declare module "@uxf/ui/checkbox/theme" {
    interface CheckboxSizes {
        sm: true;
    }
}

Behavioural states are reflected via classes and driven by the props above: selected (value), indeterminate, isDisabled, isReadOnly, isInvalid, isFocused.

Requirements

Import the component stylesheet once in your global CSS:

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

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