How To Use Checkboxes in ReactJS?

Last Updated : 07 Oct, 2024

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/icons

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.

JavaScript

//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 start

Output: Now open your browser and go to http://localhost:3000/, you will see the following output: