Skip to content

React, how to make a checked checkbox editable

FULL-STACK WEB DEVELOPMENT BOOTCAMP

2024 COHORT SIGNUPS END TOMORROW

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
  • Learn modern web development in my BOOTCAMP (SIGNUP END TOMORROW FEB 20, 2024)
  • THE VALLEY OF CODE (+ PRO), your web development manual
  • I wrote 15+ coding BOOKS, all available in THE VALLEY OF CODE PRO
  • Indie solopreneur internet business masterclass SOLO LAB (summer 2024)