React, how to make a checked checkbox editable
New Courses Coming Soon
Join the waiting lists
How to add a checkbox that defaults to checked but it's editable in React
I had a checkbox in a React component:
<input name="enable" type="checkbox" />
and I wanted it to be checked by default, yet the user could change its value.
Using
<input name="enable" type="checkbox" checked="checked" />
didn’t work. The checkbox state could not be changed.
The solution was to use the defaultChecked
attribute:
<input name="enable" type="checkbox" defaultChecked={true} />
If the checkbox needs to be checked depending if the value was checked in a variable (for example in an editing form when you are getting the actual value from the database) you can use
<input name="enable" type="checkbox" defaultChecked={existing_enable_value} />
→ Get my React Beginner's Handbook
→ Read my full
React Tutorial
on The Valley of Code
Here is how can I help you:
- COURSES where I teach everything I know
- CODING BOOTCAMP cohort course - next edition in 2025
- BOOKS 16 coding ebooks you can download for free on JS Python C PHP and lots more
- Follow me on X