SearchBar

ic.SearchBar is a tag-based search input. The user types text and it converts into tags when a separator character is pressed, building up a list of search terms. Tags can optionally display icons based on prefix triggers, so you can define prefixes like : for folders or @ for files and the corresponding icon appears automatically in the tag pill.

Separator and clear button

Separator is the character that commits the current text as a tag. The default is a comma, but you can change it to a semicolon, space, or any other character that makes sense for your use case. When Clearable is enabled, a small X button appears on the right side of the field whenever there are tags or text, letting the user remove everything in one click.

From MATLAB, clear removes all tags and input text at once (the programmatic equivalent of clicking the X button).

Variants

Variant controls the visual style of the field. The primary variant shows a bordered input on the default background, while secondary uses a filled background with no visible border, which works well when the search bar sits on a panel or card that already has its own border.

Size and placeholder

Size scales the field height, font size, and tag pills together. The Placeholder text appears when there are no tags and the input is empty, giving the user a hint about what to type.

Icon triggers

IconTriggers is a map from prefix strings to Lucide icon names. When a tag starts with one of the prefixes, the prefix is stripped from the displayed label and the matching icon is shown instead. This is useful for building search inputs where different prefixes indicate different categories of filter, like : for folders, @ for files, or ~ for exclusions.

Events

SearchBar fires ValueChanged whenever the tag list changes (a tag is added, removed, or reordered) and Submitted when the user presses Enter. Both events carry the current tag list in their payload. Tags can be navigated with arrow keys, reordered with Shift+Arrow, and removed with Backspace or Delete when focused.

Custom styling

Every component exposes a .css property that lets you inject instance-level CSS directly from MATLAB. This example targets .ic-sb__field for the container, .ic-tag for the tag pills, and .ic-sb__search-icon for the magnifying glass.

sb = ic.SearchBar("Placeholder", "Spotlight Search...", ...
    "Clearable", true, "Size", "lg");

% Pill-shaped white field with soft shadow
sb.css.style(".ic-sb__field", ...
    "background_color", "#ffffff", ...
    "border", "1px solid #d1d5db", ...
    "border_radius", "24px", ...
    "box_shadow", "inset 0 2px 6px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.04)", ...
    "padding", "0.625rem 1rem");

% Vivid purple ring on focus
sb.css.style(".ic-sb__field--focused", ...
    "border_color", "#7c3aed", ...
    "box_shadow", "inset 0 2px 6px rgba(0,0,0,0.06), 0 0 0 3px rgba(124,58,237,0.2)");

% Purple-tinted search icon
sb.css.style(".ic-sb__search-icon", ...
    "color", "#7c3aed", ...
    "opacity", "0.7");

% Pastel purple badge tags
sb.css.style(".ic-tag", ...
    "background_color", "#ede9fe", ...
    "border", "1px solid #ddd6fe", ...
    "border_radius", "12px", ...
    "color", "#7c3aed");

% Dark text in the input
sb.css.style(".ic-sb__input", ...
    "color", "#1f2937");