React Forms Checkbox

React Forms – Checkbox

Checkboxes in React can be used in two main ways:

Single checkbox (true/false value)
Multiple checkboxes (selecting multiple items)

Since React uses controlled components, the checkbox state is managed using state + onChange handler.

✅ 1️⃣ Single Checkbox Example

Useful for terms & conditions, subscription toggle, etc.

import { useState } from "react";

function SingleCheckbox() {
const [isChecked, setIsChecked] = useState(false);

return (
<>
<label>
<input
type="checkbox"
checked={isChecked}
onChange={(e) => setIsChecked(e.target.checked)}
/>
Accept Terms & Conditions
</label>

<p>Status: {isChecked ? "Accepted" : "Not Accepted"}</p>
</>
);
}

import { useState } from "react";

function SingleCheckbox() {

const [isChecked, setIsChecked] = useState(false);

return (

<label>

<input

type="checkbox"

checked={isChecked}

onChange={(e) => setIsChecked(e.target.checked)}

Accept Terms & Conditions

</label>

<p>Status: {isChecked ? "Accepted" : "Not Accepted"}</p>

</>

);

}

export default SingleCheckbox;

🧠 Key Notes

Use checked instead of value
The onChange handler reads event.target.checked (boolean)

✅ 2️⃣ Multiple Checkboxes Example

Useful when selecting hobbies, skills, toppings, etc.

import { useState } from "react";

function MultiCheckbox() {
const [selected, setSelected] = useState([]);

const options = ["Reading", "Traveling", "Coding", "Gaming"];

const handleChange = (e) => {
const value = e.target.value;

setSelected((prev) =>
prev.includes(value)
? prev.filter((item) => item !== value)
: [...prev, value]
);
};

return (
<>
<h3>Select Hobbies:</h3>

{options.map((hobby) => (
<label key={hobby}>
<input
type="checkbox"
value={hobby}
checked={selected.includes(hobby)}
onChange={handleChange}
/>
{hobby}
</label>
))}

<p>Selected: {selected.join(", ")}</p>
</>
);
}

import { useState } from "react";

function MultiCheckbox() {

const [selected, setSelected] = useState([]);

const options = ["Reading", "Traveling", "Coding", "Gaming"];

const handleChange = (e) => {

const value = e.target.value;

setSelected((prev) =>

prev.includes(value)

? prev.filter((item) => item !== value)

: [...prev, value]

);

};

return (

<h3>Select Hobbies:</h3>

{options.map((hobby) => (

<input

type="checkbox"

value={hobby}

checked={selected.includes(hobby)}

onChange={handleChange}

{hobby}

</label>

))}

<p>Selected: {selected.join(", ")}</p>

</>

);

}

export default MultiCheckbox;

🧠 Logic Explanation

Action	Result
If item checked	Add value to array
If unchecked	Remove value from array

✅ Checkbox in a Form with Submit

import { useState } from "react";

function SurveyForm() {
const [subscribe, setSubscribe] = useState(false);

const handleSubmit = (event) => {
event.preventDefault();
alert(subscribe ? "Subscribed!" : "Not Subscribed");
};

return (
<form onSubmit={handleSubmit}>
<label>
<input
type="checkbox"
checked={subscribe}
onChange={(e) => setSubscribe(e.target.checked)}
/>
Subscribe to Newsletter
</label>

<br /><br />
<button type="submit">Submit</button>
</form>
);
}

import { useState } from "react";

function SurveyForm() {

const [subscribe, setSubscribe] = useState(false);

const handleSubmit = (event) => {

event.preventDefault();

alert(subscribe ? "Subscribed!" : "Not Subscribed");

};

return (

<label>

<input

type="checkbox"

checked={subscribe}

onChange={(e) => setSubscribe(e.target.checked)}

Subscribe to Newsletter

</label>

<button type="submit">Submit</button>

</form>

);

}

export default SurveyForm;

🧠 Best Practices

✔ Use checked instead of value
✔ Store multiple selections in an array
✔ Use event.target.checked to read boolean value
✔ Use consistent naming for readability

🎯 Summary

Type	Data Stored	Example
Single Checkbox	Boolean (`true/false`)	Accept Terms
Multiple Checkbox	Array of values	Select hobbies

React Forms Checkbox