CheckboxButton

Controlled checkbox rendered as a labeled toggle button (a Headless UI Switch 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>.

Prop	Type	Default	Description
`value`	`boolean \| undefined`	—	Required. Checked state.
`onChange`	`(value: boolean \| undefined, event?, ...args) => void`	—	Required. Called with the toggled value.
`name`	`string`	—	Required. Field name.
`label`	`ReactNode`	—	Required. Button label.
`isDisabled`	`boolean`	`false`	Disables the button (blocks interaction).
`isInvalid`	`boolean`	`false`	Error state (error border).
`isReadOnly`	`boolean`	`false`	Adds the read-only state class.
`id`	`string`	—	Element id.
`className`	`string`	—	Extra class names.
`style`	`CSSProperties`	—	Inline styles.

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.

Default

Open in new tab

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>.

Prop

Type

Default

Description

value

boolean | undefined

—

Required. Checked state.

onChange

(value: boolean | undefined, event?, ...args) => void

—

Required. Called with the toggled value.

name

string

—

Required. Field name.

label

ReactNode

—

Required. Button label.

isDisabled

boolean

false

Disables the button (blocks interaction).

isInvalid

boolean

false

Error state (error border).

isReadOnly

boolean

false

Adds the read-only state class.

id

string

—

Element id.

className

string

—

Extra class names.

style

CSSProperties

—

Inline styles.

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