Checkbox Component

The Checkbox component provides a checkbox input with support for checked, unchecked, and indeterminate states.

Basic Usage

import { Checkbox } from 'nebula-ui';
import { useState } from 'react';
 
export default function Example() {
  const [checked, setChecked] = useState(false);
  
  return (
    <Checkbox 
      checked={checked}
      onCheckedChange={setChecked}
      label="I agree to the terms"
    />
  );
}

With Label

Add a label to describe what the checkbox represents:

<Checkbox 
  checked={agreed}
  onCheckedChange={setAgreed}
  label="I agree to the terms and conditions"
/>

Indeterminate State

Use indeterminate state for parent checkboxes:

<Checkbox 
  indeterminate={true}
  label="Select all items"
/>

Disabled State

Disable the checkbox to prevent interactions:

<Checkbox 
  checked={false}
  disabled
  label="Disabled checkbox"
/>
 
<Checkbox 
  checked={true}
  disabled
  label="Disabled checked"
/>

Full Width

Make the checkbox span the full width:

<Checkbox 
  checked={checked}
  onCheckedChange={setChecked}
  label="Full width checkbox"
  fullWidth
/>

Props

Prop	Type	Default	Description
`checked`	`boolean`	`false`	Whether the checkbox is checked
`indeterminate`	`boolean`	`false`	Indeterminate state (for parent checkboxes)
`onCheckedChange`	`(checked: boolean) => void`	-	Callback when checkbox state changes
`disabled`	`boolean`	`false`	Disable the checkbox
`label`	`string`	-	Label text
`fullWidth`	`boolean`	`false`	Makes checkbox full width

Accessibility

The Checkbox component is fully accessible:

Keyboard navigation support (Space/Enter to toggle)
Proper ARIA attributes (role="checkbox", aria-checked)
Support for aria-checked="mixed" in indeterminate state
Screen reader support
Focus management

Examples

Form Checkbox

<Checkbox 
  checked={agreed}
  onCheckedChange={setAgreed}
  label="I agree to the terms and conditions"
/>

Select All Pattern

const [selectAll, setSelectAll] = useState(false);
const [items, setItems] = useState([false, false, false]);
 
const handleSelectAll = (checked: boolean) => {
  setSelectAll(checked);
  setItems(items.map(() => checked));
};
 
<Checkbox 
  checked={selectAll}
  indeterminate={items.some(Boolean) && !items.every(Boolean)}
  onCheckedChange={handleSelectAll}
  label="Select all"
/>

Checkbox List

<div className="space-y-3">
  <Checkbox 
    checked={option1}
    onCheckedChange={setOption1}
    label="Option 1"
  />
  <Checkbox 
    checked={option2}
    onCheckedChange={setOption2}
    label="Option 2"
  />
  <Checkbox 
    checked={option3}
    onCheckedChange={setOption3}
    label="Option 3"
  />
</div>

Best Practices

Always provide a label to describe what the checkbox represents
Use for multiple selections - checkboxes allow multiple items to be selected
Use indeterminate state for parent checkboxes in hierarchical lists
Group related checkboxes together visually
Provide clear labels that explain the consequence of checking