How to create a React Checkbox

 by Robin Wieruch
 - Edit this Post

A short React tutorial by example for beginners about using a checkbox in React. First of all, a checkbox is just an HTML input field with the type of checkbox which can be rendered in React's JSX:

const App = () => {
return (
<div>
<input type="checkbox" />
</div>
);
};

What may be missing is an associated label to signal the user what value is changed with this checkbox:

const App = () => {
return (
<div>
<label>
<input type="checkbox" />
My Value
</label>
</div>
);
};

In your browser, this checkbox can already change its checked state by showing either a check mark or nothing. However, this is just the checkbox's internal HTML state which isn't controlled by React yet.

Let's change this by transforming this checkbox from being :

const App = () => {
const [checked, setChecked] = React.useState(false);
const handleChange = () => {
setChecked(!checked);
};
return (
<div>
<label>
<input
type="checkbox"
checked={checked}
onChange={handleChange}
/>
My Value
</label>
<p>Is "Value 1" checked? {checked.toString()}</p>
</div>
);
};

By using and an event handler, we can keep track of the checkbox's value via and change the value via its onChange property with an .

Next we may want to create a checkbox component which can be used more than once throughout a React project. Therefore, we will extract it as a new and to it:

const App = () => {
const [checked, setChecked] = React.useState(false);
const handleChange = () => {
setChecked(!checked);
};
return (
<div>
<Checkbox
label="Value 1"
value={checked}
onChange={handleChange}
/>
<p>Is "Value 1" checked? {checked.toString()}</p>
</div>
);
};
const Checkbox = ({ label, value, onChange }) => {
return (
<label>
<input type="checkbox" checked={value} onChange={onChange} />
{label}
</label>
);
};

Our checkbox component is a now. For example, if you would give your checkbox some , every Checkbox component which is used in your React project would use the same style.

If you would want to create a checkbox group instead, you could just use multiple checkbox components side by side and maybe style them with some border and some alignment, so that a user perceives them as a group of checkboxes:

const App = () => {
const [checkedOne, setCheckedOne] = React.useState(false);
const [checkedTwo, setCheckedTwo] = React.useState(false);
const handleChangeOne = () => {
setCheckedOne(!checkedOne);
};
const handleChangeTwo = () => {
setCheckedTwo(!checkedTwo);
};
return (
<div>
<Checkbox
label="Value 1"
value={checkedOne}
onChange={handleChangeOne}
/>
<Checkbox
label="Value 2"
value={checkedTwo}
onChange={handleChangeTwo}
/>
</div>
);
};

That's is for creating a checkbox component in React. If you are a beginner in React, I hope this tutorial helped you to understand some concepts and patterns in React.

Keep reading about 

If you are new to JavaScript, the question mark after a variable may be confusing to you. Let's shed some light into it. The question mark in JavaScript is commonly used as conditional operator…

A short React tutorial by example for beginners on how to create an indeterminate React Checkbox which uses an indeterminate state (also called tri state ). Let's start with a checkbox example from…

The Road to React

Learn React by building real world applications. No setup configuration. No tooling. Plain React in 200+ pages of learning material. Learn React like 50.000+ readers.

Get it on Amazon.