Leaf UI
  • English

      • Checkbox

      Select one or more options.

      Examples

      Read event.target.checked in onChange. Use indeterminate to represent a partially selected group; it does not change the submitted value. Native name, value, required and form attributes are supported.

      Live previewInteractive example
      basic.tsx
      import { Checkbox } from '@sudden3/leaf-ui';

export function CheckboxBasic() {
  return (
    <>
      <Checkbox defaultChecked>Receive project news</Checkbox>
      <Checkbox>Receive weekly updates</Checkbox>
      <Checkbox disabled>Unavailable</Checkbox>
      <Checkbox disabled defaultChecked>
        Locked
      </Checkbox>
    </>
  );
}
      Live previewSelect all and indeterminate
      Selected 1 items
      check-all.tsx
      import { Checkbox } from '@sudden3/leaf-ui';
import { useState } from 'react';

const options = ['Design updates', 'Product news', 'Weekly updates'];

export function CheckboxCheckAll() {
  const [selected, setSelected] = useState<string[]>(['Design updates']);
  const allChecked = selected.length === options.length;
  return (
    <div className="leaf-demo-stack">
      <Checkbox
        checked={allChecked}
        indeterminate={selected.length > 0 && !allChecked}
        onChange={(event) => setSelected(event.target.checked ? [...options] : [])}
      >
        Subscribe to all
      </Checkbox>
      <div className="leaf-demo-row">
        {options.map((option) => (
          <Checkbox
            key={option}
            checked={selected.includes(option)}
            onChange={(event) =>
              setSelected(
                event.target.checked
                  ? [...selected, option]
                  : selected.filter((item) => item !== option),
              )
            }
          >
            {option}
          </Checkbox>
        ))}
      </div>
      <span className="leaf-demo-note">Selected {selected.length} items</span>
    </div>
  );
}

      Checkbox API

      PropertyTypeDefaultDescription
      checked / defaultCheckedboolean—Controlled checked state / initial checked state
      indeterminatebooleanfalsePartially checked state
      onChangeChangeEventHandler<HTMLInputElement>—Read event.target.checked
      disabledbooleanfalseDisable the option
      size'sm' | 'md' | 'lg''md'Control size
      childrenReactNode—Clickable label
      refRef<HTMLInputElement>—DOM reference

      Types

      Import CheckboxProps to describe component props. Option types in the API table link to their detailed fields above.

      import type { CheckboxProps } from '@sudden3/leaf-ui';

      Forms and localization

      Use name to include values in FormData. Uncontrolled fields follow form reset; reset controlled values in application state. Place controls in FormField for labels, help and errors. ConfigProvider supplies regional themes and translated built-in UI. Application labels and options are your responsibility.