smart-html-elements

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

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

    const el = document.getElementById('demo-textbox');
    if (el) {
      el.placeholder = 'Type here...';
      el.selectAllOnFocus = true;
      el.placeholder = 'smart Text Box';

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

For AI tooling

Developer Quick Reference

Component: TextBox Framework: JavaScript Selector: smart-text-box

API counts: 53 properties, 3 methods, 2 events

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

Common methods: close(), open(), reset()

Common events: change, changing

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

TextBox is an input field with auto-suggest options.

TextBox

TextBox is an input field with auto-suggest options.

Selector

smart-text-box

Quick picks

change close dataSource disabled items open value

Properties

animationControls the animation mode for the component. You can retrieve the current mode or assign a new one. Setting this property to 'none' will disable all animations."none" | "simple" | "advanced"

Controls the animation mode for the component. You can retrieve the current mode or assign a new one. Setting this property to 'none' will disable all animations.

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-text-box animation="none"></smart-text-box>

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

const el = document.querySelector('smart-text-box');
el.animation = "simple";

Read the current value:

const el = document.querySelector('smart-text-box');
const animation = el.animation;

autoCompleteSpecifies the autocomplete mode used to filter and display suggestions from the dataSource. The selected autocomplete mode determines how input text is matched against the available items, showing only those entries that meet the criteria—for example, items that start with, contain, or exactly match the user's input. This setting helps control the relevance and behavior of suggestion lists shown to the user while typing."none" | "auto" | "inline" | "manual"

Specifies the autocomplete mode used to filter and display suggestions from the dataSource. The selected autocomplete mode determines how input text is matched against the available items, showing only those entries that meet the criteria—for example, items that start with, contain, or exactly match the user's input. This setting helps control the relevance and behavior of suggestion lists shown to the user while typing.

Allowed Values

"none" - Auto complete is disabled.
"auto" - When the input matches one or many items from the dataSource the drop down opens and displays the matched items. The first suggested item is automatically highlighted as selected and becomes the value of the textbox when the combobox loses focus unless the user chooses a different item or changes the character string in the textbox.
"inline" - When the input matches one or many items from the dataSource the drop down opens and displays the matched items. The first suggested item is automatically highlighted as selected and becomes the value of the textbox when the combobox loses focus unless the user chooses a different item or changes the character string in the textbox. In addition to that a completion helper that appears next to the input cursor in the input. This helper shows the first possible match by completing the input text.
"manual" - When the input matches one or many items from the dataSource the drop down opens and displays the matched items.

Default value

"manual"

Try a demo showcasing the autoComplete property.

Examples

Markup and runtime examples for autoComplete:

HTML:

<smart-text-box auto-complete="auto"></smart-text-box>

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

const el = document.querySelector('smart-text-box');
el.autoComplete = "manual";

Read the current value:

const el = document.querySelector('smart-text-box');
const autoComplete = el.autoComplete;

autoCompleteDelaySpecifies the duration (in milliseconds) to wait after the user stops typing before displaying the dropdown with autocomplete suggestions. This delay helps control how quickly the matching results appear, improving performance and user experience by preventing unnecessary searches while the user is still typing.number

Specifies the duration (in milliseconds) to wait after the user stops typing before displaying the dropdown with autocomplete suggestions. This delay helps control how quickly the matching results appear, improving performance and user experience by preventing unnecessary searches while the user is still typing.

Default value

100

Examples

Markup and runtime examples for autoCompleteDelay:

HTML:

<smart-text-box auto-complete-delay="1000"></smart-text-box>

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

const el = document.querySelector('smart-text-box');
el.autoCompleteDelay = 1100;

Read the current value:

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

autoFocusSpecifies whether the text box should automatically receive keyboard focus when the page loads, allowing users to start typing immediately without clicking inside the box.boolean

Specifies whether the text box should automatically receive keyboard focus when the page loads, allowing users to start typing immediately without clicking inside the box.

Default value

false

Examples

Markup and runtime examples for autoFocus:

HTML attribute:

<smart-text-box auto-focus></smart-text-box>

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

const el = document.querySelector('smart-text-box');
el.autoFocus = false;

Read the current value:

const el = document.querySelector('smart-text-box');
const autoFocus = el.autoFocus;

dataSourceSpecifies the data source that populates the ComboBox options. The dataSource property accepts multiple types:- 'Array of strings or numbers:' Each item will be displayed as both the label and value of a list item.- 'Array of objects:' Each object should contain properties—such as label (displayed text) and value (item value)—that define the corresponding list item’s display and value.- 'Callback function:' You can provide a function that returns an array of items in either of the above forms. This allows for dynamic or asynchronous data loading.This flexible approach lets you easily integrate static lists, complex objects, or data fetched from external sources into the ComboBox.any

Specifies the data source that populates the ComboBox options. The dataSource property accepts multiple types:

- 'Array of strings or numbers:' Each item will be displayed as both the label and value of a list item.
- 'Array of objects:' Each object should contain properties—such as label (displayed text) and value (item value)—that define the corresponding list item’s display and value.
- 'Callback function:' You can provide a function that returns an array of items in either of the above forms. This allows for dynamic or asynchronous data loading.

This flexible approach lets you easily integrate static lists, complex objects, or data fetched from external sources into the ComboBox.

Try a demo showcasing the dataSource property.

Examples

Markup and runtime examples for dataSource:

HTML:

<smart-text-box data-source="["item 1", "item 2"]"></smart-text-box>

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

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

Read the current value:

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

disabledDetermines whether the element is active and interactive (enabled) or inactive and unresponsive to user interactions (disabled). When set to "disabled," the element cannot be focused, clicked, or edited by the user.boolean

Determines whether the element is active and interactive (enabled) or inactive and unresponsive to user interactions (disabled). When set to "disabled," the element cannot be focused, clicked, or edited by the user.

Default value

false

Examples

Markup and runtime examples for disabled:

HTML attribute:

<smart-text-box disabled></smart-text-box>

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

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

Read the current value:

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

displayLoadingIndicatorSpecifies whether a visual indicator (such as a loading spinner or progress bar) will be displayed while filtering data or loading items from a remote source. This helps inform users that a background operation is in progress.boolean

Specifies whether a visual indicator (such as a loading spinner or progress bar) will be displayed while filtering data or loading items from a remote source. This helps inform users that a background operation is in progress.

Default value

false

Examples

Markup and runtime examples for displayLoadingIndicator:

HTML attribute:

<smart-text-box display-loading-indicator></smart-text-box>

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

const el = document.querySelector('smart-text-box');
el.displayLoadingIndicator = false;

Read the current value:

const el = document.querySelector('smart-text-box');
const displayLoadingIndicator = el.displayLoadingIndicator;

displayMemberSets or retrieves the displayMember property. The displayMember determines which property of each object in the data source collection (defined by the 'dataSource' property) will be used for display purposes in the user interface. By specifying the name of a property here, you control which value from each data source item is shown to users (e.g., displaying a "name" property from a list of user objects).string

Sets or retrieves the displayMember property. The displayMember determines which property of each object in the data source collection (defined by the 'dataSource' property) will be used for display purposes in the user interface. By specifying the name of a property here, you control which value from each data source item is shown to users (e.g., displaying a "name" property from a list of user objects).

Default value

""""

Try a demo showcasing the displayMember property.

Examples

Markup and runtime examples for displayMember:

HTML:

<smart-text-box display-member="label"></smart-text-box>

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

const el = document.querySelector('smart-text-box');
el.displayMember = "name";

Read the current value:

const el = document.querySelector('smart-text-box');
const displayMember = el.displayMember;

displayModeSpecifies the visual presentation of characters within the input field, such as whether the characters are visible as plain text, masked (e.g., as password dots), or formatted in a particular style. This attribute controls how users see the inputted content while typing or reviewing their entries."default" | "escaped"

Specifies the visual presentation of characters within the input field, such as whether the characters are visible as plain text, masked (e.g., as password dots), or formatted in a particular style. This attribute controls how users see the inputted content while typing or reviewing their entries.

Allowed Values

"default" - Default behavior. Every character is as is.
"escaped" - Replaces the special characters with their corresponding character codes. For example, line breaks are replace with '
'.

Default value

"default"

Try a demo showcasing the displayMode property.

Examples

Markup and runtime examples for displayMode:

HTML:

<smart-text-box display-mode="escaped"></smart-text-box>

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

const el = document.querySelector('smart-text-box');
el.displayMode = "default";

Read the current value:

const el = document.querySelector('smart-text-box');
const displayMode = el.displayMode;

dropDownAppendToSpecifies the parent container to which the dropdown menu is appended in the DOM. By default, the dropdown is rendered within its original parent element. However, if an ancestor element has restricted overflow (e.g., 'overflow: hidden' or 'overflow: auto'), the dropdown may be clipped and not display correctly. To resolve this, you can set the dropDownAppendTo property to ''body'', the ID of a specific HTML element, or a direct reference to an HTML element. When set, the dropdown will be moved to the specified container in the DOM, ensuring it displays properly regardless of overflow constraints in its ancestors. To restore the dropdown to its original parent, reset this property to `null`. This feature is especially useful for ensuring that dropdowns are visible and functional in complex layouts where parent elements limit visibility due to CSS overflow properties.any

Specifies the parent container to which the dropdown menu is appended in the DOM. By default, the dropdown is rendered within its original parent element. However, if an ancestor element has restricted overflow (e.g., 'overflow: hidden' or 'overflow: auto'), the dropdown may be clipped and not display correctly. To resolve this, you can set the dropDownAppendTo property to ''body'', the ID of a specific HTML element, or a direct reference to an HTML element. When set, the dropdown will be moved to the specified container in the DOM, ensuring it displays properly regardless of overflow constraints in its ancestors. To restore the dropdown to its original parent, reset this property to null.

This feature is especially useful for ensuring that dropdowns are visible and functional in complex layouts where parent elements limit visibility due to CSS overflow properties.

Try a demo showcasing the dropDownAppendTo property.

Examples

Markup and runtime examples for dropDownAppendTo:

HTML:

<smart-text-box drop-down-append-to="body"></smart-text-box>

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

const el = document.querySelector('smart-text-box');
el.dropDownAppendTo = null;

Read the current value:

const el = document.querySelector('smart-text-box');
const dropDownAppendTo = el.dropDownAppendTo;

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 a CSS variable. To customize the dropdown's height directly, you can assign a specific value (e.g., "200px" or "50%") to this property. Otherwise, leaving it empty enables the component to use the height defined by the associated CSS variable.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 a CSS variable. To customize the dropdown's height directly, you can assign a specific value (e.g., "200px" or "50%") to this property. Otherwise, leaving it empty enables the component to use the height defined by the associated CSS variable.

Default value

Examples

Markup and runtime examples for dropDownHeight:

HTML:

<smart-text-box drop-down-height="auto"></smart-text-box>

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

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

Read the current value:

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

dropDownMaxHeightDefines the maximum height for the dropdown menu. If no value is set (default is an empty string), the dropdown’s maximum height will be determined by a corresponding CSS variable instead. This allows for dynamic styling via CSS, while still providing the option to specify a fixed maximum height directly through this property.string | number

Defines the maximum height for the dropdown menu. If no value is set (default is an empty string), the dropdown’s maximum height will be determined by a corresponding CSS variable instead. This allows for dynamic styling via CSS, while still providing the option to specify a fixed maximum height directly through this property.

Default value

Examples

Markup and runtime examples for dropDownMaxHeight:

HTML:

<smart-text-box drop-down-max-height="800"></smart-text-box>

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

const el = document.querySelector('smart-text-box');
el.dropDownMaxHeight = 1000;

Read the current value:

const el = document.querySelector('smart-text-box');
const dropDownMaxHeight = el.dropDownMaxHeight;

dropDownMaxWidthSpecifies the maximum width of the dropdown menu. By default, this property is set to an empty string, meaning that the dropdown's max-width is determined by a corresponding CSS variable. If a specific value (such as '300px' or '100%') is provided, it will override the CSS variable and directly set the maximum width of the dropdown.string | number

Specifies the maximum width of the dropdown menu. By default, this property is set to an empty string, meaning that the dropdown's max-width is determined by a corresponding CSS variable. If a specific value (such as '300px' or '100%') is provided, it will override the CSS variable and directly set the maximum width of the dropdown.

Default value

Examples

Markup and runtime examples for dropDownMaxWidth:

HTML:

<smart-text-box drop-down-max-width="500"></smart-text-box>

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

const el = document.querySelector('smart-text-box');
el.dropDownMaxWidth = 800;

Read the current value:

const el = document.querySelector('smart-text-box');
const dropDownMaxWidth = el.dropDownMaxWidth;

dropDownMinHeightDefines the minimum height of the dropdown menu. By default, this property is set to an empty string (""), which means the minimum height is not explicitly specified in the component and will instead be determined by the value of a related CSS variable. If a specific value (such as "200px" or "2rem") is provided, it will override the CSS variable and set the minimum height of the dropdown directly.string | number

Defines the minimum height of the dropdown menu. By default, this property is set to an empty string (""), which means the minimum height is not explicitly specified in the component and will instead be determined by the value of a related CSS variable. If a specific value (such as "200px" or "2rem") is provided, it will override the CSS variable and set the minimum height of the dropdown directly.

Default value

Examples

Markup and runtime examples for dropDownMinHeight:

HTML:

<smart-text-box drop-down-min-height="50"></smart-text-box>

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

const el = document.querySelector('smart-text-box');
el.dropDownMinHeight = 150;

Read the current value:

const el = document.querySelector('smart-text-box');
const dropDownMinHeight = el.dropDownMinHeight;

dropDownMinWidthSpecifies the minimum width of the dropdown menu. By default, this property is set to an empty string, which means the dropdown's minimum width is determined by a corresponding CSS variable. If you provide a specific value (such as '200px' or '20rem'), it will override the CSS variable and set the dropdown's minimum width accordingly.string | number

Specifies the minimum width of the dropdown menu. By default, this property is set to an empty string, which means the dropdown's minimum width is determined by a corresponding CSS variable. If you provide a specific value (such as '200px' or '20rem'), it will override the CSS variable and set the dropdown's minimum width accordingly.

Default value

Examples

Markup and runtime examples for dropDownMinWidth:

HTML:

<smart-text-box drop-down-min-width="100"></smart-text-box>

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

const el = document.querySelector('smart-text-box');
el.dropDownMinWidth = 90;

Read the current value:

const el = document.querySelector('smart-text-box');
const dropDownMinWidth = el.dropDownMinWidth;

dropDownOpenModeSpecifies the direction or animation style in which the dropdown menu appears when activated (e.g., opens upwards, downwards, or with a fade effect)."none" | "default" | "auto"

Specifies the direction or animation style in which the dropdown menu appears when activated (e.g., opens upwards, downwards, or with a fade effect).

Allowed Values

"none" - The drop down can't be opened.
"default" - The drop down opens when the user clicks on the element
"auto" - The drop down opens when the element is hovered and closes when not.

Default value

"default"

Examples

Markup and runtime examples for dropDownOpenMode:

HTML:

<smart-text-box drop-down-open-mode="auto"></smart-text-box>

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

const el = document.querySelector('smart-text-box');
el.dropDownOpenMode = "default";

Read the current value:

const el = document.querySelector('smart-text-box');
const dropDownOpenMode = el.dropDownOpenMode;

dropDownOverlayWhen this property is enabled, opening the element’s dropdown will create a transparent overlay that covers the entire area between the dropdown and the rest of the webpage. This overlay ensures that any clicks outside the dropdown are intercepted by the overlay itself, rather than interacting with underlying DOM elements. As a result, clicking outside the dropdown can be handled consistently—for example, to close the dropdown—without triggering unintended interactions elsewhere on the page.boolean

When this property is enabled, opening the element’s dropdown will create a transparent overlay that covers the entire area between the dropdown and the rest of the webpage. This overlay ensures that any clicks outside the dropdown are intercepted by the overlay itself, rather than interacting with underlying DOM elements. As a result, clicking outside the dropdown can be handled consistently—for example, to close the dropdown—without triggering unintended interactions elsewhere on the page.

Default value

false

Examples

Markup and runtime examples for dropDownOverlay:

HTML attribute:

<smart-text-box drop-down-overlay></smart-text-box>

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

const el = document.querySelector('smart-text-box');
el.dropDownOverlay = false;

Read the current value:

const el = document.querySelector('smart-text-box');
const dropDownOverlay = el.dropDownOverlay;

dropDownPlaceholderSpecifies the placeholder text that appears in the dropdown menu when there are no available items to display. This text provides guidance or context to users, indicating that the dropdown is currently empty.string

Specifies the placeholder text that appears in the dropdown menu when there are no available items to display. This text provides guidance or context to users, indicating that the dropdown is currently empty.

Default value

"No Items"

Examples

Markup and runtime examples for dropDownPlaceholder:

HTML:

<smart-text-box drop-down-placeholder="No Items"></smart-text-box>

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

const el = document.querySelector('smart-text-box');
el.dropDownPlaceholder = "Empty";

Read the current value:

const el = document.querySelector('smart-text-box');
const dropDownPlaceholder = el.dropDownPlaceholder;

dropDownPositionSpecifies the alignment and placement of the dropdown menu relative to its trigger element when the dropdown is opened, allowing you to control where the menu appears on the screen (e.g., above, below, left, or right of the trigger)."auto" | "top" | "bottom" | "overlay-top" | "overlay-center" | "overlay-bottom" | "center-bottom" | "center-top"

Specifies the alignment and placement of the dropdown menu relative to its trigger element when the dropdown is opened, allowing you to control where the menu appears on the screen (e.g., above, below, left, or right of the trigger).

Allowed Values

"auto" - The position is automatically determines 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 drop down 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.
"overlay-top" - The drop down opens above and over the element. The bottom edges of the drop down cover the element.
"overlay-center" - The drop down opens at the center, over the element.
"overlay-bottom" - The drop down opens under and over the element. The top edges of the drop down cover the element.
"center-bottom" - The drop down opens at the center, below the element.
"center-top" - The drop down opens at the center, over the element.

Default value

"auto"

Examples

Markup and runtime examples for dropDownPosition:

HTML:

<smart-text-box drop-down-position="top"></smart-text-box>

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

const el = document.querySelector('smart-text-box');
el.dropDownPosition = "bottom";

Read the current value:

const el = document.querySelector('smart-text-box');
const dropDownPosition = el.dropDownPosition;

dropDownWidthSpecifies 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 for flexible styling through external or theme-based CSS. To explicitly set a custom width, provide a valid CSS width value (e.g., "200px", "50%").string | number

Specifies 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 for flexible styling through external or theme-based CSS. To explicitly set a custom width, provide a valid CSS width value (e.g., "200px", "50%").

Default value

Examples

Markup and runtime examples for dropDownWidth:

HTML:

<smart-text-box drop-down-width="auto"></smart-text-box>

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

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

Read the current value:

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

enterKeyBehaviorDefines how the "Enter" key functions within the application, such as whether it submits a form, inserts a new line, or triggers a specific action, depending on the context."submit" | "clearOnSubmit"

Defines how the "Enter" key functions within the application, such as whether it submits a form, inserts a new line, or triggers a specific action, depending on the context.

Allowed Values

"submit" - Submits the value.
"clearOnSubmit" - Submits and clears the value.

Default value

"submit"

Examples

Markup and runtime examples for enterKeyBehavior:

HTML:

<smart-text-box enter-key-behavior="newLine"></smart-text-box>

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

const el = document.querySelector('smart-text-box');
el.enterKeyBehavior = "submit";

Read the current value:

const el = document.querySelector('smart-text-box');
const enterKeyBehavior = el.enterKeyBehavior;

escKeyModeSpecifies how the element responds when the Escape key is pressed, such as closing a dialog, dismissing a modal, or performing a custom action."none" | "previousValue" | "clearValue"

Specifies how the element responds when the Escape key is pressed, such as closing a dialog, dismissing a modal, or performing a custom action.

Allowed Values

"none" - Nothing happens on escape key.
"previousValue" - The previous value is retrieved.
"clearValue" - The value is cleared.

Default value

"none"

Examples

Markup and runtime examples for escKeyMode:

HTML:

<smart-text-box esc-key-mode="contains"></smart-text-box>

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

const el = document.querySelector('smart-text-box');
el.escKeyMode = "equals";

Read the current value:

const el = document.querySelector('smart-text-box');
const escKeyMode = el.escKeyMode;

formSpecifies the form element with which this element is associated, known as its "form owner." The value of this attribute must be the ID of a element present in the same document. This allows the element to be associated with a specific form, even if it is not nested directly within the form’s markup.string

Specifies the form element with which this element is associated, known as its "form owner." The value of this attribute must be the ID of a element present in the same document. This allows the element to be associated with a specific form, even if it is not nested directly within the form’s markup.

Default value

Examples

Markup and runtime examples for form:

HTML:

<smart-text-box form="form1"></smart-text-box>

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

const el = document.querySelector('smart-text-box');
el.form = "form2";

Read the current value:

const el = document.querySelector('smart-text-box');
const form = el.form;

hintProvides supplemental helper text displayed beneath the element. This hint appears exclusively when the element is focused, offering contextual guidance to the user during interaction.any

Provides supplemental helper text displayed beneath the element. This hint appears exclusively when the element is focused, offering contextual guidance to the user during interaction.

Examples

Markup and runtime examples for hint:

HTML:

<smart-text-box hint="Helper text"></smart-text-box>

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

const el = document.querySelector('smart-text-box');
el.hint = "Hint";

Read the current value:

const el = document.querySelector('smart-text-box');
const hint = el.hint;

horizontalScrollBarVisibilityControls whether the horizontal scroll bar within the dropdown menu is visible. This setting allows you to enable or disable horizontal scrolling for dropdown content that extends beyond the visible area."auto" | "disabled" | "hidden" | "visible"

Controls whether the horizontal scroll bar within the dropdown menu is visible. This setting allows you to enable or disable horizontal scrolling for dropdown content that extends beyond the visible area.

Allowed Values

"auto" - The element automatically determines whether or not the horizontal Scroll bar should be visible or not.
"disabled" - Disables the horizontal Scroll bar.
"hidden" - Hides the horizontal Scroll bar.
"visible" - Shows the horizontal Scroll bar even if not necessary.

Default value

"auto"

Examples

Markup and runtime examples for horizontalScrollBarVisibility:

HTML:

<smart-text-box horizontal-scroll-bar-visibility="disabled"></smart-text-box>

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

const el = document.querySelector('smart-text-box');
el.horizontalScrollBarVisibility = "hidden";

Read the current value:

const el = document.querySelector('smart-text-box');
const horizontalScrollBarVisibility = el.horizontalScrollBarVisibility;

inputMemberRepresents the property key of a List item's object that specifies which value should be displayed in the input field when a ListItem is selected. This property is useful when you want to show a value other than the default label—such as a unique identifier or another attribute—within the input. By default, the item's label is shown. Use this option to customize the displayed value based on a different property from your data objects.string

Represents the property key of a List item's object that specifies which value should be displayed in the input field when a ListItem is selected. This property is useful when you want to show a value other than the default label—such as a unique identifier or another attribute—within the input. By default, the item's label is shown. Use this option to customize the displayed value based on a different property from your data objects.

Default value

Examples

Markup and runtime examples for inputMember:

HTML:

<smart-text-box input-member="label"></smart-text-box>

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

const el = document.querySelector('smart-text-box');
el.inputMember = "value";

Read the current value:

const el = document.querySelector('smart-text-box');
const inputMember = el.inputMember;

inputPurposeDefines the purpose of the input field and specifies the type of data expected, providing guidance to browsers and user agents for offering autofill suggestions. This property maps directly to the standard HTML autocomplete attribute, allowing developers to control whether and how a browser can automatically fill in the field based on the user's stored information. Possible values include generic options like 'on' and 'off', as well as more specific data types such as 'name', 'organization', 'email', 'street-address', and others, enabling enhanced user experience and data accuracy in forms.string

Defines the purpose of the input field and specifies the type of data expected, providing guidance to browsers and user agents for offering autofill suggestions. This property maps directly to the standard HTML autocomplete attribute, allowing developers to control whether and how a browser can automatically fill in the field based on the user's stored information. Possible values include generic options like 'on' and 'off', as well as more specific data types such as 'name', 'organization', 'email', 'street-address', and others, enabling enhanced user experience and data accuracy in forms.

Default value

"off"

Examples

Markup and runtime examples for inputPurpose:

HTML:

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

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

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

Read the current value:

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

itemHeightSpecifies the height (in pixels) for each list item when rendering the list. This property is only applicable if list virtualization is enabled, as it allows the component to accurately calculate and display only the visible items for improved performance.number | null

Specifies the height (in pixels) for each list item when rendering the list.
This property is only applicable if list virtualization is enabled, as it allows the component to accurately calculate and display only the visible items for improved performance.

Examples

Markup and runtime examples for itemHeight:

HTML:

<smart-text-box item-height="20"></smart-text-box>

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

const el = document.querySelector('smart-text-box');
el.itemHeight = 30;

Read the current value:

const el = document.querySelector('smart-text-box');
const itemHeight = el.itemHeight;

itemMeasureModeSpecifies the algorithm used to calculate the width of each item, determining how item widths are measured and displayed within the layout. This setting influences whether widths are fixed, dynamic, or adapt based on content or container size."auto" | "precise"

Specifies the algorithm used to calculate the width of each item, determining how item widths are measured and displayed within the layout. This setting influences whether widths are fixed, dynamic, or adapt based on content or container size.

Allowed Values

"auto" - measures items based on the number of characters in their label
"precise" - measures items based on their actual size in the DOM; may hinder performance for large data sources

Default value

"auto"

Examples

Markup and runtime examples for itemMeasureMode:

HTML:

<smart-text-box item-measure-mode="precise"></smart-text-box>

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

const el = document.querySelector('smart-text-box');
el.itemMeasureMode = "auto";

Read the current value:

const el = document.querySelector('smart-text-box');
const itemMeasureMode = el.itemMeasureMode;

itemsA getter that retrieves and returns an array containing all the list item elements (e.g., '' elements) currently present within the dropdown menu. This allows easy access to all items displayed in the dropdown for further manipulation or inspection.{label: string, value: any}[]

A getter that retrieves and returns an array containing all the list item elements (e.g., '
' elements) currently present within the dropdown menu. This allows easy access to all items displayed in the dropdown for further manipulation or inspection.

Default value

itemTemplateThe itemTemplate property is a string specifying the id of an HTMLTemplateElement present in the DOM. This template is used to define and customize the structure and content of each item rendered within the list. By referencing the id of an HTMLTemplateElement, you can control how individual list items are displayed, allowing for flexible and reusable item layouts.any

The itemTemplate property is a string specifying the id of an HTMLTemplateElement present in the DOM. This template is used to define and customize the structure and content of each item rendered within the list. By referencing the id of an HTMLTemplateElement, you can control how individual list items are displayed, allowing for flexible and reusable item layouts.

Examples

Markup and runtime examples for itemTemplate:

HTML:

<smart-text-box item-template="'templateA'"></smart-text-box>

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

const el = document.querySelector('smart-text-box');
el.itemTemplate = "'templateB'";

Read the current value:

const el = document.querySelector('smart-text-box');
const itemTemplate = el.itemTemplate;

labelDisplays a small text label positioned above the element, typically used to provide additional context or information about the element’s purpose.string

Displays a small text label positioned above the element, typically used to provide additional context or information about the element’s purpose.

Default value

Try a demo showcasing the label property.

Examples

Markup and runtime examples for label:

HTML:

<smart-text-box label="Helper text"></smart-text-box>

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

const el = document.querySelector('smart-text-box');
el.label = "Label";

Read the current value:

const el = document.querySelector('smart-text-box');
const label = el.label;

loadingIndicatorPlaceholderSpecifies the text that appears alongside the loading indicator when the loader is visible and positioned at either the top or bottom of the container. This text provides context or status information to users while the loading process is ongoing.string

Specifies the text that appears alongside the loading indicator when the loader is visible and positioned at either the top or bottom of the container. This text provides context or status information to users while the loading process is ongoing.

Default value

"Loading..."

Examples

Markup and runtime examples for loadingIndicatorPlaceholder:

HTML:

<smart-text-box loading-indicator-placeholder="Incoming data"></smart-text-box>

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

const el = document.querySelector('smart-text-box');
el.loadingIndicatorPlaceholder = "LOADING...";

Read the current value:

const el = document.querySelector('smart-text-box');
const loadingIndicatorPlaceholder = el.loadingIndicatorPlaceholder;

loadingIndicatorPositionSpecifies the screen location where the loading indicator will be displayed (e.g., top, bottom, center, etc.), allowing developers to control the visual placement of the loading element within the application's interface."bottom" | "center" | "top"

Specifies the screen location where the loading indicator will be displayed (e.g., top, bottom, center, etc.), allowing developers to control the visual placement of the loading element within the application's interface.

Allowed Values

"bottom" - Positions the loading indicator at the bottom of the list.
"center" - Positions the loading indicator at the center of the list.
"top" - Positions the loading indicator at the bottom of the list.

Default value

"center"

Examples

Markup and runtime examples for loadingIndicatorPosition:

HTML:

<smart-text-box loading-indicator-position="bottom"></smart-text-box>

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

const el = document.querySelector('smart-text-box');
el.loadingIndicatorPosition = "top";

Read the current value:

const el = document.querySelector('smart-text-box');
const loadingIndicatorPosition = el.loadingIndicatorPosition;

localeSets or retrieves the current language for localization purposes. This property is used together with the messages property, which contains language-specific content or translations. Adjusting the language will determine which set of messages is displayed or utilized within the application.string

Sets or retrieves the current language for localization purposes. This property is used together with the messages property, which contains language-specific content or translations. Adjusting the language will determine which set of messages is displayed or utilized within the application.

Default value

"en"

Examples

Markup and runtime examples for locale:

HTML:

<smart-text-box locale="de"></smart-text-box>

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

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

Read the current value:

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

localizeFormatFunctionA callback function that allows you to define a custom format for messages returned by the Localization Module. This enables you to modify or enhance the localized messages—such as adding prefixes, changing text structure, or injecting dynamic values—before they are displayed to the user.function | null

A callback function that allows you to define a custom format for messages returned by the Localization Module. This enables you to modify or enhance the localized messages—such as adding prefixes, changing text structure, or injecting dynamic values—before they are displayed to the user.

Examples

Markup and runtime examples for localizeFormatFunction:

HTML:

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

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

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

Read the current value:

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

maxLengthSpecifies or retrieves the maximum number of characters allowed for user input in a text field. This limits how many characters a user can type or paste into the field.number

Specifies or retrieves the maximum number of characters allowed for user input in a text field. This limits how many characters a user can type or paste into the field.

Examples

Markup and runtime examples for maxLength:

HTML:

<smart-text-box max-length="120"></smart-text-box>

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

const el = document.querySelector('smart-text-box');
el.maxLength = 150;

Read the current value:

const el = document.querySelector('smart-text-box');
const maxLength = el.maxLength;

messagesDefines or retrieves an object containing the set of strings (such as labels, tooltips, button text, and messages) used throughout the widget interface, allowing these strings to be localized for different languages. This property works together with the language property to ensure the widget’s text content is displayed in the appropriate language for users.object

Defines or retrieves an object containing the set of strings (such as labels, tooltips, button text, and messages) used throughout the widget interface, allowing these strings to be localized for different languages. This property works together with the language property to ensure the widget’s text content is displayed in the appropriate language for users.

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-text-box 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-text-box>

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

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

minLengthSpecifies or retrieves the minimum number of characters a user must type before the auto-complete feature is activated and suggestions are displayed.number

Specifies or retrieves the minimum number of characters a user must type before the auto-complete feature is activated and suggestions are displayed.

Default value

Try a demo showcasing the minLength property.

Examples

Markup and runtime examples for minLength:

HTML:

<smart-text-box min-length="1"></smart-text-box>

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

const el = document.querySelector('smart-text-box');
el.minLength = 3;

Read the current value:

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

nameSets or retrieves the name attribute of the element. The name attribute specifies a key associated with the element's value when submitting HTML forms, enabling server-side identification and processing of submitted data. This is essential for form controls such as inputs, selects, and textareas.string

Sets or retrieves the name attribute of the element. The name attribute specifies a key associated with the element's value when submitting HTML forms, enabling server-side identification and processing of submitted data. This is essential for form controls such as inputs, selects, and textareas.

Default value

Try a demo showcasing the name property.

Examples

Markup and runtime examples for name:

HTML:

<smart-text-box name="combobox"></smart-text-box>

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

const el = document.querySelector('smart-text-box');
el.name = "comboBox2";

Read the current value:

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

openedIndicates whether the dropdown menu is currently expanded (open) and visible to the user, or collapsed (closed) and hidden from view.boolean

Indicates whether the dropdown menu is currently expanded (open) and visible to the user, or collapsed (closed) and hidden from view.

Default value

false

Examples

Markup and runtime examples for opened:

HTML attribute:

<smart-text-box opened></smart-text-box>

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

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

Read the current value:

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

placeholderSpecifies the placeholder text that appears inside the input field when it is empty, providing guidance or an example of the expected input to the user.string

Specifies the placeholder text that appears inside the input field when it is empty, providing guidance or an example of the expected input to the user.

Default value

Try a demo showcasing the placeholder property.

Examples

Markup and runtime examples for placeholder:

HTML:

<smart-text-box placeholder="Choose:"></smart-text-box>

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

const el = document.querySelector('smart-text-box');
el.placeholder = "Submit";

Read the current value:

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

readonlyPrevents any user interaction with the element, disabling actions such as clicking, focusing, hovering, or keyboard input. The element will not respond to any user events while this setting is applied.boolean

Prevents any user interaction with the element, disabling actions such as clicking, focusing, hovering, or keyboard input. The element will not respond to any user events while this setting is applied.

Default value

false

Examples

Markup and runtime examples for readonly:

HTML attribute:

<smart-text-box readonly></smart-text-box>

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

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

Read the current value:

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

requiredIndicates that the input field is required, meaning the user must provide a value in this field before the form can be submitted successfully. If the input is left empty, the form submission will be blocked and the user will be prompted to complete the required information.boolean

Indicates that the input field is required, meaning the user must provide a value in this field before the form can be submitted successfully. If the input is left empty, the form submission will be blocked and the user will be prompted to complete the required information.

Default value

false

Examples

Markup and runtime examples for required:

HTML attribute:

<smart-text-box required></smart-text-box>

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

const el = document.querySelector('smart-text-box');
el.required = false;

Read the current value:

const el = document.querySelector('smart-text-box');
const required = el.required;

requiredMessageDefines the custom error message displayed to users when the input is marked as required but no value has been entered. If the required field is left empty, this message will be shown to prompt the user to provide the necessary input.string

Defines the custom error message displayed to users when the input is marked as required but no value has been entered. If the required field is left empty, this message will be shown to prompt the user to provide the necessary input.

Default value

Examples

Markup and runtime examples for requiredMessage:

HTML:

<smart-text-box required-message="Required"></smart-text-box>

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

const el = document.querySelector('smart-text-box');
el.requiredMessage = "Mandatory";

Read the current value:

const el = document.querySelector('smart-text-box');
const requiredMessage = el.requiredMessage;

rightToLeftSets or retrieves a value that specifies whether the element’s content is aligned for right-to-left (RTL) text direction, supporting languages and locales such as Arabic or Hebrew. When enabled, the element’s layout and text flow will be adjusted to display content appropriately for RTL reading order.boolean

Sets or retrieves a value that specifies whether the element’s content is aligned for right-to-left (RTL) text direction, supporting languages and locales such as Arabic or Hebrew. When enabled, the element’s layout and text flow will be adjusted to display content appropriately for RTL reading order.

Default value

false

Try a demo showcasing the rightToLeft property.

Examples

Markup and runtime examples for rightToLeft:

HTML attribute:

<smart-text-box right-to-left></smart-text-box>

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

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

Read the current value:

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

selectAllOnFocusSpecifies whether the entire content of the input field should automatically be highlighted (selected) when the input receives focus, allowing users to easily replace or copy the content.boolean

Specifies whether the entire content of the input field should automatically be highlighted (selected) when the input receives focus, allowing users to easily replace or copy the content.

Default value

false

Examples

Markup and runtime examples for selectAllOnFocus:

HTML attribute:

<smart-text-box select-all-on-focus></smart-text-box>

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

const el = document.querySelector('smart-text-box');
el.selectAllOnFocus = false;

Read the current value:

const el = document.querySelector('smart-text-box');
const selectAllOnFocus = el.selectAllOnFocus;

themeSpecifies the theme to be applied, which controls the overall appearance and visual style of the element, including colors, fonts, and other stylistic details.string

Specifies the theme to be applied, which controls the overall appearance and visual style of the element, including colors, fonts, and other stylistic details.

Default value

Examples

Markup and runtime examples for theme:

HTML:

<smart-text-box theme="blue"></smart-text-box>

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

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

Read the current value:

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

unfocusableIf set to true, the element will be excluded from the tab order and cannot receive keyboard or programmatic focus. This means users will not be able to navigate to the element using the Tab key or set focus to it via scripts.boolean

If set to true, the element will be excluded from the tab order and cannot receive keyboard or programmatic focus. This means users will not be able to navigate to the element using the Tab key or set focus to it via scripts.

Default value

false

Examples

Markup and runtime examples for unfocusable:

HTML attribute:

<smart-text-box unfocusable></smart-text-box>

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

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

Read the current value:

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

unlockKeyDefines or retrieves the unlockKey, a unique code or token used to grant access to the product's features or functionality.string

Defines or retrieves the unlockKey, a unique code or token used to grant access to the product's features or functionality.

Default value

Examples

Markup and runtime examples for unlockKey:

HTML:

<smart-text-box unlock-key=""></smart-text-box>

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

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

Read the current value:

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

valueSets a new value for the element or retrieves its current value, depending on how the method is used. Useful for reading or updating the content, input, or state of form elements such as text fields, checkboxes, or select menus.string

Sets a new value for the element or retrieves its current value, depending on how the method is used. Useful for reading or updating the content, input, or state of form elements such as text fields, checkboxes, or select menus.

Default value

Try a demo showcasing the value property.

Examples

Markup and runtime examples for value:

HTML:

<smart-text-box value="Demo value."></smart-text-box>

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

const el = document.querySelector('smart-text-box');
el.value = "New demo value.";

Read the current value:

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

valueMemberSpecifies which property of each item object represents its value. The valueMember setting is particularly useful when binding the ListBox to data from a JSON file as its dataSource and you need to designate a specific property in the JSON objects to be used as the item's value. This is similar to how groupMember works, but instead of grouping items, valueMember tells the ListBox which property to use for the underlying value of each list item. For example, if your JSON objects have an "id" property, setting valueMember to "id" will store the value of the "id" property for each item in the ListBox.string

Specifies which property of each item object represents its value. The valueMember setting is particularly useful when binding the ListBox to data from a JSON file as its dataSource and you need to designate a specific property in the JSON objects to be used as the item's value. This is similar to how groupMember works, but instead of grouping items, valueMember tells the ListBox which property to use for the underlying value of each list item. For example, if your JSON objects have an "id" property, setting valueMember to "id" will store the value of the "id" property for each item in the ListBox.

Default value

""""

Try a demo showcasing the valueMember property.

Examples

Markup and runtime examples for valueMember:

HTML:

<smart-text-box value-member="value"></smart-text-box>

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

const el = document.querySelector('smart-text-box');
el.valueMember = "newValue";

Read the current value:

const el = document.querySelector('smart-text-box');
const valueMember = el.valueMember;

verticalScrollBarVisibilityControls whether the vertical scroll bar within the dropdown menu is visible. This property allows you to specify if users can scroll vertically to view additional dropdown options when the content overflows the visible area."auto" | "disabled" | "hidden" | "visible"

Controls whether the vertical scroll bar within the dropdown menu is visible. This property allows you to specify if users can scroll vertically to view additional dropdown options when the content overflows the visible area.

Allowed Values

"auto" - The element automatically determines whether or not the horizontal scroll bar should be visible or not.
"disabled" - Disables the horizontal scroll bar.
"hidden" - Hides the horizontal scroll bar.
"visible" - Shows the horizontal scroll bar even if not necessary.

Default value

"auto"

Examples

Markup and runtime examples for verticalScrollBarVisibility:

HTML:

<smart-text-box vertical-scroll-bar-visibility="hidden"></smart-text-box>

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

const el = document.querySelector('smart-text-box');
el.verticalScrollBarVisibility = "visible";

Read the current value:

const el = document.querySelector('smart-text-box');
const verticalScrollBarVisibility = el.verticalScrollBarVisibility;

Events

changeThis event is triggered whenever the value in the Text Box changes and is confirmed by the user. Specifically, it fires under two conditions: 1. When the user moves focus away from the Text Box (on blur). 2. When the user presses the 'Enter' key while the Text Box is focused. This ensures that the event only occurs after the user has finished editing the text, rather than on every keystroke.CustomEvent

This event is triggered whenever the value in the Text Box changes and is confirmed by the user. Specifically, it fires under two conditions:
1. When the user moves focus away from the Text Box (on blur).
2. When the user presses the 'Enter' key while the Text Box is focused.

This ensures that the event only occurs after the user has finished editing the text, rather than on every keystroke.

Bubbles Yes
Cancelable No
Interface CustomEvent
Event handler property onChange

Arguments

evCustomEvent

ev.detailObject

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

ev.detail.value - The new value.

ev.detail.type - The type of the event.

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-text-box')?.addEventListener('change', (event) => {
    const detail = event.detail,
        oldValue = detail.oldValue,
        value = detail.value,
        type = detail.type;

	// event handling code goes here.
})

changingThis event is triggered each time a user releases a key (on the keyup event) within the TextBox, but only if the content of the TextBox has changed since the previous event.CustomEvent

This event is triggered each time a user releases a key (on the keyup event) within the TextBox, but only if the content of the TextBox has changed since the previous 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-text-box')?.addEventListener('changing', (event) => {
    const detail = event.detail,
        oldValue = detail.oldValue,
        value = detail.value;

	// event handling code goes here.
})

Methods

close(): voidCloses the drop-down menu associated with the input field. Note: The drop-down appears only when auto-complete functionality is enabled, allowing users to select from suggested options.

Closes the drop-down menu associated with the input field. Note: The drop-down appears only when auto-complete functionality is enabled, allowing users to select from suggested options.

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

document.querySelector('smart-text-box')?.close();

open(): voidExpands the drop-down menu, allowing users to view and select available options. This drop-down menu is displayed exclusively when the autocomplete feature is enabled, providing relevant suggestions based on user input.

Expands the drop-down menu, allowing users to view and select available options. This drop-down menu is displayed exclusively when the autocomplete feature is enabled, providing relevant suggestions based on user input.

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

document.querySelector('smart-text-box')?.open();

reset(): voidThis method resets the input field to its original, initial value, effectively clearing any changes made by the user and restoring the input to its default state as set when the component or page first loaded.

This method resets the input field to its original, initial value, effectively clearing any changes made by the user and restoring the input to its default state as set when the component or page first loaded.

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

document.querySelector('smart-text-box')?.reset();

CSS Variables

--smart-text-box-default-widthvar()

Default value

"var(--smart-editor-width)"

Text Box default width.

--smart-text-box-default-heightvar()

Default value

"var(--smart-editor-height)"

Text Box default height.