Complete reference for attributes, options, callbacks, and methods
These attributes can be set on the <multi-select> custom element.
| Attribute | Type | Default | Description |
|---|---|---|---|
multiple |
boolean | true | Allow multiple selections. Set to "false" for single-select mode. |
enable-search |
boolean | true | Enable search/filtering functionality. When false, only keyboard navigation works. |
search-input-mode |
string | 'normal' | Input display mode: 'normal', 'readonly', or 'hidden'. |
search-placeholder |
string | 'Search...' | Placeholder text for the search input field. |
search-hint |
string | undefined | Hint text shown in a popover when input is focused. |
min-search-length |
number | 0 | Minimum characters required before triggering async search. |
allow-groups |
boolean | true | Enable grouping of options by the group property. |
allow-select-all |
boolean | true | Show "Select All" button in multi-select mode. |
allow-clear-all |
boolean | true | Show "Clear All" button in multi-select mode. |
allow-add-new |
boolean | false | Allow adding new options not in the list. |
show-checkboxes |
boolean | true | Display checkboxes next to options in multi-select mode. |
sticky-actions |
boolean | true | Keep Select All/Clear All buttons fixed while scrolling. |
close-on-select |
boolean | false | Close dropdown after selecting an option. |
lock-placement |
boolean | true | Lock dropdown placement after first open to prevent jumping. |
display-mode |
string | 'pills' | Display mode for selected items: 'pills', 'count', or 'compact'. |
badges-position |
string | 'bottom' | Position of badges container: 'top', 'bottom', 'left', or 'right'. |
badges-threshold |
number | null | Auto-switch from badges to count when this number is exceeded. |
count-format |
string | '{count} selected' | Template for count display. Use {count} as placeholder. |
show-counter |
boolean | false | Show count badge next to the toggle icon. |
dropdown-min-width |
string | null | Minimum width for dropdown (e.g., '20rem', '300px'). |
max-height |
string | '20rem' | Maximum height for dropdown options list. |
empty-message |
string | 'No results found' | Message displayed when no options match search. |
loading-message |
string | 'Loading...' | Message displayed while loading async data. |
initial-values |
string | undefined | JSON string array of initially selected values (e.g., '["val1","val2"]'). |
These options can be passed when instantiating new WebMultiSelect(element, options).
| Option | Type | Default | Description |
|---|---|---|---|
options |
MultiSelectOption[] | undefined | Array of option objects to display in the dropdown. |
container |
HTMLElement | null | Container element for dropdown/hint/popover (for Shadow DOM support). |
| All attributes listed above are also available as JavaScript options with camelCase naming (e.g., searchPlaceholder, enableSearch, etc.) | |||
Callback functions for handling user interactions and data loading.
| Callback | Signature | Description |
|---|---|---|
searchCallback |
(searchTerm: string, signal?: AbortSignal) => Promise<MultiSelectOption[]> | Async function to load options based on search term. Returns array of options. The optional signal aborts when a newer search supersedes this one — forward it to fetch to cancel the stale request. |
addNewCallback |
(value: string) => MultiSelectOption | Promise<MultiSelectOption> | Called when user adds a new option (when allowAddNew is true). Should return the created option. |
beforeSearchCallback |
(searchTerm: string) => string | null | Interceptor: pre-process the search term. Return a transformed term, or null to block the search. |
beforeSelectCallback |
(option, selectedOptions) => boolean | void | Interceptor: runs before an interactive selection. Return false to block; true/undefined to allow. Silent (no event). Bypassed by setSelected and Select-All. |
beforeDeselectCallback |
(option, selectedOptions) => boolean | void | Interceptor: runs before an interactive deselection. Return false to block; true/undefined to allow. Silent (no event). Bypassed by setSelected and Clear-All. |
onSelect |
(e: CustomEvent<MultiSelectEventDetail>) => void | Called when an option is selected. Since v2 this is a real listener — it receives the same CustomEvent as addEventListener('select', …), so read the payload off e.detail.option (not a bare argument). |
onDeselect |
(e: CustomEvent<MultiSelectEventDetail>) => void | Called when an option is deselected. Receives the deselect CustomEvent; payload on e.detail.option. |
onChange |
(e: CustomEvent<MultiSelectEventDetail>) => void | Called whenever the selection changes (after select or deselect). Receives the change CustomEvent; payload on e.detail.selectedOptions / e.detail.selectedValues. |
Events dispatched by the <multi-select> element that can be listened to via addEventListener.
| Event Name | Detail Type | Description |
|---|---|---|
select |
MultiSelectEventDetail | Fired when an option is selected. Detail contains: option, selectedOptions. |
deselect |
MultiSelectEventDetail | Fired when an option is deselected. Detail contains: option, selectedOptions. |
change |
MultiSelectEventDetail | Fired when selection changes. Detail contains: selectedOptions, selectedValues. |
Methods available on the MultiSelectElement or WebMultiSelect instance.
| Method | Signature | Description |
|---|---|---|
getSelected |
() => MultiSelectOption[] | Returns array of currently selected options. |
setSelected |
(values: (string | number)[]) => void | Programmatically set selected options by their values. |
getValue |
() => (string | number) | (string | number)[] | null | Returns the selected value(s) — a single value in single-select mode, an array in multi-select mode. |
setAttributes |
(values: Record<string, unknown>) => void | Apply several inputs as one in-place update (one re-render instead of one per property). Keys are property names (configKey, e.g. searchPlaceholder) or their kebab attribute (search-placeholder); values are typed property values, validated like a direct property assignment — not raw attribute strings. Flushes synchronously. To batch raw attribute strings, use batch(() => { setAttribute(…) }). |
destroy |
() => void | Clean up and remove the multiselect instance. |
TypeScript interfaces and types used in the API.
| Property | Type | Required | Description |
|---|---|---|---|
value |
string | Yes | Unique identifier for the option. |
label |
string | Yes | Display label for the option. |
icon |
string | No | Optional icon or emoji to display. |
subtitle |
string | No | Optional subtitle or description text. |
group |
string | No | Optional group name for grouping options. |
disabled |
boolean | No | Whether the option is disabled. |
| Property | Type | Required | Description |
|---|---|---|---|
selectedOptions |
MultiSelectOption[] | Yes | Array of currently selected options. |
selectedValues |
string[] | Yes | Array of selected option values. |
option |
MultiSelectOption | No | The specific option that triggered the event (for select/deselect events). |
| Type | Possible Values |
|---|---|
DisplayMode |
'pills' | 'count' |
BadgesPosition |
'top' | 'bottom' | 'left' | 'right' |
SearchInputMode |
'normal' | 'readonly' | 'hidden' |
Customize the component by overriding these SCSS variables before importing the stylesheet.
| Variable | Default Value | Description |
|---|---|---|
$multiselect-input-padding-v |
0.5rem | Vertical padding for input field |
$multiselect-input-padding-h |
0.75rem | Horizontal padding for input field |
$multiselect-hint-padding |
0.5rem 0.75rem | Padding for search hint popover |
$multiselect-option-padding-v |
0.5rem | Vertical padding for dropdown options |
$multiselect-option-padding-h |
0.75rem | Horizontal padding for dropdown options |
$multiselect-badge-gap |
0.5rem | Gap between badges |
$ml-spacing-xs |
0.25rem | Extra small spacing unit |
$ml-spacing-sm |
0.5rem | Small spacing unit |
$ml-spacing-md |
0.75rem | Medium spacing unit |
$ml-spacing-lg |
1rem | Large spacing unit |
$multiselect-input-icon-spacing |
2.5rem | Right padding for input to accommodate toggle icon |
$multiselect-count-badge-offset |
2rem | Right position offset for count badge |
$multiselect-option-icon-size |
1.25rem | Width and height of option icons |
$multiselect-count-clear-size |
1rem | Width and height of count clear button |
$multiselect-badge-height |
1.5rem | Height of badge badges |
$multiselect-badge-remove-width |
1.5rem | Width of badge remove button |
$multiselect-selected-popover-max-height |
20rem | Maximum height of selected items popover |
$multiselect-popover-close-size |
1.5rem | Width and height of popover close button |
$multiselect-selected-popover-body-max-height |
18rem | Maximum height of popover body content |
$multiselect-count-badge-padding |
0.125rem 0.25rem | Padding for count badge |
$multiselect-checkbox-offset |
0.125rem | Top margin offset for checkbox alignment |
| Variable | Default Value | Description |
|---|---|---|
$ml-input-bg |
#ffffff | Input field background color |
$ml-input-text |
#111827 | Input field text color |
$ml-input-border |
#d1d5db | Input field border color |
$ml-input-focus-border-color |
#3b82f6 | Input field border color when focused |
$ml-text-primary |
#111827 | Primary text color |
$ml-text-secondary |
#6b7280 | Secondary text color (hints, subtitles) |
$ml-accent-color |
#3b82f6 | Accent color (selection, focus states) |
$ml-accent-color-hover |
#2563eb | Darker accent color for hover states |
$ml-primary-bg |
#f3f4f6 | Background color for hover states |
$ml-primary-bg-hover |
#e5e7eb | Darker background for active hover |
$ml-border-color |
#e5e7eb | Standard border color |
$multiselect-hint-bg |
#ffffff | Search hint popover background |
$multiselect-hint-border |
#e5e7eb | Search hint popover border |
$multiselect-dropdown-bg |
#ffffff | Dropdown background color |
$multiselect-dropdown-border |
#e5e7eb | Dropdown border color |
$multiselect-dropdown-text |
#111827 | Dropdown text color |
$multiselect-option-hover-bg |
#f9fafb | Option background on hover |
$multiselect-badge-bg |
#eff6ff | Badge background color |
$ml-text-white |
#ffffff | White text color for badges and buttons |
| Variable | Default Value | Description |
|---|---|---|
$ml-font-size-2xs |
0.625rem | Extra extra small font size |
$ml-font-size-xs |
0.75rem | Extra small font size |
$ml-font-size-sm |
0.875rem | Small font size |
$ml-font-size-base |
1rem | Base font size |
$ml-font-size-lg |
1.125rem | Large font size |
$ml-font-size-xl |
1.25rem | Extra large font size |
$ml-font-weight-medium |
500 | Medium font weight |
$ml-font-weight-semibold |
600 | Semibold font weight |
$ml-line-height-none |
1 | Line height of 1 (no extra spacing) |
$ml-line-height-relaxed |
1.4 | Relaxed line height for readable text |
$multiselect-placeholder-opacity |
0.6 | Opacity of input placeholder text |
$multiselect-group-label-letter-spacing |
0.05em | Letter spacing for group labels |
$multiselect-option-subtitle-line-height |
1.3 | Line height for option subtitles |
$multiselect-group-label-transform |
uppercase | Text transform for group labels |
$multiselect-darken-amount |
10% | Amount to darken colors on hover states |
| Variable | Default Value | Description |
|---|---|---|
$multiselect-disabled-opacity |
0.5 | Opacity for disabled options |
$multiselect-disabled-input-opacity |
0.6 | Opacity for disabled input and toggle |
$multiselect-option-selected-bg-opacity |
0.1 | Opacity for selected option background |
$multiselect-highlight-bg-opacity |
0.2 | Opacity for highlight and hover backgrounds |
$multiselect-focus-shadow-opacity |
0.5 | Opacity for focus box shadow |
$multiselect-disabled-bg-opacity |
0.05 | Opacity for disabled input background |
| Variable | Default Value | Description |
|---|---|---|
$ml-z-index-dropdown |
9999 | Z-index for dropdown layer |
$ml-z-index-popover |
10000 | Z-index for popovers and hints |
$ml-z-index-sticky |
1 | Z-index for sticky action buttons |
| Variable | Default Value | Description |
|---|---|---|
$ml-transform-center-y |
translateY(-50%) | Transform for vertical centering |
$multiselect-toggle-rotate-angle |
180deg | Rotation angle for toggle when dropdown is open |
$multiselect-count-badge-hover-scale |
1.1 | Scale factor for count badge on hover |
$multiselect-active-scale |
0.98 | Scale factor for buttons when pressed |
| Variable | Default Value | Description |
|---|---|---|
$ml-border-width-base |
1px | Standard border width |
$ml-border-radius |
0.375rem | Standard border radius |
$ml-border-radius-sm |
0.25rem | Small border radius |
$ml-border-radius-full |
50% | Full border radius for circles |
$multiselect-option-focus-outline-offset |
-2px | Outline offset for focused options |
| Variable | Default Value | Description |
|---|---|---|
$multiselect-clear-icon |
'×' | Icon character for clear buttons |
$multiselect-remove-icon |
'×' | Icon character for remove buttons |
| Variable | Default Value | Description |
|---|---|---|
$ml-order-first |
-1 | Flex order value for positioning elements first |
| Variable | Default Value | Description |
|---|---|---|
$ml-shadow-md |
0 4px 6px -1px... | Medium shadow for hint popover |
$ml-shadow-xl |
0 20px 25px -5px... | Extra large shadow |
$multiselect-dropdown-shadow |
0 20px 25px -5px... | Shadow for dropdown and selected popover |
$ml-focus-outline-width |
2px | Width of focus outline |
| Variable | Default Value | Description |
|---|---|---|
$ml-transition-fast |
150ms | Fast transition duration |
$ml-transition-normal |
200ms | Normal transition duration |
$ml-easing-snappy |
cubic-bezier(0.4, 0.0, 0.2, 1) | Snappy easing function |
| Variable | Default Value | Description |
|---|---|---|
$multiselect-dropdown-max-height |
20rem | Maximum height of dropdown (can be overridden by maxHeight option) |
$multiselect-selected-popover-width |
20rem | Width of selected items popover |
These semantic variables provide an abstraction layer over primitive variables for easier component customization. Override these to style specific components without needing to know internal structure.
| Variable | Default Value | Description |
|---|---|---|
$ml-input-border-style |
$ml-border-width-base solid $ml-input-border | Complete border specification for input |
$ml-input-border-radius |
$ml-border-radius | Border radius for input |
$ml-input-font-size |
$ml-font-size-sm | Font size for input text |
$ml-input-padding |
$multiselect-input-padding-v $multiselect-input-padding-h | Padding for input field |
$ml-input-padding-right |
$multiselect-input-icon-spacing | Right padding to accommodate toggle icon |
$ml-input-placeholder-color |
$ml-text-secondary | Color for placeholder text |
$ml-input-bg-disabled |
rgba($ml-text-secondary, 0.05) | Background color for disabled input |
| Variable | Default Value | Description |
|---|---|---|
$ml-toggle-color |
$ml-text-secondary | Color for dropdown toggle icon |
$ml-toggle-right |
$multiselect-input-padding-h | Right position for toggle icon |
$ml-count-badge-bg |
$ml-accent-color | Background for count badge (in input) |
$ml-count-badge-color |
$ml-text-white | Text color for count badge |
$ml-count-badge-font-size |
$ml-font-size-xs | Font size for count badge |
$ml-count-badge-font-weight |
$ml-font-weight-semibold | Font weight for count badge |
$ml-count-badge-border-radius |
$ml-border-radius-sm | Border radius for count badge |
$ml-count-badge-padding |
$multiselect-count-badge-padding | Padding for count badge |
$ml-count-badge-bg-hover |
color.adjust($ml-accent-color, -10%) | Background for count badge on hover |
| Variable | Default Value | Description |
|---|---|---|
$ml-hint-bg |
$multiselect-hint-bg | Background for search hint popover |
$ml-hint-border |
$ml-border-width-base solid $multiselect-hint-border | Border for hint popover |
$ml-hint-border-radius |
$ml-border-radius | Border radius for hint |
$ml-hint-box-shadow |
$ml-shadow-md | Box shadow for hint |
$ml-hint-font-size |
$ml-font-size-xs | Font size for hint text |
$ml-hint-color |
$ml-text-secondary | Text color for hint |
$ml-hint-padding |
$multiselect-hint-padding | Padding for hint popover |
$ml-dropdown-bg |
$multiselect-dropdown-bg | Background for dropdown |
$ml-dropdown-border |
$ml-border-width-base solid $multiselect-dropdown-border | Border for dropdown |
$ml-dropdown-border-radius |
$ml-border-radius | Border radius for dropdown |
$ml-dropdown-box-shadow |
$multiselect-dropdown-shadow | Box shadow for dropdown |
$ml-dropdown-color |
$multiselect-dropdown-text | Text color for dropdown |
| Variable | Default Value | Description |
|---|---|---|
$ml-actions-gap |
$ml-spacing-xs | Gap between action buttons |
$ml-actions-padding |
$ml-spacing-sm | Padding for actions container |
$ml-actions-border-bottom |
$ml-border-width-base solid $ml-border-color | Bottom border for actions container |
$ml-actions-bg |
$multiselect-dropdown-bg | Background for sticky actions |
$ml-action-btn-padding |
$ml-spacing-xs $ml-spacing-sm | Padding for action buttons |
$ml-action-btn-font-size |
$ml-font-size-xs | Font size for action buttons |
$ml-action-btn-border |
$ml-border-width-base solid $ml-border-color | Border for action buttons |
$ml-action-btn-border-radius |
$ml-border-radius-sm | Border radius for action buttons |
$ml-action-btn-bg |
transparent | Background for action buttons |
$ml-action-btn-color |
inherit | Text color for action buttons |
$ml-action-btn-bg-hover |
$ml-primary-bg | Background on hover |
$ml-action-btn-border-color-hover |
$ml-accent-color | Border color on hover |
| Variable | Default Value | Description |
|---|---|---|
$ml-options-padding |
$ml-spacing-xs 0 | Padding for options container |
$ml-group-border-top |
$ml-border-width-base solid $ml-border-color | Top border between groups |
$ml-group-margin-top |
$ml-spacing-xs | Top margin between groups |
$ml-group-padding-top |
$ml-spacing-xs | Top padding for groups |
$ml-group-label-padding |
$ml-spacing-xs $multiselect-option-padding-h | Padding for group labels |
$ml-group-label-font-size |
$ml-font-size-xs | Font size for group labels |
$ml-group-label-font-weight |
$ml-font-weight-semibold | Font weight for group labels |
$ml-group-label-color |
$ml-text-secondary | Text color for group labels |
$ml-option-gap |
$ml-spacing-sm | Gap between checkbox and option content |
$ml-option-padding |
$multiselect-option-padding-v $multiselect-option-padding-h | Padding for individual options |
$ml-option-bg |
transparent | Background for options |
$ml-option-bg-hover |
$multiselect-option-hover-bg | Background on hover |
$ml-option-bg-focused |
$multiselect-option-hover-bg | Background when focused (keyboard) |
$ml-option-outline-focused |
$ml-focus-outline-width solid $ml-accent-color | Outline for focused option |
$ml-option-bg-selected |
rgba($ml-accent-color, 0.1) | Background for selected option |
$ml-option-content-gap |
$ml-spacing-sm | Gap between icon and text in option |
$ml-option-icon-font-size |
$ml-font-size-base | Font size for option icons |
$ml-option-title-font-size |
$ml-font-size-sm | Font size for option title |
$ml-option-title-color |
inherit | Text color for option title |
$ml-option-mark-bg |
rgba($ml-accent-color, 0.2) | Background for highlighted search matches |
$ml-option-mark-color |
inherit | Text color for highlighted matches |
$ml-option-mark-font-weight |
$ml-font-weight-semibold | Font weight for highlighted matches |
$ml-option-subtitle-margin-top |
$ml-spacing-xs | Top margin for option subtitle |
$ml-option-subtitle-font-size |
$ml-font-size-xs | Font size for option subtitle |
$ml-option-subtitle-color |
$ml-text-secondary | Text color for option subtitle |
$ml-empty-padding |
$ml-spacing-lg $multiselect-option-padding-h | Padding for empty state message |
$ml-empty-font-size |
$ml-font-size-sm | Font size for empty message |
$ml-empty-color |
$ml-text-secondary | Text color for empty message |
$ml-loader-padding |
$ml-spacing-lg | Padding for loader container |
$ml-loader-gap |
$ml-spacing-sm | Gap in loader layout |
$ml-loading-text-font-size |
$ml-font-size-sm | Font size for loading message |
$ml-loading-text-color |
$ml-text-secondary | Text color for loading message |
$ml-checkbox-margin-top |
$multiselect-checkbox-offset | Top margin for checkbox alignment |
| Variable | Default Value | Description |
|---|---|---|
$ml-badges-gap |
$multiselect-badge-gap | Gap between badges |
$ml-badges-margin-bottom |
$ml-spacing-sm | Top margin when badges are below input |
$ml-badges-margin-top |
$ml-spacing-sm | Bottom margin when badges are above input |
$ml-badges-margin-left |
$ml-spacing-sm | Right margin when badges are left of input |
$ml-badges-margin-right |
$ml-spacing-sm | Left margin when badges are right of input |
$ml-count-display-margin-bottom |
$ml-spacing-sm | Top margin when count is below input |
$ml-count-display-margin-top |
$ml-spacing-sm | Bottom margin when count is above input |
$ml-count-display-margin-left |
$ml-spacing-sm | Right margin when count is left of input |
$ml-count-display-margin-right |
$ml-spacing-sm | Left margin when count is right of input |
$ml-count-badge-wrapper-bg |
transparent | Background for count badge wrapper |
$ml-count-badge-wrapper-border |
$ml-border-width-base solid $ml-border-color | Border for count badge wrapper |
$ml-count-badge-wrapper-border-radius |
$ml-border-radius-sm | Border radius for wrapper |
$ml-count-badge-wrapper-padding |
$ml-spacing-xs $ml-spacing-sm | Padding for wrapper |
$ml-count-badge-wrapper-gap |
$ml-spacing-xs | Gap between count text and clear button |
$ml-count-badge-wrapper-bg-hover |
$multiselect-option-hover-bg | Background on hover |
$ml-count-badge-wrapper-border-color-hover |
$ml-accent-color | Border color on hover |
$ml-count-text-bg |
transparent | Background for count text |
$ml-count-text-border |
none | Border for count text |
$ml-count-text-font-size |
$ml-font-size-sm | Font size for count text |
$ml-count-text-color |
$ml-text-primary | Text color for count |
$ml-count-clear-bg |
transparent | Background for clear button |
$ml-count-clear-color |
$ml-text-secondary | Text color for clear button |
$ml-count-clear-font-size |
$ml-font-size-lg | Font size for clear button |
$ml-count-clear-border-radius |
$ml-border-radius-full | Border radius for clear button |
$ml-count-clear-bg-hover |
rgba($ml-accent-color, 0.2) | Background on hover |
$ml-count-clear-color-hover |
$ml-accent-color | Text color on hover |
| Variable | Default Value | Description |
|---|---|---|
$ml-badge-font-size |
$ml-font-size-xs | Font size for badge text |
$ml-badge-font-weight |
$ml-font-weight-semibold | Font weight for badge text |
$ml-badge-border-radius |
$ml-border-radius | Border radius for badge |
$ml-badge-text-padding |
0 $ml-spacing-sm | Padding for badge text label |
$ml-badge-text-bg |
$multiselect-badge-bg | Background for badge text |
$ml-badge-text-color |
$ml-accent-color | Text color for badge |
$ml-badge-remove-bg |
$ml-accent-color | Background for badge remove button |
$ml-badge-remove-color |
$ml-text-white | Text color for remove button |
$ml-badge-remove-border |
none | Border for remove button |
$ml-badge-remove-font-size |
$ml-font-size-xs | Font size for remove button |
$ml-badge-remove-bg-hover |
color.adjust($ml-accent-color, -10%) | Background on hover |
$ml-badge-remove-box-shadow-focus |
0 0 0 $ml-focus-outline-width rgba($ml-accent-color, 0.5) | Focus box shadow |
| Variable | Default Value | Description |
|---|---|---|
$ml-selected-popover-bg |
$multiselect-dropdown-bg | Background for selected items popover |
$ml-selected-popover-border |
$ml-border-width-base solid $multiselect-dropdown-border | Border for popover |
$ml-selected-popover-border-radius |
$ml-border-radius | Border radius for popover |
$ml-selected-popover-box-shadow |
$multiselect-dropdown-shadow | Box shadow for popover |
$ml-selected-popover-header-padding |
$ml-spacing-sm $ml-spacing-md | Padding for popover header |
$ml-selected-popover-header-bg |
rgba($ml-accent-color, 0.1) | Background for header |
$ml-selected-popover-header-border-bottom |
$ml-border-width-base solid $ml-border-color | Bottom border for header |
$ml-selected-popover-header-font-size |
$ml-font-size-sm | Font size for header |
$ml-selected-popover-header-font-weight |
$ml-font-weight-semibold | Font weight for header |
$ml-selected-popover-header-color |
$ml-text-primary | Text color for header |
$ml-selected-popover-close-bg |
transparent | Background for close button |
$ml-selected-popover-close-color |
$ml-text-secondary | Text color for close button |
$ml-selected-popover-close-font-size |
$ml-font-size-xl | Font size for close button |
$ml-selected-popover-close-border-radius |
$ml-border-radius-full | Border radius for close button |
$ml-selected-popover-close-bg-hover |
rgba($ml-accent-color, 0.2) | Background on hover |
$ml-selected-popover-close-color-hover |
$ml-accent-color | Text color on hover |
$ml-selected-popover-body-gap |
$ml-spacing-xs | Gap between badges in popover |
$ml-selected-popover-body-padding |
$ml-spacing-sm | Padding for popover body |
All CSS classes used by the component. Use these for custom styling or overrides.
| Class | Description |
|---|---|
.ml |
Main container element |
.ml--open |
Applied when dropdown is open |
.ml--disabled |
Applied when component is disabled |
.ml--no-checkboxes |
Applied when checkboxes are hidden or in single-select mode |
.ml--xs |
Extra small size variant |
.ml--sm |
Small size variant |
.ml--lg |
Large size variant |
.ml--xl |
Extra large size variant |
| Class | Description |
|---|---|
.ml__input-wrapper |
Container for input and toggle icon |
.ml__input |
Search input field |
.ml__toggle |
Dropdown toggle icon (arrow) |
.ml__counter |
Counter next to toggle icon (when showCounter is true) |
| Class | Description |
|---|---|
.ml__hint |
Search hint popover container |
.ml__hint--visible |
Applied when hint is visible |
| Class | Description |
|---|---|
.ml__dropdown |
Dropdown container |
.ml__dropdown--visible |
Applied when dropdown is visible |
.ml__actions |
Container for Select All/Clear All buttons |
.ml__actions--sticky |
Applied when actions should stick to top while scrolling |
.ml__action-btn |
Individual action button (Select All/Clear All) |
.ml__options |
Container for all options |
.ml__empty |
Empty state message container |
.ml__loader |
Loading state container |
.ml__loading-text |
Loading message text |
| Class | Description |
|---|---|
.ml__group |
Group container for grouped options |
.ml__group-label |
Group label/header |
.ml__option |
Individual option container |
.ml__option--focused |
Applied to keyboard-focused option |
.ml__option--selected |
Applied to selected options |
.ml__option--disabled |
Applied to disabled options |
.ml__checkbox |
Checkbox input element |
.ml__option-content |
Container for option content (icon + text) |
.ml__option-icon |
Option icon/emoji container |
.ml__option-text |
Container for option text (title + subtitle) |
.ml__option-title |
Option main label/title |
.ml__option-subtitle |
Option subtitle/description |
| Class | Description |
|---|---|
.ml__badges |
Container for selected item badges |
.ml__badges--top |
Badges positioned above input |
.ml__badges--bottom |
Badges positioned below input (default) |
.ml__badges--left |
Badges positioned to the left of input |
.ml__badges--right |
Badges positioned to the right of input |
.ml__badge |
Individual badge element |
.ml__badge-text |
Badge label text |
.ml__badge-remove |
Badge remove button (×) |
| Class | Description |
|---|---|
.ml__count-display |
Container for count display mode |
.ml__count-display--top |
Count positioned above input |
.ml__count-display--bottom |
Count positioned below input |
.ml__count-display--left |
Count positioned to the left of input |
.ml__count-display--right |
Count positioned to the right of input |
.ml__counter-wrapper |
Wrapper containing count text and clear button |
.ml__count-text |
Count text button (clickable to show popover) |
.ml__count-clear |
Clear all button in count display (×) |
| Class | Description |
|---|---|
.ml__selected-popover |
Popover showing selected items (in count mode) |
.ml__selected-popover--visible |
Applied when popover is visible |
.ml__selected-popover-header |
Popover header with title and close button |
.ml__selected-popover-close |
Close button in popover header |
.ml__selected-popover-body |
Scrollable body containing selected badges |