React Multiselect Dropdown with Checkbox

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <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>
</head>
<body>
  <div id="app"></div>
  <script type="text/babel">
    const { useState } = React;

const App = () => {
      const initialOptions = [
        { 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);

return (
        <div className='container'>
          <h3>React Dropdown Multiple Select with Checkbox</h3>
           <p>Selected Option :  {selectedOptions.map(option => option.label).join(', ')}</p>
          <div
            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>
            <div className={`dropdown-menu ${isDropdownOpen ? 'show' : ''}`}>
              {options.map(option => (
                <div className="option" key={option.value}>
                  <label>
                    <input
                      type="checkbox"
                      checked={option.checked}
                      onClick={e => e.stopPropagation()} // Prevent the checkbox click from closing the dropdown
                      onChange={() => {
                        const updatedOptions = options.map(opt =>
                          opt.value === option.value
                            ? { ...opt, checked: !opt.checked }
                            : opt
                        );
                        setOptions(updatedOptions);
                      }}
                    />
                    {option.label}
                  </label>
                </div>
              ))}
            </div>
          </div>
          
          </div>
      );
    };

ReactDOM.render(<App />, document.getElementById('app'));
  </script>
  <style>
    .container {
      margin: 0 auto;
      width: 500px;
     height: 100vh;
      box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.24);
      padding: 20px;
    }

.dropdown {
      position: relative;
    }

.dropdown.open .dropdown-menu {
      display: block;
    }

.selected-options {
      cursor: pointer;
      border: 1px solid #ccc;
      padding: 8px;
  
    }

.dropdown-menu {
      display: none;
      position: absolute;
      background-color: #fff;
      border: 1px solid #ccc;
      border-top: none;
      width: 100%;
      z-index: 1;
    }

.option {
      padding: 8px;
      border-bottom: 1px solid #ccc;
    }
  </style>
</body>

</html>

 
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <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>
</head>
<body>
  <div id="app"></div>
  <script type="text/babel">
    const { useState } = React;
​
    const App = () => {
      const initialOptions = [
        { 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);
​
      return (
        <div className='container'>
          <h3>React Dropdown Multiple Select with Checkbox</h3>
           <p>Selected Option :  {selectedOptions.map(option => option.label).join(', ')}</p>
          <div
            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>
            <div className={`dropdown-menu ${isDropdownOpen ? 'show' : ''}`}>
              {options.map(option => (
                <div className="option" key={option.value}>
                  <label>
                    <input
                      type="checkbox"
                      checked={option.checked}
                      onClick={e => e.stopPropagation()} // Prevent the checkbox click from closing the dropdown
                      onChange={() => {
                        const updatedOptions = options.map(opt =>
                          opt.value === option.value
                            ? { ...opt, checked: !opt.checked }
                            : opt
                        );
                        setOptions(updatedOptions);
                      }}
                    />
                    {option.label}
                  </label>
                </div>
              ))}
            </div>
          </div>
          
          </div>
      );
    };
​
    ReactDOM.render(<App />, document.getElementById('app'));
  </script>
  <style>
    .container {
      margin: 0 auto;
      width: 500px;
     height: 100vh;
      box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.24);
      padding: 20px;
    }
​
    .dropdown {
      position: relative;
    }
​
    .dropdown.open .dropdown-menu {
      display: block;
    }
​
    .selected-options {
      cursor: pointer;
      border: 1px solid #ccc;
      padding: 8px;
  
    }
​
    .dropdown-menu {
      display: none;
      position: absolute;
      background-color: #fff;
      border: 1px solid #ccc;
      border-top: none;
      width: 100%;
      z-index: 1;
    }
​
    .option {
      padding: 8px;
      border-bottom: 1px solid #ccc;
    }
  </style>
</body>
​
</html>