How to get multiple checkbox values in React.js ?

To get multiple checkbox values in React.js we can simply use the HTML checkbox input and variable/ states to store the corresponding value. Multiple check boxes in React App enables users to select multiple options to make personalized choices.

Prerequisites:

• React JS
• NPM and Node.js
• HTML Checkbox input

Approach

We will create a simple form that asks the user to select the programming languages they are familiar with. To get multiple checkbox values in React JS we will use the HTML DOM checkbox input and store the data accordingly.  

Steps to create React Application

Step 1: Initialize the React project using this command in the terminal with the project name.

npx create-react-app form-check

Step 2: Move to the project directory. 

cd form-check

Step 3: Use this command to install bootstrap

npm  i bootstrap

Project Structure

The default project structure 

The updated dependencies list after installing required packages

{
    "dependencies": {
        "@testing-library/jest-dom": "^5.17.0",
        "@testing-library/react": "^13.4.0",
        "@testing-library/user-event": "^13.5.0",
        "bootstrap": "^5.3.2",
        "react": "^18.2.0",
        "react-dom": "^18.2.0",
        "react-scripts": "5.0.1",
        "web-vitals": "^2.1.4"
    }
}

Example: This example uses HTML checkbox for multiple checkbox input and bootstrap for styling the form and displaing user choices..

Javascript

// Filename - App.js

import React, { useState } from "react";
import "./App.css";
import "bootstrap/dist/css/bootstrap.min.css";

function App() {
    const [userinfo, setUserInfo] = useState({
        languages: [],
        response: [],
    });

    const handleChange = (e) => {
        // Destructuring
        const { value, checked } = e.target;
        const { languages } = userinfo;

        console.log(`${value} is ${checked}`);

        // Case 1 : The user checks the box
        if (checked) {
            setUserInfo({
                languages: [...languages, value],
                response: [...languages, value],
            });
        }

        // Case 2  : The user unchecks the box
        else {
            setUserInfo({
                languages: languages.filter(
                    (e) => e !== value
                ),
                response: languages.filter(
                    (e) => e !== value
                ),
            });
        }
    };

    return (
        <>
            <div className="container-fluid top ">
                <h1 className="text-success">
                    GeeksforGeeks
                </h1>
                <h3>
                    React Example for multiple checkbox
                    input
                </h3>
                <div className="container mt-5  pb-5 pt-5">
                    <h3 className="form-head-contact-h3 ">
                        Your programming expertise lies in
                        what languages?{" "}
                    </h3>

                    <form>
                        <div className="row">
                            <div className="col-md-6">
                                <div className="form-check m-3">
                                    <input
                                        className="form-check-input"
                                        type="checkbox"
                                        name="languages"
                                        value="Javascript"
                                        id="flexCheckDefault"
                                        onChange={
                                            handleChange
                                        }
                                    />
                                    <label
                                        className="form-check-label"
                                        htmlFor="flexCheckDefault"
                                    >
                                         Javascript
                                    </label>
                                </div>
                                <div className="form-check m-3">
                                    <input
                                        className="form-check-input"
                                        type="checkbox"
                                        name="languages"
                                        value="Python"
                                        id="flexCheckDefault"
                                        onChange={
                                            handleChange
                                        }
                                    />
                                    <label
                                        className="form-check-label"
                                        htmlFor="flexCheckDefault"
                                    >
                                         Python
                                    </label>
                                </div>
                                <div className="form-check m-3">
                                    <input
                                        className="form-check-input"
                                        type="checkbox"
                                        name="languages"
                                        value="Java"
                                        id="flexCheckDefault"
                                        onChange={
                                            handleChange
                                        }
                                    />
                                    <label
                                        className="form-check-label"
                                        htmlFor="flexCheckDefault"
                                    >
                                         Java
                                    </label>
                                </div>
                                <div className="form-check m-3">
                                    <input
                                        className="form-check-input"
                                        type="checkbox"
                                        name="languages"
                                        value="PHP"
                                        id="flexCheckDefault"
                                        onChange={
                                            handleChange
                                        }
                                    />
                                    <label
                                        className="form-check-label"
                                        htmlFor="flexCheckDefault"
                                    >
                                         PHP
                                    </label>
                                </div>
                            </div>
                            <div className="col-md-6">
                                <div className="form-check m-3">
                                    <input
                                        className="form-check-input"
                                        type="checkbox"
                                        name="languages"
                                        value="C#"
                                        id="flexCheckDefault"
                                        onChange={
                                            handleChange
                                        }
                                    />
                                    <label
                                        className="form-check-label"
                                        htmlFor="flexCheckDefault"
                                    >
                                         C#
                                    </label>
                                </div>
                                <div className="form-check m-3">
                                    <input
                                        className="form-check-input"
                                        type="checkbox"
                                        name="languages"
                                        value="C++"
                                        id="flexCheckDefault"
                                        onChange={
                                            handleChange
                                        }
                                    />
                                    <label
                                        className="form-check-label"
                                        htmlFor="flexCheckDefault"
                                    >
                                         C++
                                    </label>
                                </div>
                                <div className="form-check m-3">
                                    <input
                                        className="form-check-input"
                                        type="checkbox"
                                        name="languages"
                                        value="C"
                                        id="flexCheckDefault"
                                        onChange={
                                            handleChange
                                        }
                                    />
                                    <label
                                        className="form-check-label"
                                        htmlFor="flexCheckDefault"
                                    >
                                         C
                                    </label>
                                </div>
                                <div className="form-check m-3">
                                    <input
                                        className="form-check-input"
                                        type="checkbox"
                                        name="languages"
                                        value="Typescript"
                                        id="flexCheckDefault"
                                        onChange={
                                            handleChange
                                        }
                                    />
                                    <label
                                        className="form-check-label"
                                        htmlFor="flexCheckDefault"
                                    >
                                         Typescript
                                    </label>
                                </div>
                            </div>
                        </div>

                        <div className="form-control mt-3 mb-3 text-center">
                            <label htmlFor="exampleFormControlTextarea1">
                                You're proficient in the
                                following languages :{" "}
                            </label>
                            <textarea
                                className="form-control text"
                                name="response"
                                value={userinfo.response}
                                placeholder="The checkbox values will be displayed here "
                                id="floatingTextarea2"
                                style={{ height: "150px" }}
                                onChange={handleChange}
                            ></textarea>
                        </div>
                    </form>
                </div>
            </div>
        </>
    );
}

export default App;

CSS

/* Filename - App.css */

.text {
    width: 50%;
    margin: auto;
}

.top {
    /* margin: auto; */
    margin-top: 4%;
    width: 50%;
    border: 2px ridge black;
    background-color: #f1f1f1;
}

h3 {
    text-align: center;
}

.row {
    padding-left: 20%;
}

Step to run the application: Run our application by using the following command:

npm start 

Output: By default, the React project will run on port 3000. You can access it at localhost:3000 on your browser.