MultiSelect

ic.MultiSelect is a multi-value dropdown selector that displays chosen items as closable tags inside the input field. It provides a searchable dropdown with checkboxes, so users can pick multiple items from a list and see their selections at a glance. The built-in search input filters the dropdown as you type, and tags can be reordered with Shift+Arrow or removed with Backspace.

Variants

Variant controls the visual style of the input field. The primary variant has a visible border that works well on most backgrounds, while secondary uses a filled background with no border for a more subdued look in busy layouts.

Size

Size scales the input field, tags, and font together. Use sm for compact layouts such as toolbars, md for standard forms, and lg when the selector needs more visual weight or touch-friendliness.

Selection limits

MaxSelectedItems caps how many items the user can select. Once the limit is reached, remaining unchecked options appear dimmed and cannot be toggled. Setting Clearable to true adds an X button to the right side of the field that clears all selections at once, which is especially handy when the list is long.

Placeholder and disabled

Placeholder sets the ghost text that appears when nothing is selected. When Disabled is true the entire control is grayed out and cannot be interacted with.

Programmatic control

open and close toggle the dropdown from MATLAB without user interaction. clear removes all selections at once and fires ValueChanged with null.

Events

MultiSelect fires ValueChanged each time the user checks or unchecks an item, carrying the current selection as an array (or null when empty). Opened and Closed fire when the dropdown opens and closes. In MATLAB, attach listeners with addlistener and read the payload from evt.Data.value.

Custom styling

Every component exposes a .css property that lets you inject instance-level CSS directly from MATLAB. This example turns the tags into pills with rounded edges and a drop shadow, and adds a teal left-bar indicator on checked items in the dropdown.

ms = ic.MultiSelect( ...
    "Items", ["Critical", "Warning", "Info", "Debug"], ...
    "Clearable", true);

% Subtle inset field with soft border
ms.css.style(".ic-ms__field", ...
    "background_color", "#f0fafa", ...
    "border_color", "#b2dfdb", ...
    "box_shadow", "inset 0 2px 4px rgba(0,77,64,0.08)");

ms.css.style(".ic-ms__field--focused", ...
    "border_color", "#26a69a", ...
    "box_shadow", "inset 0 2px 6px rgba(0,77,64,0.14)");

% Colorful pill tags
ms.css.style(".ic-tag", ...
    "background_color", "#26a69a", ...
    "border_color", "#00897b", ...
    "color", "#ffffff", ...
    "border_radius", "12px", ...
    "box_shadow", "0 1px 3px rgba(0,77,64,0.25)");

ms.css.style(".ic-tag__remove:hover", ...
    "background_color", "rgba(255,255,255,0.25)", ...
    "color", "#ffffff");

% Teal left-bar on checked items
ms.css.style(".ic-ms__option--selected", ...
    "border_left", "3px solid #26a69a", ...
    "background_color", "rgba(38,166,154,0.08)");

ms.css.style(".ic-ms__checkbox--checked", ...
    "background_color", "#26a69a", ...
    "border_color", "#00897b");