How To Get Multiple Checkbox Values In ReactJS?
Last Updated :
09 Jan, 2025
Handling checkboxes in ReactJS becomes important when creating forms or managing user input. If you need to select multiple options, we can do it by implementing multiple checkboxes. In this article, we'll explore how to get the values of multiple checkboxes in ReactJS, manage the state, and display the selected values.
Prerequisites
Approach
To Get Multiple Checkbox Values In ReactJS 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 ReactJS we will use the HTML DOM checkbox input and store the data accordingly. Handling multiple checkbox values is a common requirement in forms.
Steps To Create React Application
Step 1: Initialize the React project using this command.
npx create-react-app form-check
cd form-check
Step 2: Use this command to install bootstrap
npm i bootstrap
Project Structure
The default project structure Dependencies
"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..
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%;
}
// 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;
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.
Get Multiple Checkbox Values In ReactJS
Similar Reads
How to get multiple cache data in ReactJS ? We can use the following approach in ReactJS to get multiple cache data. We can get multiple cache data from the browser and use them in our application whenever needed. Caching is a technique that helps us to store a copy of a given resource in our browser and serve it back when requested.Prerequis
2 min read
How To Use Checkboxes in ReactJS? Checkboxes are essential UI components used in web applications that allow users to select one or more options from a list. React makes it simple to work with checkboxes, whether you're dealing with a single checkbox or a list of checkboxes. In this article, we will see how to use Checkboxes in Reac
2 min read
How to get cell value on React-Table ? React-Table is a powerful library that allows you to create flexible and feature-rich tables in your React applications. It provides various functionalities to manipulate and interact with table data. One common requirement is to retrieve the value of a specific cell in React-Table. In this article,
3 min read
How To Use ComboBox in ReactJS? When developing React applications, creating user-friendly forms with dropdowns or select inputs is common. However, sometimes you need more than just a static dropdown list—you need a ComboBox. A ComboBox combines the functionality of a dropdown and an input field, allowing users to either select f
2 min read
How to get all checked values of checkbox in JavaScript ? A checkbox is a selection box that enables users to pick true or false in a binary manner by checking or unchecking it. When a checkbox is checked, it shows that the value has been chosen by the user, and when a checkbox is not checked indicates false which denotes that the user has not chosen the v
2 min read
How to create Password Checklist in ReactJS ? The password checklist in the React JS app is a list of password validation steps or conditions that should be fulfilled. These conditions are automatically checked when the password is input in the input field. Prerequisites:NPM & Node.jsReact JSApproach too create Password Checklist: To add ou
2 min read
React Suite Checkbox ts:ValueType Prop React Suite is a popular front-end library with a set of React components that are designed for the middle platform and back-end products. It is a set of react component libraries for enterprise system products. It is a well-thought-out and developer-friendly UI framework. The checkbox component is
4 min read
React Suite <Checkbox> Props A React suite is a library of React components, sensible UI design, and a friendly development experience. It is supported in all major browsers. It provides pre-built components of React which can be used easily in any web application. In this article, we'll learn about React suite Prop <Checkbo
2 min read
ReactJS Semantic UI Checkbox Module Semantic UI is a modern framework used in developing seamless designs for the website, It gives the user a lightweight experience with its components. It uses the predefined CSS, JQuery language to incorporate in different frameworks. In this article, we will know how to use Checkbox Module in React
3 min read
ReactJS Onsen UI Checkbox Component ReactJS Onsen-UI is a popular front-end library with a set of React components that are designed to developing HTML5 hybrid and mobile web apps in a beautiful and efficient way. Checkbox component allows the user to make a binary choice from the given options. We can use the following approach in Re
2 min read