A simple and customizable dropdown menu with a built-in search bar and checkboxes for multiple selections.

• 🔍 Searchable: Quickly filter items by typing in the search box.
• ✅ Multi-Select: Select multiple items using checkboxes.
• 📌 Click Anywhere: Click on the item text or checkbox to toggle selection.
• 🎨 Customizable: Easy to modify styles and functionality.

Example of the dropdown in action.

1. Clone the repository

   git clone https://github.com/your-username/dropdown-search-checkbox.git cd dropdown-search-checkbox

2. Open `` in a browser

   open index.html

Include the following HTML structure in your project:

<div class="selectDropdown"> <div class="selectDropdownToggle"> <div class="dropdown-toggle__title"> <span>Select Continent/Region</span> <img src="./chevron-up.svg"> </div> </div> <div class="selectDropdownMenu"> <div style="padding: 1rem;"> <input type="text" id="searchBox" placeholder="Search..."> <div id="selectDropdownItems"> <div class="selectDropdownItem"><span>Apple</span> <input type="checkbox" value="Apple"></div> <div class="selectDropdownItem"><span>Banana</span> <input type="checkbox" value="Banana"></div> <div class="selectDropdownItem"><span>Cherry</span> <input type="checkbox" value="Cherry"></div> </div> </div> </div> </div>

Modify the .selectDropdown CSS class:

.selectDropdown { width: 300px; /* Change to desired width */ }

Change border and hover colors in .selectDropdownItem:hover:

.selectDropdownItem:hover { background: rgba(47, 139, 138, 0.1); color: #2F8B8A; }

• Toggle Dropdown: Opens/closes dropdown on click.
• Search Filter: Filters items based on search input.
• Checkbox Toggle: Click anywhere on the item to toggle selection.
• Close on Outside Click: Automatically closes the dropdown when clicking outside.

1. Fork the repository.
2. Create a new branch (feature-new-feature).
3. Commit your changes (git commit -m 'Add new feature').
4. Push to the branch (git push origin feature-new-feature).
5. Open a Pull Request.

This project is licensed under the MIT License.

Made with ❤️ by Ch Bappy