CheckboxButton

Controlled checkbox rendered as a labeled toggle button (a Base UI Switch rendered as a <button>) with a check icon that appears when selected.

When to use

Use @uxf/ui/checkbox-button when a boolean choice should look like a pressable button/pill rather than a standard checkbox.

• Inside a @uxf/form form: use @uxf/form/checkbox-button instead — it registers the field with react-hook-form. Reach for the ui component for a standalone, controlled toggle.
• Standard checkbox with a side label: use CheckboxInput.

Usage

import { CheckboxButton } from "@uxf/ui/checkbox-button";
import { useState } from "react";

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

    return <CheckboxButton label="Confirm" name="confirm" onChange={onChange} value={checked} />;
}

Props

Extends FormControlProps<boolean | undefined>.

onBlur, onFocus, isFocused and isRequired are accepted (inherited from FormControlProps) but are not applied by this component; only isDisabled blocks interaction.

Variants & states

Reflected via classes: selected (value), isDisabled, isInvalid, isReadOnly.

Requirements

Import the component stylesheet once in your global CSS:

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

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