MultiSelectDropdown

A multi select dropdown component with optional search bar

Overrides

format_selected_text(self, count, total)

This method is called when the selection changes and should return a string.

The default implementation looks like:

from anvil_extras.MultiSelectDropDown import MultiSelectDropDown

def format_selected_text(self, count, total):
    if count > 3:
        return f"{count} items selected"
    return ", ".join(self.selected_keys)

You can change this by overriding this method.

You can override it globally by doing the following

from anvil_extras.MultiSelectDropDown import MultiSelectDropDown

def format_selected_text(self, count, total):
    if count > 2:
        return f"{count} items selected of {total}"
    return ", ".join(self.selected_keys)

MultiSelectDropdown.format_selected_text = format_selected_text

Alternatively you can change the count_selected_text method per multiselect instance

class Form1(Form1Template):
    def __init__(self, **properties):
        ...

        def format_selected_text(count, total):
            if count > 3:
                return f"{count} items selected"
            return ", ".join(self.multi_select_drop_down_1.selected_keys)

        self.multi_select_drop_down_1.format_selected_text = format_selected_text

Properties

align:

String

"left", "right", "center"

items:

Iterable of Strings, Tuples or Dicts

Strings and tuples as per Anvil’s native dropdown component. More control can be added by setting the items to a list of dictionaries. e.g.

self.multi_select_drop_down.items = [
    {"key": "1st", "value": 1, "subtext": "pick me"},
    {"key": "2nd", "value": 2, "enabled": False},
    "---",
    {"key": "item 3", "value": 3, "title": "3rd times a charm"},
]

The "key" property is what is displayed in the dropdown. The value property is what is returned from the selected_values.

The remainder of the properties are optional.

"enabled" determines if the option is enabled or not - defaults to True.

"title" determines what is displayed in the selected box - if not set it will use the value from "key".

"subtext" adds subtext to the dropdown display.

To create a divider include "---" at the appropriate index.

placeholder:

String

Placeholder when no items have been selected

enable_filtering:

Boolean

Allow searching of items by key

multiple:

Boolean

Can also be set to false to disable multiselect

enabled:

Boolean

Disable interactivity

visible:

Boolean

Is the component visible

width:

String | Number

The default width is 200px. This can be set using any css length. Alternatively set the width to be "auto", which will adjust the width to be as wide as the largest option. "fit" (or "fit-content") will size the dropdown depending on what is selected. Use width "100%"" to make the dropdown fill its container.

spacing_above:

String

One of "none", "small", "medium", "large"

spacing_below:

String

One of "none", "small", "medium", "large"

selected:

Object

get or set the current selected values.

enable_select_all:

Boolean

Enable Select All and Deselect All buttons.

background:

String

Sets the button and popover background color. Note that this property only affects the basic button appearance and may not provide the visual consistency needed for complex themes. For more fine-grained control over all styling aspects including hover states, active states, and popover appearance, see the Styling section.

foreground:

String

Sets the button text color. For more fine-grained control over all styling aspects including hover states, active states, and options appearance, see the Styling section.

Events

change:

When the selection changes

opened:

When the dropdown is opened

closed:

When the dropdown is closed

show:

When the component is shown

hide:

When the component is hidden

Styling

The following CSS variables can be overridden in your theme.css to style the multi select dropdown.

Button Styling:

For button text and background colors and other styling, use CSS selectors to ensure proper cascade behavior:

/* Style the button directly using CSS selectors */
.anvil-role-ae-ms-btn > button {
    color: #333333;
    background-color: #ffffff;
}

.anvil-role-ae-ms-btn > button:hover {
    color: #000000;
    background-color: #f8f9fa;
}

.anvil-role-ae-ms-btn > button:active:focus,
.anvil-role-ae-ms-btn > button:focus,
.anvil-role-ae-ms-btn > button:active {
    color: #000000;
    background-color: #e9ecef;
}

Note: Avoid using CSS variables for text colors as they can override your global button styles. Use direct CSS selectors instead to maintain proper CSS cascade behavior.

Option Styling:

:root {
    /* Option text colors */
    --ae-ms-option-text: #333333;
    --ae-ms-option-text-active: #fff;

    /* Option background colors */
    --ae-ms-option-bg-hover: #e8e8e8;
    --ae-ms-option-bg-active: #337ab7;

    /* Subtext colors */
    --ae-ms-option-subtext: #777;
    --ae-ms-option-subtext-active: rgba(255,255,255,.5);
}

Popover Styling:

The MultiSelectDropDown uses a popover with the class ae-ms-popover for specific targeting. You can style the popover background using CSS variables or direct CSS:

/* Target only MultiSelectDropDown popovers using CSS variables */
.ae-popover.ae-ms-popover {
    --ae-popover-bg: #ffffff;
    --ae-popover-border: rgba(0, 0, 0, 0.2);
    --ae-popover-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}

/* Or style directly with CSS */
.ae-popover.ae-ms-popover {
    background-color: #f8f9fa;
    color: #212529;
    border-color: #dee2e6;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

CSS Roles:

The following roles can be used for additional styling:

.anvil-role-ae-ms-btn {}
.anvil-role-ae-ms-select-btn {}
.anvil-role-ae-ms-filter {}
.anvil-role-ae-ms-option {}
.anvil-role-ae-ms-option-active {}
.anvil-role-ae-ms-option-label {}
.anvil-role-ae-ms-option-subtext {}

For general popover styling that affects all popovers, see the Popover styling guide.