Use an HTML Checkbox with React

Learn how to use a HTML input checkbox with React and TypeScript.

Create a new React project

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

Replace src/App.tsx with the following

import * as React from 'react';
import './App.css';

function App() {

    const [selected, setSelected] = React.useState(false);

    return (
        <div className="App">
            <span> Checkbox clicked: {selected ? 'yes' : 'no'}      </span>
            <input type="checkbox" onChange={e => setSelected(e.target.checked)}/>
        </div>
    );
}

export default App;

And there you have it, a beautiful React app which handles your checkbox events.

Use an HTML Checkbox with React

Further reading