Indeterminate input checkbox with React

Learn how to render an indeterminate checkbox with React.

Create a new React project

npx create-react-app indeterminate-checkbox --template typescript

Replace src/App.tsx with the following

import * as React from 'react';
import './App.css';
import {useState} from "react";

function App() {

    const [selectAll, setSelectAll] = useState<boolean | null>(null)

    return (
        <div className="App">
            Indeterminate checkbox:
            <input type="checkbox"
                   checked={selectAll !== null ? selectAll : false}
                   ref={el => el && (el.indeterminate = selectAll === null)}
                   onChange={() => setSelectAll(!selectAll)}
            />
        </div>
    );
}

export default App;

Start it and open http://localhost:3000/ to see your indeterminate checkbox.

Indeterminate input checkbox with React

Further reading