Input — Smart UI JavaScript API

Input — 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>Input - JavaScript Quick Start</title>
  <link rel="stylesheet" href="./node_modules/smart-webcomponents/source/styles/smart.default.css" />
</head>
<body>
  <smart-input id="demo-input"></smart-input>

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

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

      el.placeholder = 'Search products';
      el.value = 'Espresso';

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

Developer Quick Reference

Component: Input   Framework: JavaScript   Selector: smart-input

API counts: 30 properties, 7 methods, 5 events

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

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

Common events: change, changing, open, close, itemClick

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

Input specifies an input field where the user can enter data. Auto-complete options are displayed for easier input.

Class

Input

Input

Input specifies an input field where the user can enter data. Auto-complete options are displayed for easier input.

Selector

smart-input

Quick picks

changeclosedataSourcedisableditemsopenvalue

Properties

AautoCompleteDelaySpecifies the amount of time, in milliseconds, to wait before displaying the dropdown list of matching suggestions after the user interacts with the autocomplete input. This delay helps control how quickly the dropdown appears, improving user experience by preventing it from opening too rapidly as users type.
DdataSourceSpecifies the data source that will be used to populate the Input component. The dataSource property accepts multiple formats:- 'Array of Primitives:' An array of strings or numbers, where each element represents a single list item.- 'Array of Objects:' An array of objects, where each object defines the properties of a list item. The recognized fields for each item object include: - label (string): The display text for the item. - value (string | number): The underlying value associated with the item. - selected (boolean): Indicates whether the item is initially selected. - prefix (string): HTML content to display before the label. - suffix (string): HTML content to display after the label. - title (string): Additional descriptive text, typically used for tooltips.- 'Callback Function:' A function that returns an array of items in either of the formats described above, allowing for dynamic or asynchronous data loading.The prefix and suffix fields can contain HTML, which is rendered respectively before and after the item's label. This allows for additional icons, badges, or formatting as needed to enhance the list item's visual presentation.
DdisabledControls whether the element is active and interactive (enabled) or inactive and unresponsive to user interactions (disabled). When disabled, the element cannot be interacted with or triggered by the user.
DdropDownButtonPositionSpecifies the placement of the dropdown button relative to its container or trigger element, such as positioning it above, below, to the left, or to the right. This affects where the dropdown appears on the user interface when activated.
DdropDownClassListAllows you to specify extra CSS class names that will be applied to the Input dropdown element, enabling custom styling or theming beyond the default classes.
DdropDownHeightSpecifies the height of the dropdown menu. By default, this property is set to an empty string, which means the dropdown’s height will be determined by the corresponding CSS variable. To override the default behavior and set a custom height, assign a specific value (such as "200px" or "50%") to this property. If left unset, the component relies on the CSS variable to control its height.
DdropDownOpenPositionSpecifies the placement of the dropdown menu relative to its trigger element when opened, such as above, below, left, or right.
DdropDownWidthDefines the width of the dropdown menu. By default, this property is set to an empty string (""). When left empty, the dropdown's width is determined by a corresponding CSS variable, allowing you to control its sizing through your stylesheet. To specify a fixed width, provide a valid CSS width value (e.g., "200px", "100%"). If not specified, the component will fallback to the CSS variable for its width.
IinputPurposeSpecifies the purpose of the input field and instructs the browser on both the type of data expected and the level of permission granted to automatically assist the user in filling out the form element. This property directly maps to the standard HTML autocomplete attribute, which helps improve user experience by enabling browsers to suggest or autofill relevant data, such as a user’s name, organization, street address, and more. Common values include 'on' (enables autocomplete), 'off' (disables autocomplete), as well as context-specific tokens like 'name', 'email', 'organization', and 'street-address', among others. Using the appropriate value enhances form usability, accuracy, and accessibility.
IitemsSpecifies the maximum number of matching items that will be displayed in the dropdown menu after a new auto-complete query is performed. By default, the dropdown will show up to 8 items. If the number of matched items exceeds this limit, only the first 8 results will be visible, and additional matches will not be shown unless this value is increased.
LlocaleSpecifies or retrieves the current language setting, which determines the localization to be used for displaying content. This property works together with the messages property to select and present language-specific messages or text strings. Setting this property updates the language used throughout the interface, while getting the property returns the currently active language code (e.g., "en", "fr", "es").
LlocalizeFormatFunctionCallback function that allows you to define a custom format for messages returned by the Localization Module. Use this to modify or structure localized messages before they are delivered to the application, such as adding context, adjusting placeholders, or applying additional formatting logic.
MmessagesDefines or retrieves an object containing customizable text strings displayed by the widget, enabling localization for different languages and regions. This property works together with the locale property to allow the widget’s user interface labels, messages, and prompts to be easily translated and adapted for international audiences.
MminLengthSpecifies the minimum number of characters a user must enter into the input field before the autocomplete functionality is activated. Once this threshold is reached, the dropdown will open and display a list of matching items based on the user's input.
NnameSets or retrieves the value of the element’s name attribute. The name attribute uniquely identifies form elements when submitting data through an HTML form. It is used as the key for the form data sent to the server, allowing server-side scripts to access the corresponding value.
OopenedIndicates whether the dropdown menu is currently open (true) or closed (false).
PplaceholderSpecifies the placeholder text displayed inside the input field when it is empty, providing guidance or an example to the user about the expected input format or content.
QqueryDefines or retrieves the filter query used to determine which items are displayed. This query is utilized by the autoComplete operation to match and return relevant items from the data source. If the query is set to an empty string, no filtering is applied, and all available items from the data source are shown.
QqueryModeSpecifies the autocomplete query mode, which defines how search suggestions are generated. This property controls the matching algorithm used during autocomplete operations, such as whether suggestions are based on prefix, infix, or exact matches within the input text. Adjusting this property allows you to tailor the autocomplete behavior to best suit your application's search experience.
RreadonlySpecifies whether the user can enter text directly into the input field. When dropDownButtonPosition is set to 'left' or 'right', the readonly property controls the behavior of the input when a dataSource is provided: If readonly is false, the element functions as a ComboBox, allowing users to either select an option from the dropdown or type their own input. If readonly is true, the element acts as a DropDownList, restricting user input to only the items available in the dataSource.
RrightToLeftSpecifies or retrieves whether the element's text alignment and layout are configured for right-to-left (RTL) languages, such as Arabic or Hebrew. When enabled, the element's content will display in a direction suitable for RTL locales, ensuring proper reading order and alignment for users of these languages.
SselectedIndexSpecifies the index of the currently selected item within a list or array. This value indicates which item is active or highlighted, typically starting from zero for the first item.
SselectedValueSpecifies the currently selected value from the available options. This property indicates which option is active or chosen by the user within the component.
SsortDirectionSpecifies the sorting order to use when sort is enabled. Accepts either asc for ascending order or desc for descending order.
SsortedSpecifies whether the items should be arranged in alphabetical order. If enabled, the items will be sorted from A to Z based on their names; if disabled, the original order will be preserved.
TthemeSpecifies the visual theme applied to the element. The selected theme controls the element’s overall appearance, including colors, fonts, and styling, to ensure consistency with the application's design guidelines.
TtypeSpecifies the type of input expected by the field. Setting the input type controls the kind of data users can enter (e.g., text, number, email, password), impacts the on-screen keyboard on mobile devices, and enables input validation based on the chosen type.
UunfocusableWhen set to true, this property ensures that the element is not focusable and cannot receive keyboard or programmatic focus.
UunlockKeyRetrieves or assigns the unlockKey value used to grant access to the product. The unlockKey serves as a security credential required to unlock and enable product functionality.
VvalueSets a new value for the element or retrieves its current value, depending on how the function is used.

Events

CchangeThis event is triggered whenever the user changes the current selection, such as selecting different text, items, or options within the interface. It provides an opportunity to respond dynamically to user interactions involving selection changes.
CchangingThis event is triggered whenever the user releases a key (keyup) while typing in the Input field, but only if the input’s value has actually changed since the last event.
CcloseThis event is triggered immediately when the popup window is closed, either by user action (such as clicking the close button) or programmatically via code. It provides an opportunity to execute cleanup tasks, update application state, or respond to the closure of the popup.
IitemClickThis event is triggered whenever a user selects (clicks on) an item within the popup list. It allows you to respond to user interactions by executing specific logic or actions when a particular popup list item is chosen.
OopenThis event is triggered immediately when the popup component becomes visible to the user, signaling that the popup has been successfully opened and rendered in the DOM. It can be used to execute custom logic or initialize content whenever the popup appears.

Methods

CcloseCloses the currently open dropdown menu, hiding its options from view and reverting the interface to its default state.
EensureVisibleEnsures that the currently selected item remains visible within the viewport by automatically scrolling the container as needed. This guarantees that users can always see the active item, even when navigating through a list with limited onscreen space.
GgetItemRetrieves an item from the data source by matching its value. For example, if your data source is an array of strings like ['Item 1', 'Item 2', 'Item 3'], you can retrieve an item by passing its exact string value, such as 'Item 1'. If your data source is an array of objects with properties such as { label: 'Item 1', value: 'item1' }, you should pass the specific value (e.g., 'item1') when calling selectItem. The method will return the corresponding item whose value matches the argument you provide.
GgetSelectedItemRetrieves the currently selected item from the data source. - If your data source is a simple array of strings—such as `['Item 1', 'Item 2', 'Item 3']`—and the user selects the second item, this method will return `'Item 2'`.- If your data source is an array of objects with properties like `{ label, value }`, the method returns the `value` property of the selected object. For example, with a data source of `[ { label: 'First', value: 1 }, { label: 'Second', value: 2 } ]` and the user selects "Second", the method returns `2`.This ensures the method always returns the relevant value associated with the selected option, based on the structure of the data source.
OopenExpands the dropdown menu to display all available options for user selection.
SselectEnhances user interaction by automatically focusing the input element and selecting its text. If the input is set to readonly, the element receives focus but its text is not selected, ensuring consistent behavior based on the input's state.
SselectItemSelects an item from a data source based on its value. If your data source is a simple array of strings (e.g., `['Item 1', 'Item 2', 'Item 3']`), you can select an item by passing the exact string value, such as `'Item 1'`. If your data source is an array of objects with `label` and `value` properties (e.g., `[{ label: 'First', value: 1 }, { label: 'Second', value: 2 }]`), you should pass the corresponding `value` property (e.g., `1` for the first item) when calling `selectItem`. This method automatically locates and selects the item whose value matches the argument you provide, whether the values are strings or object properties.

Properties

autoCompleteDelaySpecifies the amount of time, in milliseconds, to wait before displaying the dropdown list of matching suggestions after the user interacts with the autocomplete input. This delay helps control how quickly the dropdown appears, improving user experience by preventing it from opening too rapidly as users type.number

Specifies the amount of time, in milliseconds, to wait before displaying the dropdown list of matching suggestions after the user interacts with the autocomplete input. This delay helps control how quickly the dropdown appears, improving user experience by preventing it from opening too rapidly as users type.

Default value

100

Examples

Markup and runtime examples for autoCompleteDelay:

HTML:

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

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

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

Read the current value:

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

dataSourceSpecifies the data source that will be used to populate the Input component. The dataSource property accepts multiple formats:- 'Array of Primitives:' An array of strings or numbers, where each element represents a single list item.- 'Array of Objects:' An array of objects, where each object defines the properties of a list item. The recognized fields for each item object include: - label (string): The display text for the item. - value (string | number): The underlying value associated with the item. - selected (boolean): Indicates whether the item is initially selected. - prefix (string): HTML content to display before the label. - suffix (string): HTML content to display after the label. - title (string): Additional descriptive text, typically used for tooltips.- 'Callback Function:' A function that returns an array of items in either of the formats described above, allowing for dynamic or asynchronous data loading.The prefix and suffix fields can contain HTML, which is rendered respectively before and after the item's label. This allows for additional icons, badges, or formatting as needed to enhance the list item's visual presentation.any

Specifies the data source that will be used to populate the Input component. The dataSource property accepts multiple formats:

- 'Array of Primitives:' An array of strings or numbers, where each element represents a single list item.
- 'Array of Objects:' An array of objects, where each object defines the properties of a list item. The recognized fields for each item object include:
- label (string): The display text for the item.
- value (string | number): The underlying value associated with the item.
- selected (boolean): Indicates whether the item is initially selected.
- prefix (string): HTML content to display before the label.
- suffix (string): HTML content to display after the label.
- title (string): Additional descriptive text, typically used for tooltips.
- 'Callback Function:' A function that returns an array of items in either of the formats described above, allowing for dynamic or asynchronous data loading.

The prefix and suffix fields can contain HTML, which is rendered respectively before and after the item's label. This allows for additional icons, badges, or formatting as needed to enhance the list item's visual presentation.

Try a demo showcasing the dataSource property.

Examples

Markup and runtime examples for dataSource:

HTML:

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

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

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

Read the current value:

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

disabledControls whether the element is active and interactive (enabled) or inactive and unresponsive to user interactions (disabled). When disabled, the element cannot be interacted with or triggered by the user.boolean

Controls whether the element is active and interactive (enabled) or inactive and unresponsive to user interactions (disabled). When disabled, the element cannot be interacted with or triggered by the user.

Default value

false

Examples

Markup and runtime examples for disabled:

HTML attribute:

<smart-input disabled></smart-input>

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

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

Read the current value:

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

dropDownButtonPositionSpecifies the placement of the dropdown button relative to its container or trigger element, such as positioning it above, below, to the left, or to the right. This affects where the dropdown appears on the user interface when activated."none" | "left" | "right"

Specifies the placement of the dropdown button relative to its container or trigger element, such as positioning it above, below, to the left, or to the right. This affects where the dropdown appears on the user interface when activated.

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

"none"
Try a demo showcasing the dropDownButtonPosition property.

Examples

Markup and runtime examples for dropDownButtonPosition:

HTML:

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

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

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

Read the current value:

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

dropDownClassListAllows you to specify extra CSS class names that will be applied to the Input dropdown element, enabling custom styling or theming beyond the default classes. array

Allows you to specify extra CSS class names that will be applied to the Input dropdown element, enabling custom styling or theming beyond the default classes.

Examples

Markup and runtime examples for dropDownClassList:

HTML:

<smart-input drop-down-class-list="my-custom-input-class-name"></smart-input>

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

const el = document.querySelector('smart-input');
el.dropDownClassList = [];

Read the current value:

const el = document.querySelector('smart-input');
const dropDownClassList = el.dropDownClassList;

dropDownHeightSpecifies the height of the dropdown menu. By default, this property is set to an empty string, which means the dropdown’s height will be determined by the corresponding CSS variable. To override the default behavior and set a custom height, assign a specific value (such as "200px" or "50%") to this property. If left unset, the component relies on the CSS variable to control its 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 will be determined by the corresponding CSS variable. To override the default behavior and set a custom height, assign a specific value (such as "200px" or "50%") to this property. If left unset, the component relies on the CSS variable to control its height.

Default value

""

Examples

Markup and runtime examples for dropDownHeight:

HTML:

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

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

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

Read the current value:

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

dropDownOpenPositionSpecifies the placement of the dropdown menu relative to its trigger element when opened, such as above, below, left, or right."auto" | "top" | "bottom"

Specifies the placement of the dropdown menu relative to its trigger element when opened, such as above, below, left, or right.

Allowed Values

  • "auto" - The position is automatically determined by measuring the available distance around the element for the drop down to open freely without being clipped by the edges of the browser. By default the drop down will try to open below the element. If the available space is not enough for the popup to appear it will open in one of the following directions, if possible: top, over.
  • "top" - The drop down opens above the element.
  • "bottom" - The drop down opens under the element.

Default value

"auto"

Examples

Markup and runtime examples for dropDownOpenPosition:

HTML:

<smart-input drop-down-open-position="top"></smart-input>

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

const el = document.querySelector('smart-input');
el.dropDownOpenPosition = "bottom";

Read the current value:

const el = document.querySelector('smart-input');
const dropDownOpenPosition = el.dropDownOpenPosition;

dropDownWidthDefines the width of the dropdown menu. By default, this property is set to an empty string (""). When left empty, the dropdown's width is determined by a corresponding CSS variable, allowing you to control its sizing through your stylesheet. To specify a fixed width, provide a valid CSS width value (e.g., "200px", "100%"). If not specified, the component will fallback to the CSS variable for its width.string | number

Defines the width of the dropdown menu. By default, this property is set to an empty string (""). When left empty, the dropdown's width is determined by a corresponding CSS variable, allowing you to control its sizing through your stylesheet. To specify a fixed width, provide a valid CSS width value (e.g., "200px", "100%"). If not specified, the component will fallback to the CSS variable for its width.

Default value

""

Examples

Markup and runtime examples for dropDownWidth:

HTML:

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

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

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

Read the current value:

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

inputPurposeSpecifies the purpose of the input field and instructs the browser on both the type of data expected and the level of permission granted to automatically assist the user in filling out the form element. This property directly maps to the standard HTML autocomplete attribute, which helps improve user experience by enabling browsers to suggest or autofill relevant data, such as a user’s name, organization, street address, and more. Common values include 'on' (enables autocomplete), 'off' (disables autocomplete), as well as context-specific tokens like 'name', 'email', 'organization', and 'street-address', among others. Using the appropriate value enhances form usability, accuracy, and accessibility.string

Specifies the purpose of the input field and instructs the browser on both the type of data expected and the level of permission granted to automatically assist the user in filling out the form element. This property directly maps to the standard HTML autocomplete attribute, which helps improve user experience by enabling browsers to suggest or autofill relevant data, such as a user’s name, organization, street address, and more. Common values include 'on' (enables autocomplete), 'off' (disables autocomplete), as well as context-specific tokens like 'name', 'email', 'organization', and 'street-address', among others. Using the appropriate value enhances form usability, accuracy, and accessibility.

Default value

"off"

Examples

Markup and runtime examples for inputPurpose:

HTML:

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

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

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

Read the current value:

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

itemsSpecifies the maximum number of matching items that will be displayed in the dropdown menu after a new auto-complete query is performed. By default, the dropdown will show up to 8 items. If the number of matched items exceeds this limit, only the first 8 results will be visible, and additional matches will not be shown unless this value is increased.number

Specifies the maximum number of matching items that will be displayed in the dropdown menu after a new auto-complete query is performed. By default, the dropdown will show up to 8 items. If the number of matched items exceeds this limit, only the first 8 results will be visible, and additional matches will not be shown unless this value is increased.

Default value

8

Examples

Markup and runtime examples for items:

HTML:

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

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

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

Read the current value:

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

localeSpecifies or retrieves the current language setting, which determines the localization to be used for displaying content. This property works together with the messages property to select and present language-specific messages or text strings. Setting this property updates the language used throughout the interface, while getting the property returns the currently active language code (e.g., "en", "fr", "es").string

Specifies or retrieves the current language setting, which determines the localization to be used for displaying content. This property works together with the messages property to select and present language-specific messages or text strings. Setting this property updates the language used throughout the interface, while getting the property returns the currently active language code (e.g., "en", "fr", "es").

Default value

"en"
Try a demo showcasing the locale property.

Examples

Markup and runtime examples for locale:

HTML:

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

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

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

Read the current value:

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

localizeFormatFunctionCallback function that allows you to define a custom format for messages returned by the Localization Module. Use this to modify or structure localized messages before they are delivered to the application, such as adding context, adjusting placeholders, or applying additional formatting logic.function

Callback function that allows you to define a custom format for messages returned by the Localization Module. Use this to modify or structure localized messages before they are delivered to the application, such as adding context, adjusting placeholders, or applying additional formatting logic.

Examples

Markup and runtime examples for localizeFormatFunction:

HTML:

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

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

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

Read the current value:

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

messagesDefines or retrieves an object containing customizable text strings displayed by the widget, enabling localization for different languages and regions. This property works together with the locale property to allow the widget’s user interface labels, messages, and prompts to be easily translated and adapted for international audiences.object

Defines or retrieves an object containing customizable text strings displayed by the widget, enabling localization for different languages and regions. This property works together with the locale property to allow the widget’s user interface labels, messages, and prompts to be easily translated and adapted for international audiences.

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-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-input>

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

const el = document.querySelector('smart-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-input');
const messages = el.messages;

minLengthSpecifies the minimum number of characters a user must enter into the input field before the autocomplete functionality is activated. Once this threshold is reached, the dropdown will open and display a list of matching items based on the user's input.number

Specifies the minimum number of characters a user must enter into the input field before the autocomplete functionality is activated. Once this threshold is reached, the dropdown will open and display a list of matching items based on the user's input.

Default value

1

Examples

Markup and runtime examples for minLength:

HTML:

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

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

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

Read the current value:

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

nameSets or retrieves the value of the element’s name attribute. The name attribute uniquely identifies form elements when submitting data through an HTML form. It is used as the key for the form data sent to the server, allowing server-side scripts to access the corresponding value.string

Sets or retrieves the value of the element’s name attribute. The name attribute uniquely identifies form elements when submitting data through an HTML form. It is used as the key for the form data sent to the server, allowing server-side scripts to access the corresponding value.

Default value

""
Try a demo showcasing the name property.

Examples

Markup and runtime examples for name:

HTML:

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

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

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

Read the current value:

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

openedIndicates whether the dropdown menu is currently open (true) or closed (false).boolean

Indicates whether the dropdown menu is currently open (true) or closed (false).

Default value

false

Examples

Markup and runtime examples for opened:

HTML attribute:

<smart-input opened></smart-input>

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

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

Read the current value:

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

placeholderSpecifies the placeholder text displayed inside the input field when it is empty, providing guidance or an example to the user about the expected input format or content.string

Specifies the placeholder text displayed inside the input field when it is empty, providing guidance or an example to the user about the expected input format or content.

Default value

""
Try a demo showcasing the placeholder property.

Examples

Markup and runtime examples for placeholder:

HTML:

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

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

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

Read the current value:

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

queryDefines or retrieves the filter query used to determine which items are displayed. This query is utilized by the autoComplete operation to match and return relevant items from the data source. If the query is set to an empty string, no filtering is applied, and all available items from the data source are shown.string | number

Defines or retrieves the filter query used to determine which items are displayed. This query is utilized by the autoComplete operation to match and return relevant items from the data source. If the query is set to an empty string, no filtering is applied, and all available items from the data source are shown.

Default value

""

Examples

Markup and runtime examples for query:

HTML:

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

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

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

Read the current value:

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

queryModeSpecifies the autocomplete query mode, which defines how search suggestions are generated. This property controls the matching algorithm used during autocomplete operations, such as whether suggestions are based on prefix, infix, or exact matches within the input text. Adjusting this property allows you to tailor the autocomplete behavior to best suit your application's search experience."contains" | "containsIgnoreCase" | "doesNotContain" | "doesNotContainIgnoreCase" | "equals" | "equalsIgnoreCase" | "startsWith" | "startsWithIgnoreCase" | "endsWith" | "endsWithIgnoreCase"

Specifies the autocomplete query mode, which defines how search suggestions are generated. This property controls the matching algorithm used during autocomplete operations, such as whether suggestions are based on prefix, infix, or exact matches within the input text. Adjusting this property allows you to tailor the autocomplete behavior to best suit your application's search experience.

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-input query-mode="contains"></smart-input>

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

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

Read the current value:

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

readonlySpecifies whether the user can enter text directly into the input field. When dropDownButtonPosition is set to 'left' or 'right', the readonly property controls the behavior of the input when a dataSource is provided: If readonly is false, the element functions as a ComboBox, allowing users to either select an option from the dropdown or type their own input. If readonly is true, the element acts as a DropDownList, restricting user input to only the items available in the dataSource.boolean

Specifies whether the user can enter text directly into the input field. When dropDownButtonPosition is set to 'left' or 'right', the readonly property controls the behavior of the input when a dataSource is provided:


If readonly is false, the element functions as a ComboBox, allowing users to either select an option from the dropdown or type their own input.


If readonly is true, the element acts as a DropDownList, restricting user input to only the items available in the dataSource.

Default value

false
Try a demo showcasing the readonly property.

Examples

Markup and runtime examples for readonly:

HTML attribute:

<smart-input readonly></smart-input>

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

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

Read the current value:

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

rightToLeftSpecifies or retrieves whether the element's text alignment and layout are configured for right-to-left (RTL) languages, such as Arabic or Hebrew. When enabled, the element's content will display in a direction suitable for RTL locales, ensuring proper reading order and alignment for users of these languages.boolean

Specifies or retrieves whether the element's text alignment and layout are configured for right-to-left (RTL) languages, such as Arabic or Hebrew. When enabled, the element's content will display in a direction suitable for RTL locales, ensuring proper reading order and alignment for users of these languages.

Default value

false
Try a demo showcasing the rightToLeft property.

Examples

Markup and runtime examples for rightToLeft:

HTML attribute:

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

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

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

Read the current value:

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

selectedIndexSpecifies the index of the currently selected item within a list or array. This value indicates which item is active or highlighted, typically starting from zero for the first item.number

Specifies the index of the currently selected item within a list or array. This value indicates which item is active or highlighted, typically starting from zero for the first item.

Default value

-1

Examples

Markup and runtime examples for selectedIndex:

HTML:

<smart-input selected-index="2"></smart-input>

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

const el = document.querySelector('smart-input');
el.selectedIndex = 0;

Read the current value:

const el = document.querySelector('smart-input');
const selectedIndex = el.selectedIndex;

selectedValueSpecifies the currently selected value from the available options. This property indicates which option is active or chosen by the user within the component.string | number

Specifies the currently selected value from the available options. This property indicates which option is active or chosen by the user within the component.

Default value

""

Examples

Markup and runtime examples for selectedValue:

HTML:

<smart-input selected-value="2"></smart-input>

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

const el = document.querySelector('smart-input');
el.selectedValue = 0;

Read the current value:

const el = document.querySelector('smart-input');
const selectedValue = el.selectedValue;

sortDirectionSpecifies the sorting order to use when sort is enabled. Accepts either asc for ascending order or desc for descending order.string

Specifies the sorting order to use when sort is enabled. Accepts either asc for ascending order or desc for descending order.

Default value

"asc"

Examples

Markup and runtime examples for sortDirection:

HTML:

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

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

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

Read the current value:

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

sortedSpecifies whether the items should be arranged in alphabetical order. If enabled, the items will be sorted from A to Z based on their names; if disabled, the original order will be preserved.boolean

Specifies whether the items should be arranged in alphabetical order. If enabled, the items will be sorted from A to Z based on their names; if disabled, the original order will be preserved.

Default value

false

Examples

Markup and runtime examples for sorted:

HTML attribute:

<smart-input sorted></smart-input>

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

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

Read the current value:

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

themeSpecifies the visual theme applied to the element. The selected theme controls the element’s overall appearance, including colors, fonts, and styling, to ensure consistency with the application's design guidelines.string

Specifies the visual theme applied to the element. The selected theme controls the element’s overall appearance, including colors, fonts, and styling, to ensure consistency with the application's design guidelines.

Default value

""

Examples

Markup and runtime examples for theme:

HTML:

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

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

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

Read the current value:

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

typeSpecifies the type of input expected by the field. Setting the input type controls the kind of data users can enter (e.g., text, number, email, password), impacts the on-screen keyboard on mobile devices, and enables input validation based on the chosen type.string

Specifies the type of input expected by the field. Setting the input type controls the kind of data users can enter (e.g., text, number, email, password), impacts the on-screen keyboard on mobile devices, and enables input validation based on the chosen type.

Default value

""
Try a demo showcasing the type property.

Examples

Markup and runtime examples for type:

HTML:

<smart-input type="blue"></smart-input>

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

const el = document.querySelector('smart-input');
el.type = "red";

Read the current value:

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

unfocusableWhen set to true, this property ensures that the element is not focusable and cannot receive keyboard or programmatic focus.boolean

When set to true, this property ensures that the element is not focusable and cannot receive keyboard or programmatic focus.

Default value

false

Examples

Markup and runtime examples for unfocusable:

HTML attribute:

<smart-input unfocusable></smart-input>

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

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

Read the current value:

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

unlockKeyRetrieves or assigns the unlockKey value used to grant access to the product. The unlockKey serves as a security credential required to unlock and enable product functionality.string

Retrieves or assigns the unlockKey value used to grant access to the product. The unlockKey serves as a security credential required to unlock and enable product functionality.

Default value

""

Examples

Markup and runtime examples for unlockKey:

HTML:

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

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

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

Read the current value:

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

valueSets a new value for the element or retrieves its current value, depending on how the function is used.string

Sets a new value for the element or retrieves its current value, depending on how the function is used.

Default value

""
Try a demo showcasing the value property.

Examples

Markup and runtime examples for value:

HTML:

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

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

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

Read the current value:

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

Events

changeThis event is triggered whenever the user changes the current selection, such as selecting different text, items, or options within the interface. It provides an opportunity to respond dynamically to user interactions involving selection changes.CustomEvent

This event is triggered whenever the user changes the current selection, such as selecting different text, items, or options within the interface. It provides an opportunity to respond dynamically to user interactions involving selection changes.

  • 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.

Try a demo showcasing the change event.

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-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.
})

changingThis event is triggered whenever the user releases a key (keyup) while typing in the Input field, but only if the input’s value has actually changed since the last event.CustomEvent

This event is triggered whenever the user releases a key (keyup) while typing in the Input field, but only if the input’s value has actually changed since the last event.

  • Bubbles Yes
  • Cancelable Yes
  • Interface CustomEvent
  • Event handler property onChanging

Arguments

evCustomEvent
ev.detailObject
ev.detail.oldValue - The previous value before it was changed.
ev.detail.value - The new value.

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 changing 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-input')?.addEventListener('changing', (event) => {
    const detail = event.detail,
        oldValue = detail.oldValue,
        value = detail.value;

	// event handling code goes here.
})

closeThis event is triggered immediately when the popup window is closed, either by user action (such as clicking the close button) or programmatically via code. It provides an opportunity to execute cleanup tasks, update application state, or respond to the closure of the popup.CustomEvent

This event is triggered immediately when the popup window is closed, either by user action (such as clicking the close button) or programmatically via code. It provides an opportunity to execute cleanup tasks, update application state, or respond to the closure of the popup.

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

Arguments

evCustomEvent

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 close 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-input')?.addEventListener('close', (event) => {
	// event handling code goes here.
})

itemClickThis event is triggered whenever a user selects (clicks on) an item within the popup list. It allows you to respond to user interactions by executing specific logic or actions when a particular popup list item is chosen.CustomEvent

This event is triggered whenever a user selects (clicks on) an item within the popup list. It allows you to respond to user interactions by executing specific logic or actions when a particular popup list item is chosen.

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

Arguments

evCustomEvent
ev.detailObject
ev.detail.item - The item that was clicked.
ev.detail.label - The label of the item that was clicked.
ev.detail.value - The value of the item that was clicked.

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 itemClick 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-input')?.addEventListener('itemClick', (event) => {
    const detail = event.detail,
        item = detail.item,
        label = detail.label,
        value = detail.value;

	// event handling code goes here.
})

openThis event is triggered immediately when the popup component becomes visible to the user, signaling that the popup has been successfully opened and rendered in the DOM. It can be used to execute custom logic or initialize content whenever the popup appears.CustomEvent

This event is triggered immediately when the popup component becomes visible to the user, signaling that the popup has been successfully opened and rendered in the DOM. It can be used to execute custom logic or initialize content whenever the popup appears.

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

Arguments

evCustomEvent

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 open 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-input')?.addEventListener('open', (event) => {
	// event handling code goes here.
})

Methods

close(): voidCloses the currently open dropdown menu, hiding its options from view and reverting the interface to its default state.

Closes the currently open dropdown menu, hiding its options from view and reverting the interface to its default state.

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

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

ensureVisible(): voidEnsures that the currently selected item remains visible within the viewport by automatically scrolling the container as needed. This guarantees that users can always see the active item, even when navigating through a list with limited onscreen space.

Ensures that the currently selected item remains visible within the viewport by automatically scrolling the container as needed. This guarantees that users can always see the active item, even when navigating through a list with limited onscreen space.

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

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

getItem( value: string | number): anyRetrieves an item from the data source by matching its value. For example, if your data source is an array of strings like ['Item 1', 'Item 2', 'Item 3'], you can retrieve an item by passing its exact string value, such as 'Item 1'. If your data source is an array of objects with properties such as { label: 'Item 1', value: 'item1' }, you should pass the specific value (e.g., 'item1') when calling selectItem. The method will return the corresponding item whose value matches the argument you provide.

Retrieves an item from the data source by matching its value. For example, if your data source is an array of strings like ['Item 1', 'Item 2', 'Item 3'], you can retrieve an item by passing its exact string value, such as 'Item 1'. If your data source is an array of objects with properties such as { label: 'Item 1', value: 'item1' }, you should pass the specific value (e.g., 'item1') when calling selectItem. The method will return the corresponding item whose value matches the argument you provide.

Arguments

valuestring | number

The item's value when the item is an object or string when the item is a string item.

Returnsany

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

const result = document.querySelector('smart-input')?.getItem("1","2");

getSelectedItem( value: string | number): anyRetrieves the currently selected item from the data source. - If your data source is a simple array of strings—such as `['Item 1', 'Item 2', 'Item 3']`—and the user selects the second item, this method will return `'Item 2'`.- If your data source is an array of objects with properties like `{ label, value }`, the method returns the `value` property of the selected object. For example, with a data source of `[ { label: 'First', value: 1 }, { label: 'Second', value: 2 } ]` and the user selects "Second", the method returns `2`.This ensures the method always returns the relevant value associated with the selected option, based on the structure of the data source.

Retrieves the currently selected item from the data source.
- If your data source is a simple array of strings—such as `['Item 1', 'Item 2', 'Item 3']`—and the user selects the second item, this method will return `'Item 2'`.
- If your data source is an array of objects with properties like `{ label, value }`, the method returns the `value` property of the selected object. For example, with a data source of `[ { label: 'First', value: 1 }, { label: 'Second', value: 2 } ]` and the user selects "Second", the method returns `2`.

This ensures the method always returns the relevant value associated with the selected option, based on the structure of the data source.

Arguments

valuestring | number

The item's value when the item is an object or string when the item is a string item.

Returnsany

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

const result = document.querySelector('smart-input')?.getSelectedItem("1","2");

open(): voidExpands the dropdown menu to display all available options for user selection.

Expands the dropdown menu to display all available options for user selection.

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

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

select(): voidEnhances user interaction by automatically focusing the input element and selecting its text. If the input is set to readonly, the element receives focus but its text is not selected, ensuring consistent behavior based on the input's state.

Enhances user interaction by automatically focusing the input element and selecting its text. If the input is set to readonly, the element receives focus but its text is not selected, ensuring consistent behavior based on the input's state.

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

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

Try a demo showcasing the select method.

selectItem( value: string | number): voidSelects an item from a data source based on its value. If your data source is a simple array of strings (e.g., `['Item 1', 'Item 2', 'Item 3']`), you can select an item by passing the exact string value, such as `'Item 1'`. If your data source is an array of objects with `label` and `value` properties (e.g., `[{ label: 'First', value: 1 }, { label: 'Second', value: 2 }]`), you should pass the corresponding `value` property (e.g., `1` for the first item) when calling `selectItem`. This method automatically locates and selects the item whose value matches the argument you provide, whether the values are strings or object properties.

Selects an item from a data source based on its value.

If your data source is a simple array of strings (e.g., `['Item 1', 'Item 2', 'Item 3']`), you can select an item by passing the exact string value, such as `'Item 1'`.

If your data source is an array of objects with `label` and `value` properties (e.g., `[{ label: 'First', value: 1 }, { label: 'Second', value: 2 }]`), you should pass the corresponding `value` property (e.g., `1` for the first item) when calling `selectItem`.

This method automatically locates and selects the item whose value matches the argument you provide, whether the values are strings or object properties.

Arguments

valuestring | number

The item's value when the item is an object or string when the item is a string item.

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

document.querySelector('smart-input')?.selectItem("1","2");