MultiSelect
Allows selecting multiple options from a list with ease. Supports custom content, images, and convenient controls like “Select All” or “Clear All.”
Default
Option Slot
Footer Slot
Props
| Name | Default | Type |
|---|---|---|
placeholder | "Select option" | string Placeholder text shown when no item is selected |
options* | - | MultiSelectOption[] Options available to select from |
hideSearch | - | boolean Hides the search input if true |
loading | - | boolean Shows a loading state |
compareFn | - | ((a: MultiSelectOption, b: MultiSelectOption) => boolean) Custom comparison function to check equality of options |
modelValue | [] | String[] |
Slots
| Slot | Payload |
|---|---|
option | { item: MultiSelectOption; } Rendered for each option in the dropdown. Receives the option object. |
footer | { clearAll: () => void; selectAll: () => void; } Footer slot at the bottom of the dropdown. Receives helper functions `clearAll` and `selectAll`. |
Emit Events
| Event | Payload |
|---|---|
update:modelValue | [value: String[]] |