Fluxo UIFluxo UIv0.4.1

Checkbox

A flexible checkbox component with support for indeterminate state and custom styling.

Basic Usage

Basic Checkbox

Basic Example
import { Checkbox } from 'fluxo-ui';

function MyComponent() {
  const [checked, setChecked] = useState(false);

  return (
    <Checkbox
      checked={checked}
      onChange={(e) => setChecked(e.value)}
      label="I agree to the terms and conditions"
    />
  );
}

Checkbox Group

Multiple Checkboxes

const [values, setValues] = useState({
  option1: true,
  option2: false,
  option3: true
});

const handleChange = (key) => (e) => {
  setValues(prev => ({
    ...prev,
    [key]: e.value
  }));
};

<Checkbox
  checked={values.option1}
  onChange={handleChange('option1')}
  label="Option 1"
/>
<Checkbox
  checked={values.option2}
  onChange={handleChange('option2')}
  label="Option 2"
/>
<Checkbox
  checked={values.option3}
  onChange={handleChange('option3')}
  label="Option 3"
/>

Indeterminate State

Indeterminate Checkbox

<Checkbox indeterminate label="Select All" />
<div className="ml-6 space-y-2">
  <Checkbox label="Item 1" checked={true} onChange={handleChange} />
  <Checkbox label="Item 2" checked={false} onChange={handleChange} />
  <Checkbox label="Item 3" checked={true} onChange={handleChange} />
</div>

States

Checkbox States

<Checkbox label="Normal checkbox" checked={false} onChange={handleChange} />
<Checkbox label="Checked checkbox" checked={true} onChange={handleChange} />
<Checkbox label="Disabled unchecked" disabled checked={false} onChange={handleChange} />
<Checkbox label="Disabled checked" disabled checked={true} onChange={handleChange} />
<Checkbox label="Required checkbox" required />
<Checkbox label="Indeterminate" indeterminate />

Import

import { Checkbox } from 'fluxo-ui';

Props

checked
boolean

Whether the checkbox is checked (controlled component)

indeterminate
boolean"false"

Show indeterminate state (partially selected). Sets aria-checked='mixed' and the native indeterminate flag for SR users

size
'xs' | 'sm' | 'md' | 'lg' | 'xl'"'md'"

Checkbox size

disabled
boolean"false"

Disable the checkbox

required
boolean"false"

Mark the checkbox as required

label
string

Label text displayed next to the checkbox

onChange
(event: ComponentEvent<boolean>) => void

Change event handler. Receives event object with value, name, and args properties

id
string

HTML id attribute for the checkbox input

name
string

Name attribute for the checkbox input (used in forms)

args
any

Additional arguments passed to onChange handler

className
string

Additional CSS classes for the container

Features

Controlled

Fully controlled checked state via the checked and onChange props

Indeterminate

Built-in indeterminate state for partial selection in tree structures

Disabled

Disabled state prevents interaction while preserving checked value

Label Support

Inline label prop with correct for/id association for accessibility

Form Integration

name and args props for form submission and event identification

Accessibility

Native checkbox semantics with ARIA support for screen readers

Theming

Full dark/light + 5 brand themes via CSS variables — zero extra config