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. onToggle receives the state the checkbox moves to, so the setter can be passed straight in.

State

Controlled checkbox

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

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

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

	Type	Default
checked Whether it is ticked, controlled. Leave it out and the checkbox keeps its own state.	boolean	—
defaultChecked The starting state when `checked` is left out.	boolean	false
indeterminate The third state, for a parent whose children are partly ticked.	boolean	false
onToggle Called with the new state when it is flipped: true when it becomes ticked.	(checked: boolean) => 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	—