Checkbox

Checkboxes allow users to select one or more items from a set, or to turn an option on or off.

Import

import { Checkbox } from '@md3-react/core';

Basic Usage

Live Editor

<Demo>
  <Checkbox aria-label="Accept terms" />
</Demo>

Result

Loading...

Checked State

Live Editor

function Example() {
  const [checked, setChecked] = React.useState(false);
  return (
    <Demo>
      <label style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
        <Checkbox 
          checked={checked} 
          onChange={(e) => setChecked(e.target.checked)} 
        />
        <span>I agree to the terms</span>
      </label>
    </Demo>
  );
}

Result

Loading...

Indeterminate State

Use the indeterminate state when a checkbox represents a mix of checked and unchecked states:

Live Editor

function Example() {
  const [items, setItems] = React.useState([true, false, true]);
  const allChecked = items.every(Boolean);
  const someChecked = items.some(Boolean);
  
  return (
    <Demo>
      <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
        <label style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
          <Checkbox 
            checked={allChecked}
            indeterminate={someChecked && !allChecked}
            onChange={(e) => setItems(items.map(() => e.target.checked))}
          />
          <span>Select all</span>
        </label>
        <div style={{ marginLeft: '24px', display: 'flex', flexDirection: 'column', gap: '8px' }}>
          {items.map((item, i) => (
            <label key={i} style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
              <Checkbox 
                checked={item} 
                onChange={(e) => {
                  const newItems = [...items];
                  newItems[i] = e.target.checked;
                  setItems(newItems);
                }}
              />
              <span>Item {i + 1}</span>
            </label>
          ))}
        </div>
      </div>
    </Demo>
  );
}

Result

Loading...

Error State

Live Editor

<Demo>
  <div style={{ display: 'flex', gap: '16px' }}>
    <Checkbox error aria-label="Error unchecked" />
    <Checkbox error checked onChange={() => {}} aria-label="Error checked" />
  </div>
</Demo>

Result

Loading...

Disabled State

Live Editor

<Demo>
  <div style={{ display: 'flex', gap: '16px' }}>
    <Checkbox disabled aria-label="Disabled unchecked" />
    <Checkbox disabled checked onChange={() => {}} aria-label="Disabled checked" />
  </div>
</Demo>

Result

Loading...

Props

Prop	Type	Default	Description
checked	boolean	-	Controlled checked state
indeterminate	boolean	false	Shows indeterminate state
error	boolean	false	Shows error styling
disabled	boolean	false	Disables the checkbox
onChange	function	-	Called when checked state changes

Plus all standard <input type="checkbox"> HTML attributes.

Accessibility

• Uses native <input type="checkbox"> for screen reader support
• Supports keyboard interaction (Space to toggle)
• Indeterminate state is communicated via indeterminate property