<script src="https://unpkg.com/react@17.0.2/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
<script type="text/babel">
const { useState } = React;
{ label: 'Vue', value: 'Vue', checked: false },
{ label: 'React', value: 'React', checked: false },
{ label: 'Angular', value: 'Angular', checked: false },
{ label: 'PHP', value: 'PHP', checked: false },
const [options, setOptions] = useState(initialOptions);
const [isDropdownOpen, setIsDropdownOpen] = useState(false);
const selectedOptions = options.filter(option => option.checked);
<div className='container'>
<h3>React Dropdown Multiple Select with Checkbox</h3>
<p>Selected Option : {selectedOptions.map(option => option.label).join(', ')}</p>
className={`dropdown ${isDropdownOpen ? 'open' : ''}`}
onClick={() => setIsDropdownOpen(!isDropdownOpen)}
<div className="selected-options">
{selectedOptions.length === 0 ? (
<span>Select options</span>
) : selectedOptions.length === 1 ? (
<span>{selectedOptions[0].label}</span>
<span>{selectedOptions.length} options selected</span>
<div className={`dropdown-menu ${isDropdownOpen ? 'show' : ''}`}>
<div className="option" key={option.value}>
onClick={e => e.stopPropagation()} // Prevent the checkbox click from closing the dropdown
const updatedOptions = options.map(opt =>
opt.value === option.value
? { ...opt, checked: !opt.checked }
setOptions(updatedOptions);
ReactDOM.render(<App />, document.getElementById('app'));
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.24);
.dropdown.open .dropdown-menu {
border-bottom: 1px solid #ccc;