react-three-state-checkbox

React component for checkbox that supports the indeterminate state conveniently. This component is TypeScript compatible.

Compatibility

• React 18 or 19
• Node.js >= 22

Installation

The most straightforward way to use this component in your project is to either use npm or yarn.

# npm
npm i --save react-three-state-checkbox

# yarn
yarn add react-three-state-checkbox

Import in your project using the following.

// Default import
import Checkbox from 'react-three-state-checkbox'

// Named import
import { Checkbox } from 'react-three-state-checkbox'

Usage

This component is a wrapper around the default HTML input element.

import { useState } from 'react';
import Checkbox from 'react-three-state-checkbox';

export default function App() {
  const [checked, setChecked] = useState(false);
  const [indeterminate, setIndeterminate] = useState(false);

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setChecked(e.target.checked);
    setIndeterminate(false);
  };

  return (
    <Checkbox
      checked={checked}
      indeterminate={indeterminate}
      onChange={handleChange}
    />
  );
}

Props

| Props | Type | Description | | -------------- | ------------------------------------------------- | ------------------------------------------------ | | checked | boolean | Boolean value of checkbox's checked state. | | indeterminate | boolean? | Boolean value of checkbox's indeterminate state. | | onChange | ((e: ChangeEvent) => void)? | Function called when value of checkbox changes. |

All other native <input> HTML attributes (id, name, className, style, disabled, aria-*, data-*, etc.) are forwarded directly to the underlying input element. The type and readOnly props are controlled by the component and cannot be overridden.

Styling

There are no additional dom wrappers around the input component. The className prop styles the input element directly.

License

MIT Licensed. Copyright (c) Jonathan Chiam 2019-2026.