CheckboxInput

Controlled checkbox with a label and optional helper/error text. A plain composition of the visual Checkbox and a <label> — no headless primitive is involved; clicking the label toggles the value directly, unless the control is disabled or read-only.

When to use

Use @uxf/ui/checkbox-input for a labeled checkbox that you control yourself (you own value / onChange).

• Inside a @uxf/form form: use @uxf/form/checkbox-input instead — it registers the field with react-hook-form, derives the invalid state from validation, and renders the validation message. Reach for the ui component only for a standalone, controlled checkbox outside a form.
• Just the box, no label: use Checkbox.
• Several related options: use CheckboxList.

Usage

import { CheckboxInput } from "@uxf/ui/checkbox-input";
import { useState } from "react";

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

    return <CheckboxInput label="I agree" name="agree" onChange={onChange} value={checked} />;
}

Props

Extends FormControlProps<boolean | undefined> (value, onChange, name, onBlur, onFocus, isDisabled, isFocused, isReadOnly, isInvalid, isRequired).

Variants & states

Size accepts default and lg, forwarded to the underlying Checkbox. The wrapper reflects isDisabled, isReadOnly, isInvalid and isRequired as state classes.

This component does not validate on its own — pass isInvalid and helperText yourself, or use the @uxf/form/checkbox-input twin, which fills them from the form state.

Requirements

Import the component stylesheet once in your global CSS. It renders a Checkbox, so that stylesheet is required too:

@import url("@uxf/ui/css/checkbox-input.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.