Share My Creation [Web] Multi-Select Web Component

Hi Fam

So we now have a multi-select web component that uses CheckBoxes to select items.

GitHub - Mashiane/DaisyUI-MultiSelect-with-CheckBoxes: MultiSelect with CheckBoxes

MultiSelect with CheckBoxes. Contribute to Mashiane/DaisyUI-MultiSelect-with-CheckBoxes development by creating an account on GitHub.

github.com

A fully-featured, accessible multi-select dropdown component built with DaisyUI and Tailwind CSS. This custom web component provides a beautiful, user-friendly interface for selecting multiple options from a list.

Check out this Youtube-Video,

Features​

• Multiple Selection - Select multiple options with checkboxes
• Searchable - Filter options with a built-in search input
• Accessible - Full ARIA support and keyboard navigation
• Customizable - Multiple color themes, sizes, and styling options
• Virtual Scrolling - Handle large datasets efficiently
• Select All/Deselect All - Bulk selection controls
• Clear Button - Quick way to clear all selections
• Max Selections - Limit the number of items that can be selected
• Disabled State - Disable individual options or the entire component
• Required Validation - Built-in validation with visual feedback
• Public API - Comprehensive methods for programmatic control
• Multiple Instances - Use multiple components on the same page without conflicts

I will be trying to make the selected items chips in the next version.

#SharingTheGoodness

 

[Mashiane]

Chip Style

 

[Mashiane]

Custom Renderer

 

[Mashiane]

Another Example

 

[Mashiane]