Checkbox – Once UI

The Checkbox component provides a selectable control that can be toggled between checked, unchecked, and indeterminate states. It's built on top of the InteractiveDetails component for consistent styling and behavior.

Checkbox

Accept terms and conditions

By checking this box, you agree to our terms of service.

<Checkbox
  label="Accept terms and conditions"
  description="By checking this box, you agree to our terms of service."
/>

State

Use the checked prop with React state to create controlled checkboxes.

State

Controlled checkbox

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

<Checkbox
  label="Controlled checkbox"
  checked={checked}
  onToggle={() => setChecked(!checked)}
/>

// You can also update the state programmatically
const handleReset = () => setChecked(false);

Indeterminate

The checkbox can display an indeterminate state, useful for parent checkboxes that control a group of child checkboxes.

Indeterminate

Select all items

Item 1

Item 2

Item 3

const [items, setItems] = useState([
  { id: 1, label: 'Item 1', checked: true },
  { id: 2, label: 'Item 2', checked: false },
  { id: 3, label: 'Item 3', checked: true }
]);

const allChecked = items.every(item => item.checked);
const someChecked = items.some(item => item.checked);
const isIndeterminate = someChecked && !allChecked;

const toggleAll = () => {
  const newCheckedState = !allChecked;
  setItems(items.map(item => ({
    ...item,
    checked: newCheckedState
  })));
};

<Checkbox
  label="Select all items"
  checked={allChecked || isIndeterminate}
  indeterminate={isIndeterminate}
  onToggle={toggleAll}
/>

{items.map(item => (
  <Checkbox
    key={item.id}
    label={item.label}
    checked={item.checked}
    onToggle={() => {
      setItems(items.map(i => 
        i.id === item.id ? { ...i, checked: !i.checked } : i
      ));
    }}
  />
))}

Disabled

Disable the checkbox to prevent user interaction.

Disabled

Disabled checkbox

<Checkbox
  label="Disabled checkbox"
  disabled
/>

Hover

Disable the hover pulse animation by setting hoverable to false.

Hover

No hover effect

<Checkbox
  label="No hover effect"
  hoverable={false}
/>

API reference

Prop	Type	Default
checked Whether it is ticked.	boolean	—
indeterminate The third state, for a parent whose children are partly ticked.	boolean	false
onToggle Called when it is flipped.	() => void	—
hoverable Highlight the row on hover.	boolean	true
label	ReactNode	—
description	ReactNode	—
disabled	boolean	false
className	string	—
style	React.CSSProperties	—
iconButtonProps Props forwarded to the icon button beside the label.	IconButtonProps	—
…and every React.InputHTMLAttributes prop	inherited	—