How To Use Checkboxes in ReactJS?
Last Updated :
07 Oct, 2024
Improve
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 ReactJS.
Steps To Use Checkboxes in ReactJS
Step 1: Create a React application using the following command:
npx create-react-app foldername
cd foldername
Step 2: Install the material-ui modules using the following command:
npm install @material-ui/core
npm install @material-ui/lab
npm install @material-ui/iconsProject Structure
Project Structure
Example: Now write down the following code in the App.js file. Here, App is our default component where we have written our code.
//App.js
import React from 'react'
import TextField from '@material-ui/core/TextField';
import Autocomplete from '@material-ui/lab/Autocomplete';
import Checkbox from '@material-ui/core/Checkbox';
import CheckBoxOutlineBlankIcon from '@material-ui/icons/CheckBoxOutlineBlank';
import CheckBoxIcon from '@material-ui/icons/CheckBox';
const icon = <CheckBoxOutlineBlankIcon fontSize="small" />;
const checkedIcon = <CheckBoxIcon fontSize="small" />;
const App = () => {
// Our sample dropdown options
const options = ['Monday', 'Tuesday', 'Thursday',
'Friday', 'Saturday', 'Sunday']
return (
<div style={{ marginLeft: '40%', marginTop: '60px' }}>
<h3>Greetings from GeeksforGeeks!</h3>
<Autocomplete
multiple
id="checkboxes-tags-demo"
options={options}
renderOption={(option, { selected }) => (
<React.Fragment>
<Checkbox
icon={icon}
checkedIcon={checkedIcon}
style={{ marginRight: 8 }}
checked={selected}
/>
{option}
</React.Fragment>
)}
style={{ width: 500 }}
renderInput={(params) => (
<TextField {...params} variant="outlined"
label="Checkboxes"
placeholder="Favorites" />
)}
/>
</div>
);
}
export default App
Run the application using the following command
npm startOutput: Now open your browser and go to http://localhost:3000/, you will see the following output:
How To Use Checkboxes in ReactJS
