Select

ic.Select is a single-value dropdown selector. It displays a trigger field that opens a scrollable dropdown list. The component supports search filtering, clearable selection, keyboard navigation, and validation states.

Variants

Variant controls the visual style of the trigger field. The primary variant has a visible border, while secondary uses a filled background with no visible border, giving it less visual weight in dense layouts.

Size

Size scales the trigger field and its text together. The three options are sm, md, and lg. The dropdown text scales accordingly.

Clearable and searchable

When Clearable is true, a small clear button appears in the trigger field after a value is selected, letting the user reset to “no selection.” When Searchable is true, the dropdown includes a text input at the top that filters the list as you type. Both features can be combined.

From MATLAB, open and close control the dropdown programmatically, and clear resets the selection (the same effect as the clearable X button, but triggered from code).

Validation

Setting Invalid to true highlights the trigger field in an error color. Pair it with ErrorMessage to show an explanation below the field. When not invalid, HelperText displays a neutral hint instead.

Popup height

MaxPopupHeight controls the maximum height (in pixels) of the dropdown list. When the items exceed this height the list becomes scrollable. The default is 200.

Events

Select fires three events. ValueChanged triggers when the user selects or clears a value, carrying the selected item (or null when cleared) in evt.Data.value. Opened and Closed fire when the dropdown opens and closes. In MATLAB, attach listeners with addlistener and read event data from evt.Data.

Custom styling

Every component exposes a .css property that lets you inject instance-level CSS directly from MATLAB. This example turns the trigger into a pill-shaped selector with a custom accent. Dropdown rows gain a colored left bar on hover, and the selected item shows an amber-to-orange gradient.

s = ic.Select("Items", ["Low", "Medium", "High"]);
s.Placeholder = "Priority...";

% Pill-shaped field with warm amber accent
s.css.style(".ic-select__field", ...
    "border_radius", "20px", ...
    "border_color", "#d97706", ...
    "border_width", "2px", ...
    "background_color", "#fffbeb", ...
    "padding", "0.4rem 0.75rem");

s.css.style(".ic-select__field--focused", ...
    "border_color", "#f59e0b", ...
    "box_shadow", "0 0 0 3px rgba(245, 158, 11, 0.2)");

% Rounded dropdown to match the pill shape
s.css.style(".ic-select__dropdown", ...
    "border_radius", "12px", ...
    "border_color", "#fbbf24", ...
    "overflow", "hidden");

% Colored left bar on hover rows
s.css.style(".ic-select__option--focused", ...
    "border_left", "3px solid #f59e0b", ...
    "background_color", "#fef3c7");

% Warm gradient on the selected row
s.css.style(".ic-select__option--selected", ...
    "background", "linear-gradient(90deg, #f59e0b, #ea580c)", ...
    "border_left", "3px solid #c2410c", ...
    "color", "#fff");