MultiComboInput — Smart UI JavaScript API

MultiComboInput — Smart UI JavaScript API

On this page + Quick start

Quick start · JavaScript

Complete starter source per framework. Run the scaffold/install command first, then replace the listed files with the full code below.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>MultiComboInput - JavaScript Quick Start</title>
  <link rel="stylesheet" href="./node_modules/smart-webcomponents/source/styles/smart.default.css" />
</head>
<body>
  <smart-multi-combo-input id="demo-multicomboinput"></smart-multi-combo-input>

  <script type="module">
    import './node_modules/smart-webcomponents/source/modules/smart.multicomboinput.js';

    const el = document.getElementById('demo-multicomboinput');
    if (el) {

      el.dataSource = ['Tag: UI', 'Tag: Docs', 'Tag: Grid', 'Tag: API'];
      el.value = 'Tag: UI, Tag: API';

      el.addEventListener('change', (event) => console.log('change:', event.detail || event));
    }
  </script>
</body>
</html>
For AI tooling

Developer Quick Reference

Component: MultiComboInput   Framework: JavaScript   Selector: smart-multi-combo-input

API counts: 35 properties, 4 methods, 1 events

Common properties: 0, 1, 2, 3, 4, 5

Common methods: close(), ensureVisible(), open(), select()

Common events: change

Module hint: smart-webcomponents/source/modules/smart.multicomboinput.js

MultiComboInput specifies an input field where the user can enter data. Auto-complete options with checkbxoes are displayed for easier input. Allows multiple selection. Selected items are added to the input field as tags.

Class

MultiComboInput

MultiComboInput

MultiComboInput specifies an input field where the user can enter data. Auto-complete options with checkbxoes are displayed for easier input. Allows multiple selection. Selected items are added to the input field as tags.

Selector

smart-multi-combo-input

Quick picks

changeclosedataSourcedisableditemsopenvalue

Properties

AanimationSets or retrieves the animation mode for the element. When the property is set to 'none', all animations are disabled, and any ongoing or future animations will not be executed. For any other value, the corresponding animation behavior will be applied based on the specified mode.
AautoCompleteDelaySpecifies the amount of time, in milliseconds, to wait before displaying the dropdown menu that shows matching suggestions from the autocomplete operation. This delay begins after the user stops typing, allowing for smoother user experience and reducing unnecessary searches.
CcolorItemsControls whether the background color of an item's tag is automatically set to match the value specified in the item's 'color' property. When enabled, if an item has a 'color' property defined, its tag background will automatically use that color. When disabled, the tag background will not be affected by the 'color' property.
DdataSourceSpecifies the source of data to be displayed in the MultiInput component. The dataSource can accept multiple formats:- An array of strings or numbers, where each entry is used as both the display value and the selection value of a list item.- An array of objects, where each object represents a list item. The object’s attributes (such as label and value) define the display text and internal value of each item.- A callback function that returns an array in either of the formats listed above.Use this property to flexibly provide static data or implement dynamic data loading for the MultiInput component.
DdisabledSpecifies whether the element is interactive or inactive. When enabled, users can interact with the element; when disabled, the element is non-interactive and typically rendered with a visually distinct, disabled appearance.
DdropDownButtonPositionSpecifies the alignment or placement of the dropdown button relative to its parent element or container, such as positioning it to the left, right, center, or at a custom location within the interface. This property controls where the dropdown button will appear within its context.
DdropDownHeightSpecifies the height of the dropdown menu. By default, this property is set to an empty string, which means the dropdown’s height is determined by a corresponding CSS variable rather than a fixed value. If a specific height value is provided, it will override the CSS variable and directly set the dropdown’s height.
DdropDownWidthSpecifies the width of the dropdown menu. By default, this property is set to an empty string, which means the dropdown's width will be determined by the corresponding CSS variable (typically a custom property defined in your stylesheet). You can override this behavior by providing a specific width value (such as "200px", "50%", etc.), which will directly set the dropdown's width instead of relying on the CSS variable.
HhideInputTagsCloseButtonControls the visibility of close buttons when multiple items are selected. If enabled, close buttons will be displayed for each selected item, allowing users to remove individual items. If disabled, close buttons will be hidden, preventing users from removing selected items individually.
IinputPurposeSpecifies the expected type of information for the input element—such as a user's name, email, or address—and guides the browser on how to provide relevant autofill suggestions when the element is used within a form. This property maps directly to the standard HTML autocomplete attribute. By setting values like 'on', 'off', 'name', 'email', 'organization', or 'street-address', you can instruct the browser on whether, and how, to assist the user with automated form filling. Proper use of this property enhances both the accuracy and security of autofill features, as well as improving the overall user experience.
IinputTagsModeSpecifies how selected items are displayed in the input field: either as individual tags for each selected item from the popup, or as a single tag that displays the total number of items selected.
IitemsSpecifies the maximum number of matching items to display in the dropdown menu when a new autoComplete query is performed. By default, up to 8 items will be visible in the dropdown at any one time. If more matches are found, only the first 8 will be shown, while additional results can be accessed through scrolling or pagination, depending on the implementation.
LlocaleSpecifies or retrieves the current language setting. This property works together with the messages property to display content or interface text in the selected language. When the language is set, the corresponding messages from the messages object will be used for localization.
LlocalizeFormatFunctionA callback function that allows you to define a custom formatting for messages returned by the Localization Module, enabling you to modify message content, structure, or presentation before they are displayed or processed by your application.
MmessagesSpecifies or retrieves an object containing strings used for localization within the widget. This property allows you to define custom, translatable text for various user interface elements, ensuring that the widget can display content in different languages. It is used in combination with the locale property to adapt the widget's text to the selected language or regional setting.
MminLengthSpecifies the minimum number of characters a user must enter into the input field before the autocomplete feature activates. Once this threshold is reached, the dropdown will open and display a list of items that match the entered text.
NnameSets or retrieves the value of the element's name attribute. The name attribute uniquely identifies form elements when data is submitted to the server, enabling key-value pairs to be correctly processed. This is essential in HTML forms to ensure each input's data is associated with its corresponding name.
OopenedSpecifies whether the dropdown menu is currently open (visible) or closed (hidden).
PpillsControls whether the items in the drop-down menu are visually displayed as pill-shaped elements. When enabled, each item will have a rounded, pill-like appearance. When disabled, items will use the default style.
PplaceholderSpecifies the placeholder text displayed inside the input field when it is empty, providing a hint or example of the expected input value to the user.
QqueryDefines or retrieves the search query used to filter items in the data source. This query is utilized by the autoComplete operation to determine which items are displayed based on user input. If the value is set to an empty string, all items from the data source are shown and no filtering is applied.
QqueryModeSpecifies the autocomplete query mode, which defines how user input is matched against available options during the autocomplete operation. This property selects the matching algorithm used to filter and suggest results based on the entered query, such as prefix matching, exact matching, or fuzzy searching.
RreadonlyDetermines whether the user can enter or edit text within the input field. When the dropDownButtonPosition property is set to either 'left' or 'right', the readonly property controls the component's behavior when a dataSource is provided: - If readonly is false, the element functions as a ComboBox, allowing users to type custom values as well as select from the list.- If readonly is true, the element behaves as a DropDownList, restricting the user to select only from the available options without the ability to enter custom text.
RrightToLeftConfigures or retrieves the value that determines whether the element's alignment is adjusted to support right-to-left (RTL) languages and scripts, such as Arabic or Hebrew. When enabled, the element's layout and text direction are oriented to accommodate RTL reading order for proper localization.
SselectAllControls the display of an extra option at the top of the options list, which enables users to select or deselect all items with a single action. When enabled, this option appears as the first item, providing a convenient way to manage the entire selection at once.
SselectedValuesGets or sets an array containing the currently selected values. This property allows you to retrieve the list of selected items or update the selection by assigning a new array of values. Each value in the array corresponds to an item that has been selected.
SseparatorSpecifies the character or string used to separate individual tags within the input field. This delimiter defines how the input is parsed into distinct tags when users enter multiple values.
SsingleSelectSpecifies if selection is restricted to a single item at a time, preventing users from selecting multiple items simultaneously.
SsortDirectionSpecifies the sorting algorithm to be used when sort is enabled. Accepts either asc for ascending order or desc for descending order, determining how the data will be organized.
SsortedSpecifies whether the items are arranged in alphabetical order. If set to true, the items will be sorted from A to Z; if false, the original order will be preserved.
TthemeSpecifies the visual theme to apply to the element. The selected theme controls the element’s overall appearance, including colors, fonts, and styles, ensuring consistency with the application's design scheme.
TtypeSpecifies the type of input that the field accepts, such as text, email, password, number, or date. The selected input type defines both the format of data that can be entered by the user and the behavior of the input field, including related validation and the appearance of the on-screen keyboard (on supported devices).
UunfocusableWhen set to true, this property prevents the element from receiving keyboard focus. As a result, users will not be able to navigate to the element using the Tab key or other keyboard navigation methods.
UunlockKeyGets or sets the 'unlockKey' property, which is a unique code required to activate or unlock the product's full features. Use this key to enable product access or retrieve the current key assigned to the product.
VvalueSets or retrieves the current value of the element. When used as a setter, it assigns the specified value to the element (such as updating the text in an input field or the selected option in a dropdown). When used as a getter, it returns the element’s current value.

Events

CchangeThis event is triggered whenever the user modifies the current selection, such as highlighting different text or choosing a new option within a selectable element. It enables you to respond programmatically to changes in the selected content or options.

Methods

CcloseCloses the dropdown menu by hiding its content and updating its state to indicate that it is no longer visible or active.
EensureVisibleGuarantees that the currently selected item remains within the visible area of the container, automatically scrolling as needed to bring the active item into view whenever selection changes.
OopenDisplays the dropdown menu, allowing users to view and select available options.
SselectSelects all the text within the input field. If the input field is set to readonly, the method will focus the element instead, since text selection is not allowed for readonly inputs.

Properties

animationSets or retrieves the animation mode for the element. When the property is set to 'none', all animations are disabled, and any ongoing or future animations will not be executed. For any other value, the corresponding animation behavior will be applied based on the specified mode."none" | "simple" | "advanced"

Sets or retrieves the animation mode for the element. When the property is set to 'none', all animations are disabled, and any ongoing or future animations will not be executed. For any other value, the corresponding animation behavior will be applied based on the specified mode.

Allowed Values

  • "none" - animation is disabled
  • "simple" - ripple animation is disabled
  • "advanced" - all animations are enabled

Default value

"advanced"

Examples

Markup and runtime examples for animation:

HTML:

<smart-multi-combo-input animation="none"></smart-multi-combo-input>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-multi-combo-input');
el.animation = "simple";

Read the current value:

const el = document.querySelector('smart-multi-combo-input');
const animation = el.animation;

autoCompleteDelaySpecifies the amount of time, in milliseconds, to wait before displaying the dropdown menu that shows matching suggestions from the autocomplete operation. This delay begins after the user stops typing, allowing for smoother user experience and reducing unnecessary searches.number

Specifies the amount of time, in milliseconds, to wait before displaying the dropdown menu that shows matching suggestions from the autocomplete operation. This delay begins after the user stops typing, allowing for smoother user experience and reducing unnecessary searches.

Default value

100

Examples

Markup and runtime examples for autoCompleteDelay:

HTML:

<smart-multi-combo-input auto-complete-delay="50"></smart-multi-combo-input>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-multi-combo-input');
el.autoCompleteDelay = 200;

Read the current value:

const el = document.querySelector('smart-multi-combo-input');
const autoCompleteDelay = el.autoCompleteDelay;

colorItemsControls whether the background color of an item's tag is automatically set to match the value specified in the item's 'color' property. When enabled, if an item has a 'color' property defined, its tag background will automatically use that color. When disabled, the tag background will not be affected by the 'color' property.boolean

Controls whether the background color of an item's tag is automatically set to match the value specified in the item's 'color' property. When enabled, if an item has a 'color' property defined, its tag background will automatically use that color. When disabled, the tag background will not be affected by the 'color' property.

Default value

true
Try a demo showcasing the colorItems property.

Examples

Markup and runtime examples for colorItems:

HTML attribute:

<smart-multi-combo-input color-items></smart-multi-combo-input>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-multi-combo-input');
el.colorItems = false;

Read the current value:

const el = document.querySelector('smart-multi-combo-input');
const colorItems = el.colorItems;

dataSourceSpecifies the source of data to be displayed in the MultiInput component. The dataSource can accept multiple formats:- An array of strings or numbers, where each entry is used as both the display value and the selection value of a list item.- An array of objects, where each object represents a list item. The object’s attributes (such as label and value) define the display text and internal value of each item.- A callback function that returns an array in either of the formats listed above.Use this property to flexibly provide static data or implement dynamic data loading for the MultiInput component.any

Specifies the source of data to be displayed in the MultiInput component. The dataSource can accept multiple formats:

- An array of strings or numbers, where each entry is used as both the display value and the selection value of a list item.
- An array of objects, where each object represents a list item. The object’s attributes (such as label and value) define the display text and internal value of each item.
- A callback function that returns an array in either of the formats listed above.

Use this property to flexibly provide static data or implement dynamic data loading for the MultiInput component.

Try a demo showcasing the dataSource property.

Examples

Markup and runtime examples for dataSource:

HTML:

<smart-multi-combo-input data-source="[{ label: "item 1", value: 1 }, { label: "item 2", value: 2 }]"></smart-multi-combo-input>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-multi-combo-input');
el.dataSource = ["new item 1", "new item 2"];

Read the current value:

const el = document.querySelector('smart-multi-combo-input');
const dataSource = el.dataSource;

disabledSpecifies whether the element is interactive or inactive. When enabled, users can interact with the element; when disabled, the element is non-interactive and typically rendered with a visually distinct, disabled appearance.boolean

Specifies whether the element is interactive or inactive. When enabled, users can interact with the element; when disabled, the element is non-interactive and typically rendered with a visually distinct, disabled appearance.

Default value

false
Try a demo showcasing the disabled property.

Examples

Markup and runtime examples for disabled:

HTML attribute:

<smart-multi-combo-input disabled></smart-multi-combo-input>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-multi-combo-input');
el.disabled = false;

Read the current value:

const el = document.querySelector('smart-multi-combo-input');
const disabled = el.disabled;

dropDownButtonPositionSpecifies the alignment or placement of the dropdown button relative to its parent element or container, such as positioning it to the left, right, center, or at a custom location within the interface. This property controls where the dropdown button will appear within its context."none" | "left" | "right"

Specifies the alignment or placement of the dropdown button relative to its parent element or container, such as positioning it to the left, right, center, or at a custom location within the interface. This property controls where the dropdown button will appear within its context.

Allowed Values

  • "none" - The drop down button is hidden and the element acts as a simple input.
  • "left" - A drop down button is displayed on the left side of the element. The element acts as a DropDownList or a ComboBox depending on the readonly property.
  • "right" - A drop down button is displayed on the right side of the element. The element acts as a DropDownList or a ComboBox depending on the readonly property.

Default value

"right"
Try a demo showcasing the dropDownButtonPosition property.

Examples

Markup and runtime examples for dropDownButtonPosition:

HTML:

<smart-multi-combo-input drop-down-button-position="top"></smart-multi-combo-input>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-multi-combo-input');
el.dropDownButtonPosition = "bottom";

Read the current value:

const el = document.querySelector('smart-multi-combo-input');
const dropDownButtonPosition = el.dropDownButtonPosition;

dropDownHeightSpecifies the height of the dropdown menu. By default, this property is set to an empty string, which means the dropdown’s height is determined by a corresponding CSS variable rather than a fixed value. If a specific height value is provided, it will override the CSS variable and directly set the dropdown’s height.string | number

Specifies the height of the dropdown menu. By default, this property is set to an empty string, which means the dropdown’s height is determined by a corresponding CSS variable rather than a fixed value. If a specific height value is provided, it will override the CSS variable and directly set the dropdown’s height.

Default value

""

Examples

Markup and runtime examples for dropDownHeight:

HTML:

<smart-multi-combo-input drop-down-height="300"></smart-multi-combo-input>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-multi-combo-input');
el.dropDownHeight = 500;

Read the current value:

const el = document.querySelector('smart-multi-combo-input');
const dropDownHeight = el.dropDownHeight;

dropDownWidthSpecifies the width of the dropdown menu. By default, this property is set to an empty string, which means the dropdown's width will be determined by the corresponding CSS variable (typically a custom property defined in your stylesheet). You can override this behavior by providing a specific width value (such as "200px", "50%", etc.), which will directly set the dropdown's width instead of relying on the CSS variable.string | number

Specifies the width of the dropdown menu. By default, this property is set to an empty string, which means the dropdown's width will be determined by the corresponding CSS variable (typically a custom property defined in your stylesheet). You can override this behavior by providing a specific width value (such as "200px", "50%", etc.), which will directly set the dropdown's width instead of relying on the CSS variable.

Default value

""

Examples

Markup and runtime examples for dropDownWidth:

HTML:

<smart-multi-combo-input drop-down-width="300"></smart-multi-combo-input>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-multi-combo-input');
el.dropDownWidth = 500;

Read the current value:

const el = document.querySelector('smart-multi-combo-input');
const dropDownWidth = el.dropDownWidth;

hideInputTagsCloseButtonControls the visibility of close buttons when multiple items are selected. If enabled, close buttons will be displayed for each selected item, allowing users to remove individual items. If disabled, close buttons will be hidden, preventing users from removing selected items individually.boolean

Controls the visibility of close buttons when multiple items are selected. If enabled, close buttons will be displayed for each selected item, allowing users to remove individual items. If disabled, close buttons will be hidden, preventing users from removing selected items individually.

Default value

false
Try a demo showcasing the hideInputTagsCloseButton property.

Examples

Markup and runtime examples for hideInputTagsCloseButton:

HTML attribute:

<smart-multi-combo-input hide-input-tags-close-button></smart-multi-combo-input>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-multi-combo-input');
el.hideInputTagsCloseButton = false;

Read the current value:

const el = document.querySelector('smart-multi-combo-input');
const hideInputTagsCloseButton = el.hideInputTagsCloseButton;

inputPurposeSpecifies the expected type of information for the input element—such as a user's name, email, or address—and guides the browser on how to provide relevant autofill suggestions when the element is used within a form. This property maps directly to the standard HTML autocomplete attribute. By setting values like 'on', 'off', 'name', 'email', 'organization', or 'street-address', you can instruct the browser on whether, and how, to assist the user with automated form filling. Proper use of this property enhances both the accuracy and security of autofill features, as well as improving the overall user experience.string

Specifies the expected type of information for the input element—such as a user's name, email, or address—and guides the browser on how to provide relevant autofill suggestions when the element is used within a form. This property maps directly to the standard HTML autocomplete attribute. By setting values like 'on', 'off', 'name', 'email', 'organization', or 'street-address', you can instruct the browser on whether, and how, to assist the user with automated form filling. Proper use of this property enhances both the accuracy and security of autofill features, as well as improving the overall user experience.

Default value

"off"

Examples

Markup and runtime examples for inputPurpose:

HTML:

<smart-multi-combo-input input-purpose="on"></smart-multi-combo-input>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-multi-combo-input');
el.inputPurpose = "country";

Read the current value:

const el = document.querySelector('smart-multi-combo-input');
const inputPurpose = el.inputPurpose;

inputTagsModeSpecifies how selected items are displayed in the input field: either as individual tags for each selected item from the popup, or as a single tag that displays the total number of items selected."one" | "many"

Specifies how selected items are displayed in the input field: either as individual tags for each selected item from the popup, or as a single tag that displays the total number of items selected.

Allowed Values

  • "one" - The input field will contain a single tag that shows the number of selected items.
  • "many" - The input field will contain tags for each selected item from the popup.

Default value

"many"

Examples

Markup and runtime examples for inputTagsMode:

HTML:

<smart-multi-combo-input input-tags-mode="one"></smart-multi-combo-input>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-multi-combo-input');
el.inputTagsMode = "many";

Read the current value:

const el = document.querySelector('smart-multi-combo-input');
const inputTagsMode = el.inputTagsMode;

itemsSpecifies the maximum number of matching items to display in the dropdown menu when a new autoComplete query is performed. By default, up to 8 items will be visible in the dropdown at any one time. If more matches are found, only the first 8 will be shown, while additional results can be accessed through scrolling or pagination, depending on the implementation.number

Specifies the maximum number of matching items to display in the dropdown menu when a new autoComplete query is performed. By default, up to 8 items will be visible in the dropdown at any one time. If more matches are found, only the first 8 will be shown, while additional results can be accessed through scrolling or pagination, depending on the implementation.

Default value

8

Examples

Markup and runtime examples for items:

HTML:

<smart-multi-combo-input items="2"></smart-multi-combo-input>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-multi-combo-input');
el.items = 5;

Read the current value:

const el = document.querySelector('smart-multi-combo-input');
const items = el.items;

localeSpecifies or retrieves the current language setting. This property works together with the messages property to display content or interface text in the selected language. When the language is set, the corresponding messages from the messages object will be used for localization.string

Specifies or retrieves the current language setting. This property works together with the messages property to display content or interface text in the selected language. When the language is set, the corresponding messages from the messages object will be used for localization.

Default value

"en"

Examples

Markup and runtime examples for locale:

HTML:

<smart-multi-combo-input locale="de"></smart-multi-combo-input>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-multi-combo-input');
el.locale = "en";

Read the current value:

const el = document.querySelector('smart-multi-combo-input');
const locale = el.locale;

localizeFormatFunctionA callback function that allows you to define a custom formatting for messages returned by the Localization Module, enabling you to modify message content, structure, or presentation before they are displayed or processed by your application.function

A callback function that allows you to define a custom formatting for messages returned by the Localization Module, enabling you to modify message content, structure, or presentation before they are displayed or processed by your application.

Examples

Markup and runtime examples for localizeFormatFunction:

HTML:

<smart-multi-combo-input localize-format-function="function(defaultMessage, message, messageArguments){return '...'}"></smart-multi-combo-input>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-multi-combo-input');
el.localizeFormatFunction = "function(defaultMessage, message, messageArguments){return '...'}";

Read the current value:

const el = document.querySelector('smart-multi-combo-input');
const localizeFormatFunction = el.localizeFormatFunction;

messagesSpecifies or retrieves an object containing strings used for localization within the widget. This property allows you to define custom, translatable text for various user interface elements, ensuring that the widget can display content in different languages. It is used in combination with the locale property to adapt the widget's text to the selected language or regional setting.object

Specifies or retrieves an object containing strings used for localization within the widget. This property allows you to define custom, translatable text for various user interface elements, ensuring that the widget can display content in different languages. It is used in combination with the locale property to adapt the widget's text to the selected language or regional setting.

Default value




"en": {

"propertyUnknownType": "'{{name}}' property is with undefined 'type' member!",

"propertyInvalidValue": "Invalid '{{name}}' property value! Actual value: {{actualValue}}, Expected value: {{value}}!",

"propertyInvalidValueType": "Invalid '{{name}}' property value type! Actual type: {{actualType}}, Expected type: {{type}}!",

"elementNotInDOM": "Element does not exist in DOM! Please, add the element to the DOM, before invoking a method.",

"moduleUndefined": "Module is undefined.",

"missingReference": "{{elementType}}: Missing reference to {{files}}.",

"htmlTemplateNotSuported": "{{elementType}}: Browser doesn't support HTMLTemplate elements.",

"invalidTemplate": "{{elementType}}: '{{property}}' property accepts a string that must match the id of an HTMLTemplate element from the DOM.",

"invalidNode": "{{elementType}}: Invalid parameter '{{node}}' when calling {{method}}."

}

Examples

Markup and runtime examples for messages:

HTML:

<smart-multi-combo-input messages="{"de":{"propertyUnknownType":"Die Eigenschaft '{{name}}' hat ein nicht definiertes 'type'-Member!","propertyInvalidValue":"Ungultiger Eigenschaftswert '{{name}}'! Aktueller Wert: {{actualValue}}, Erwarteter Wert: {{value}}!","propertyInvalidValueType":"Ungultiger Eigenschaftswert '{{name}}'! Aktueller Wert: {{actualType}}, Erwarteter Wert: {{type}}!","elementNotInDOM":"Element existiert nicht in DOM! Bitte fugen Sie das Element zum DOM hinzu, bevor Sie eine Methode aufrufen.","moduleUndefined":"Modul ist nicht definiert.","missingReference":"{{elementType}}: Fehlender Verweis auf {{files}}.","htmlTemplateNotSuported":"{{elementType}}: Browser unterstutzt keine HTMLTemplate-Elemente.","invalidTemplate":"{{elementType}}: '{{property}}' Die Eigenschaft akzeptiert eine Zeichenfolge, die mit der ID eines HTMLTemplate-Elements aus dem DOM ubereinstimmen muss.","invalidNode":"{{elementType}}: Ungultiger Parameter '{{node}}' beim Aufruf von {{method}}."}}"></smart-multi-combo-input>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-multi-combo-input');
el.messages = {"en":{"propertyUnknownType":"'{{name}}' property is with undefined 'type' member!","propertyInvalidValue":"Invalid '{{name}}' property value! Actual value: {{actualValue}}, Expected value: {{value}}!","propertyInvalidValueType":"Invalid '{{name}}' property value type! Actual type: {{actualType}}, Expected type: {{type}}!","elementNotInDOM":"Element does not exist in DOM! Please, add the element to the DOM, before invoking a method.","moduleUndefined":"Module is undefined.","missingReference":"{{elementType}}: Missing reference to {{files}}.","htmlTemplateNotSuported":"{{elementType}}: Browser doesn't support HTMLTemplate elements.","invalidTemplate":"{{elementType}}: '{{property}}' property accepts a string that must match the id of an HTMLTemplate element from the DOM.","invalidNode":"{{elementType}}: Invalid parameter '{{node}}' when calling {{method}}."}};

Read the current value:

const el = document.querySelector('smart-multi-combo-input');
const messages = el.messages;

minLengthSpecifies the minimum number of characters a user must enter into the input field before the autocomplete feature activates. Once this threshold is reached, the dropdown will open and display a list of items that match the entered text.number

Specifies the minimum number of characters a user must enter into the input field before the autocomplete feature activates. Once this threshold is reached, the dropdown will open and display a list of items that match the entered text.

Default value

1

Examples

Markup and runtime examples for minLength:

HTML:

<smart-multi-combo-input min-length="2"></smart-multi-combo-input>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-multi-combo-input');
el.minLength = 0;

Read the current value:

const el = document.querySelector('smart-multi-combo-input');
const minLength = el.minLength;

nameSets or retrieves the value of the element's name attribute. The name attribute uniquely identifies form elements when data is submitted to the server, enabling key-value pairs to be correctly processed. This is essential in HTML forms to ensure each input's data is associated with its corresponding name.string

Sets or retrieves the value of the element's name attribute. The name attribute uniquely identifies form elements when data is submitted to the server, enabling key-value pairs to be correctly processed. This is essential in HTML forms to ensure each input's data is associated with its corresponding name.

Default value

""

Examples

Markup and runtime examples for name:

HTML:

<smart-multi-combo-input name="dropdown"></smart-multi-combo-input>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-multi-combo-input');
el.name = "dropDown2";

Read the current value:

const el = document.querySelector('smart-multi-combo-input');
const name = el.name;

openedSpecifies whether the dropdown menu is currently open (visible) or closed (hidden).boolean

Specifies whether the dropdown menu is currently open (visible) or closed (hidden).

Default value

false

Examples

Markup and runtime examples for opened:

HTML attribute:

<smart-multi-combo-input opened></smart-multi-combo-input>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-multi-combo-input');
el.opened = false;

Read the current value:

const el = document.querySelector('smart-multi-combo-input');
const opened = el.opened;

pillsControls whether the items in the drop-down menu are visually displayed as pill-shaped elements. When enabled, each item will have a rounded, pill-like appearance. When disabled, items will use the default style.boolean

Controls whether the items in the drop-down menu are visually displayed as pill-shaped elements. When enabled, each item will have a rounded, pill-like appearance. When disabled, items will use the default style.

Default value

false
Try a demo showcasing the pills property.

Examples

Markup and runtime examples for pills:

HTML attribute:

<smart-multi-combo-input pills></smart-multi-combo-input>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-multi-combo-input');
el.pills = false;

Read the current value:

const el = document.querySelector('smart-multi-combo-input');
const pills = el.pills;

placeholderSpecifies the placeholder text displayed inside the input field when it is empty, providing a hint or example of the expected input value to the user.string

Specifies the placeholder text displayed inside the input field when it is empty, providing a hint or example of the expected input value to the user.

Default value

""
Try a demo showcasing the placeholder property.

Examples

Markup and runtime examples for placeholder:

HTML:

<smart-multi-combo-input placeholder="Empty"></smart-multi-combo-input>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-multi-combo-input');
el.placeholder = "Enter:";

Read the current value:

const el = document.querySelector('smart-multi-combo-input');
const placeholder = el.placeholder;

queryDefines or retrieves the search query used to filter items in the data source. This query is utilized by the autoComplete operation to determine which items are displayed based on user input. If the value is set to an empty string, all items from the data source are shown and no filtering is applied.string | number

Defines or retrieves the search query used to filter items in the data source. This query is utilized by the autoComplete operation to determine which items are displayed based on user input. If the value is set to an empty string, all items from the data source are shown and no filtering is applied.

Default value

""

Examples

Markup and runtime examples for query:

HTML:

<smart-multi-combo-input query="ABC"></smart-multi-combo-input>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-multi-combo-input');
el.query = "'some query'";

Read the current value:

const el = document.querySelector('smart-multi-combo-input');
const query = el.query;

queryModeSpecifies the autocomplete query mode, which defines how user input is matched against available options during the autocomplete operation. This property selects the matching algorithm used to filter and suggest results based on the entered query, such as prefix matching, exact matching, or fuzzy searching."contains" | "containsIgnoreCase" | "doesNotContain" | "doesNotContainIgnoreCase" | "equals" | "equalsIgnoreCase" | "startsWith" | "startsWithIgnoreCase" | "endsWith" | "endsWithIgnoreCase"

Specifies the autocomplete query mode, which defines how user input is matched against available options during the autocomplete operation. This property selects the matching algorithm used to filter and suggest results based on the entered query, such as prefix matching, exact matching, or fuzzy searching.

Allowed Values

  • "contains" - Displays the items that contain the search query (case sensitive)
  • "containsIgnoreCase" - Displays the items that contain the search query (case insensitive)
  • "doesNotContain" - Displays the items that do not contain the search query (case sensitive)
  • "doesNotContainIgnoreCase" - Displays the items that do not contain the search query (case insensitive)
  • "equals" - Displays the items that are equal the search query (case sensitive)
  • "equalsIgnoreCase" - Displays the items that are equal the search query (case insensitive)
  • "startsWith" - Displays the items that start with the search query (case sensitive)
  • "startsWithIgnoreCase" - Displays the items that start with the search query (case insensitive)
  • "endsWith" - Displays the items that end with the search query (case sensitive)
  • "endsWithIgnoreCase" - Displays the items that start with the search query (case insensitive)

Default value

"containsIgnoreCase"

Examples

Markup and runtime examples for queryMode:

HTML:

<smart-multi-combo-input query-mode="contains"></smart-multi-combo-input>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-multi-combo-input');
el.queryMode = "endsWith";

Read the current value:

const el = document.querySelector('smart-multi-combo-input');
const queryMode = el.queryMode;

readonlyDetermines whether the user can enter or edit text within the input field. When the dropDownButtonPosition property is set to either 'left' or 'right', the readonly property controls the component's behavior when a dataSource is provided: - If readonly is false, the element functions as a ComboBox, allowing users to type custom values as well as select from the list.- If readonly is true, the element behaves as a DropDownList, restricting the user to select only from the available options without the ability to enter custom text.boolean

Determines whether the user can enter or edit text within the input field. When the dropDownButtonPosition property is set to either 'left' or 'right', the readonly property controls the component's behavior when a dataSource is provided:
- If readonly is false, the element functions as a ComboBox, allowing users to type custom values as well as select from the list.
- If readonly is true, the element behaves as a DropDownList, restricting the user to select only from the available options without the ability to enter custom text.

Default value

false
Try a demo showcasing the readonly property.

Examples

Markup and runtime examples for readonly:

HTML attribute:

<smart-multi-combo-input readonly></smart-multi-combo-input>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-multi-combo-input');
el.readonly = false;

Read the current value:

const el = document.querySelector('smart-multi-combo-input');
const readonly = el.readonly;

rightToLeftConfigures or retrieves the value that determines whether the element's alignment is adjusted to support right-to-left (RTL) languages and scripts, such as Arabic or Hebrew. When enabled, the element's layout and text direction are oriented to accommodate RTL reading order for proper localization.boolean

Configures or retrieves the value that determines whether the element's alignment is adjusted to support right-to-left (RTL) languages and scripts, such as Arabic or Hebrew. When enabled, the element's layout and text direction are oriented to accommodate RTL reading order for proper localization.

Default value

false
Try a demo showcasing the rightToLeft property.

Examples

Markup and runtime examples for rightToLeft:

HTML attribute:

<smart-multi-combo-input right-to-left></smart-multi-combo-input>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-multi-combo-input');
el.rightToLeft = true;

Read the current value:

const el = document.querySelector('smart-multi-combo-input');
const rightToLeft = el.rightToLeft;

selectAllControls the display of an extra option at the top of the options list, which enables users to select or deselect all items with a single action. When enabled, this option appears as the first item, providing a convenient way to manage the entire selection at once.boolean

Controls the display of an extra option at the top of the options list, which enables users to select or deselect all items with a single action. When enabled, this option appears as the first item, providing a convenient way to manage the entire selection at once.

Default value

false

Examples

Markup and runtime examples for selectAll:

HTML attribute:

<smart-multi-combo-input select-all></smart-multi-combo-input>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-multi-combo-input');
el.selectAll = false;

Read the current value:

const el = document.querySelector('smart-multi-combo-input');
const selectAll = el.selectAll;

selectedValuesGets or sets an array containing the currently selected values. This property allows you to retrieve the list of selected items or update the selection by assigning a new array of values. Each value in the array corresponds to an item that has been selected. array

Gets or sets an array containing the currently selected values.
This property allows you to retrieve the list of selected items or update the selection by assigning a new array of values. Each value in the array corresponds to an item that has been selected.

separatorSpecifies the character or string used to separate individual tags within the input field. This delimiter defines how the input is parsed into distinct tags when users enter multiple values.string

Specifies the character or string used to separate individual tags within the input field. This delimiter defines how the input is parsed into distinct tags when users enter multiple values.

Default value

""

Examples

Markup and runtime examples for separator:

HTML:

<smart-multi-combo-input separator="-"></smart-multi-combo-input>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-multi-combo-input');
el.separator = ",";

Read the current value:

const el = document.querySelector('smart-multi-combo-input');
const separator = el.separator;

singleSelectSpecifies if selection is restricted to a single item at a time, preventing users from selecting multiple items simultaneously.boolean

Specifies if selection is restricted to a single item at a time, preventing users from selecting multiple items simultaneously.

Default value

false

Examples

Markup and runtime examples for singleSelect:

HTML attribute:

<smart-multi-combo-input single-select></smart-multi-combo-input>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-multi-combo-input');
el.singleSelect = false;

Read the current value:

const el = document.querySelector('smart-multi-combo-input');
const singleSelect = el.singleSelect;

sortDirectionSpecifies the sorting algorithm to be used when sort is enabled. Accepts either asc for ascending order or desc for descending order, determining how the data will be organized.string

Specifies the sorting algorithm to be used when sort is enabled. Accepts either asc for ascending order or desc for descending order, determining how the data will be organized.

Default value

"asc"

Examples

Markup and runtime examples for sortDirection:

HTML:

<smart-multi-combo-input sort-direction="desc"></smart-multi-combo-input>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-multi-combo-input');
el.sortDirection = "asc";

Read the current value:

const el = document.querySelector('smart-multi-combo-input');
const sortDirection = el.sortDirection;

sortedSpecifies whether the items are arranged in alphabetical order. If set to true, the items will be sorted from A to Z; if false, the original order will be preserved.boolean

Specifies whether the items are arranged in alphabetical order. If set to true, the items will be sorted from A to Z; if false, the original order will be preserved.

Default value

false

Examples

Markup and runtime examples for sorted:

HTML attribute:

<smart-multi-combo-input sorted></smart-multi-combo-input>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-multi-combo-input');
el.sorted = false;

Read the current value:

const el = document.querySelector('smart-multi-combo-input');
const sorted = el.sorted;

themeSpecifies the visual theme to apply to the element. The selected theme controls the element’s overall appearance, including colors, fonts, and styles, ensuring consistency with the application's design scheme.string

Specifies the visual theme to apply to the element. The selected theme controls the element’s overall appearance, including colors, fonts, and styles, ensuring consistency with the application's design scheme.

Default value

""

Examples

Markup and runtime examples for theme:

HTML:

<smart-multi-combo-input theme="blue"></smart-multi-combo-input>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-multi-combo-input');
el.theme = "red";

Read the current value:

const el = document.querySelector('smart-multi-combo-input');
const theme = el.theme;

typeSpecifies the type of input that the field accepts, such as text, email, password, number, or date. The selected input type defines both the format of data that can be entered by the user and the behavior of the input field, including related validation and the appearance of the on-screen keyboard (on supported devices).string

Specifies the type of input that the field accepts, such as text, email, password, number, or date. The selected input type defines both the format of data that can be entered by the user and the behavior of the input field, including related validation and the appearance of the on-screen keyboard (on supported devices).

Default value

""

Examples

Markup and runtime examples for type:

HTML:

<smart-multi-combo-input type="number"></smart-multi-combo-input>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-multi-combo-input');
el.type = "text";

Read the current value:

const el = document.querySelector('smart-multi-combo-input');
const type = el.type;

unfocusableWhen set to true, this property prevents the element from receiving keyboard focus. As a result, users will not be able to navigate to the element using the Tab key or other keyboard navigation methods.boolean

When set to true, this property prevents the element from receiving keyboard focus. As a result, users will not be able to navigate to the element using the Tab key or other keyboard navigation methods.

Default value

false

Examples

Markup and runtime examples for unfocusable:

HTML attribute:

<smart-multi-combo-input unfocusable></smart-multi-combo-input>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-multi-combo-input');
el.unfocusable = false;

Read the current value:

const el = document.querySelector('smart-multi-combo-input');
const unfocusable = el.unfocusable;

unlockKeyGets or sets the 'unlockKey' property, which is a unique code required to activate or unlock the product's full features. Use this key to enable product access or retrieve the current key assigned to the product.string

Gets or sets the 'unlockKey' property, which is a unique code required to activate or unlock the product's full features. Use this key to enable product access or retrieve the current key assigned to the product.

Default value

""

Examples

Markup and runtime examples for unlockKey:

HTML:

<smart-multi-combo-input unlock-key=""></smart-multi-combo-input>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-multi-combo-input');
el.unlockKey = "1111-2222-3333-4444-5555";

Read the current value:

const el = document.querySelector('smart-multi-combo-input');
const unlockKey = el.unlockKey;

valueSets or retrieves the current value of the element. When used as a setter, it assigns the specified value to the element (such as updating the text in an input field or the selected option in a dropdown). When used as a getter, it returns the element’s current value.string

Sets or retrieves the current value of the element. When used as a setter, it assigns the specified value to the element (such as updating the text in an input field or the selected option in a dropdown). When used as a getter, it returns the element’s current value.

Default value

""
Try a demo showcasing the value property.

Examples

Markup and runtime examples for value:

HTML:

<smart-multi-combo-input value="value1"></smart-multi-combo-input>

Vanilla JS — prefer #id if multiple widgets exist on the page:

const el = document.querySelector('smart-multi-combo-input');
el.value = "value2";

Read the current value:

const el = document.querySelector('smart-multi-combo-input');
const value = el.value;

Events

changeThis event is triggered whenever the user modifies the current selection, such as highlighting different text or choosing a new option within a selectable element. It enables you to respond programmatically to changes in the selected content or options.CustomEvent

This event is triggered whenever the user modifies the current selection, such as highlighting different text or choosing a new option within a selectable element. It enables you to respond programmatically to changes in the selected content or options.

  • Bubbles Yes
  • Cancelable No
  • Interface CustomEvent
  • Event handler property onChange

Arguments

evCustomEvent
ev.detailObject
ev.detail.label - The label of the new selected item.
ev.detail.oldLabel - The label of the item that was previously selected before the event was triggered.
ev.detail.oldValue - The value of the item that was previously selected before the event was triggered.
ev.detail.value - The value of the new selected item.

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Examples

Listen for change using the pattern that matches your stack.

DOM — listen on the custom element (use a specific selector if the page has more than one):

document.querySelector('smart-multi-combo-input')?.addEventListener('change', (event) => {
    const detail = event.detail,
        label = detail.label,
        oldLabel = detail.oldLabel,
        oldValue = detail.oldValue,
        value = detail.value;

	// event handling code goes here.
})

Methods

close(): voidCloses the dropdown menu by hiding its content and updating its state to indicate that it is no longer visible or active.

Closes the dropdown menu by hiding its content and updating its state to indicate that it is no longer visible or active.

On the custom element in the DOM (narrow the selector, e.g. to #my-multicomboinput, if you host multiple widgets):

document.querySelector('smart-multi-combo-input')?.close();

Try a demo showcasing the close method.

ensureVisible(): voidGuarantees that the currently selected item remains within the visible area of the container, automatically scrolling as needed to bring the active item into view whenever selection changes.

Guarantees that the currently selected item remains within the visible area of the container, automatically scrolling as needed to bring the active item into view whenever selection changes.

On the custom element in the DOM (narrow the selector, e.g. to #my-multicomboinput, if you host multiple widgets):

document.querySelector('smart-multi-combo-input')?.ensureVisible();

open(): voidDisplays the dropdown menu, allowing users to view and select available options.

Displays the dropdown menu, allowing users to view and select available options.

On the custom element in the DOM (narrow the selector, e.g. to #my-multicomboinput, if you host multiple widgets):

document.querySelector('smart-multi-combo-input')?.open();

Try a demo showcasing the open method.

select(): voidSelects all the text within the input field. If the input field is set to readonly, the method will focus the element instead, since text selection is not allowed for readonly inputs.

Selects all the text within the input field. If the input field is set to readonly, the method will focus the element instead, since text selection is not allowed for readonly inputs.

On the custom element in the DOM (narrow the selector, e.g. to #my-multicomboinput, if you host multiple widgets):

document.querySelector('smart-multi-combo-input')?.select();