Skip to main content
Version: Next

Checkbox

Checkbox component that supports both regular and indeterminate states, built on top of Ant Design v5 Checkbox.

Live Example​

Loading component...

Try It​

Edit the code below to experiment with the component:

Live Editor
function Demo() {
  return (
    <Checkbox
      // Add props here
    />
  );
}
Result
Loading...

All Checkbox States​

Live Editor
function AllStates() {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
      <Checkbox checked={false}>Unchecked</Checkbox>
      <Checkbox checked={true}>Checked</Checkbox>
      <Checkbox indeterminate={true}>Indeterminate</Checkbox>
      <Checkbox disabled>Disabled unchecked</Checkbox>
      <Checkbox disabled checked>Disabled checked</Checkbox>
    </div>
  );
}
Result
Loading...

Select All Pattern​

Live Editor
function SelectAllDemo() {
  const [selected, setSelected] = React.useState([]);
  const options = ['Option A', 'Option B', 'Option C'];

  const allSelected = selected.length === options.length;
  const indeterminate = selected.length > 0 && !allSelected;

  return (
    <div>
      <Checkbox
        checked={allSelected}
        indeterminate={indeterminate}
        onChange={(e) => setSelected(e.target.checked ? [...options] : [])}
      >
        Select All
      </Checkbox>
      <div style={{ marginLeft: 24, marginTop: 8 }}>
        {options.map(opt => (
          <div key={opt}>
            <Checkbox
              checked={selected.includes(opt)}
              onChange={() => setSelected(prev =>
                prev.includes(opt) ? prev.filter(x => x !== opt) : [...prev, opt]
              )}
            >
              {opt}
            </Checkbox>
          </div>
        ))}
      </div>
    </div>
  );
}
Result
Loading...

Props​

PropTypeDefaultDescription
checkedbooleanfalseWhether the checkbox is checked.
indeterminatebooleanfalseWhether the checkbox is in indeterminate state (partially selected).

Import​

import { Checkbox } from '@superset-ui/core/components';
Improve this page

This documentation is auto-generated from the component's Storybook story. Help improve it by editing the story file.