Overview
The MultiSelect component provides both custom events (for HTML event listeners) and callback properties (for JavaScript functions) to handle user interactions.
Custom Events
These events are dispatched as standard DOM CustomEvents that you can listen to using addEventListener:
| Event Name | When Dispatched | Cancelable | Bubbles |
|---|---|---|---|
select | When an option is selected | No | Yes |
deselect | When an option is deselected | No | Yes |
change | When the selection changes | No | Yes |
Event Detail Structure
All events include a detail object with the following structure:
Event Detail Type
Usage Examples
Select Event
Deselect Event
Change Event
Callback Properties
Alternative to event listeners, you can set callback functions directly on the component:
| Property | Type | Description |
|---|---|---|
selectCallback | (option: T) => void | Called when an option is selected |
deselectCallback | (option: T) => void | Called when an option is deselected |
changeCallback | (selectedOptions: T[]) => void | Called when selection changes |
Callback Examples
Callback Properties
Events vs Callbacks
Both approaches work simultaneously - you can use either or both:
✅ Use Events When:
- Working in HTML/vanilla JavaScript
- Multiple listeners needed
- Event delegation is useful
- Following standard DOM patterns
- Need event bubbling behavior
✅ Use Callbacks When:
- Simple single handler needed
- Working with frameworks (React, Vue, etc.)
- Prefer direct function assignment
- Need access to full item object
- Cleaner syntax for your use case
Using Both Approaches
Framework Integration
React
Vue 3
Svelte
⚠️ Important Notes
- Event Detail: All event information is in
event.detail, notevent.target - Callbacks Run First: Callback properties are executed before custom events are dispatched
- Both Trigger: Setting a callback does NOT prevent the event from firing
- Type Safety: Use TypeScript generic types for full type safety with callbacks
- Cleanup: Remember to remove event listeners when component is destroyed