TextBox Javascript API

Class

TextBox

TextBox is an input field with auto-suggest options.

Selector

smart-text-box

Properties

Events

Methods

Properties

animation"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

 <smart-text-box animation='none'></smart-text-box>

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

 textbox.animation = 'simple';

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

 let animation = textbox.animation;

autoFocusboolean

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.

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

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

 textbox.autoFocus = false;

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

 let autoFocus = textbox.autoFocus;

autoComplete"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.

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

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

 textbox.autoComplete = 'manual';

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

 let autoComplete = textbox.autoComplete;

autoCompleteDelaynumber

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.

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

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

 textbox.autoCompleteDelay = 1100;

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

 let autoCompleteDelay = textbox.autoCompleteDelay;

dataSourceany

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.

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

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

 textbox.dataSource = ["new item 1", "new item 2"];

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

 let dataSource = textbox.dataSource;

disabledboolean

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.

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

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

 textbox.disabled = false;

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

 let disabled = textbox.disabled;

displayLoadingIndicatorboolean

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.

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

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

 textbox.displayLoadingIndicator = false;

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

 let displayLoadingIndicator = textbox.displayLoadingIndicator;

displayMemberstring

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

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

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

 textbox.displayMember = 'name';

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

 let displayMember = textbox.displayMember;

displayMode"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 '
  '.

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

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

 textbox.displayMode = 'default';

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

 let displayMode = textbox.displayMode;

dropDownAppendToany

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.

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

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

 textbox.dropDownAppendTo = null;

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

 let dropDownAppendTo = textbox.dropDownAppendTo;

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

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

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

 textbox.dropDownHeight = 500;

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

 let dropDownHeight = textbox.dropDownHeight;

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

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

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

 textbox.dropDownMaxHeight = 1000;

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

 let dropDownMaxHeight = textbox.dropDownMaxHeight;

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

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

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

 textbox.dropDownMaxWidth = 800;

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

 let dropDownMaxWidth = textbox.dropDownMaxWidth;

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

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

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

 textbox.dropDownMinHeight = 150;

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

 let dropDownMinHeight = textbox.dropDownMinHeight;

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

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

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

 textbox.dropDownMinWidth = 90;

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

 let dropDownMinWidth = textbox.dropDownMinWidth;

dropDownOpenMode"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.

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

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

 textbox.dropDownOpenMode = 'default';

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

 let dropDownOpenMode = textbox.dropDownOpenMode;

dropDownOverlayboolean

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.

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

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

 textbox.dropDownOverlay = false;

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

 let dropDownOverlay = textbox.dropDownOverlay;

dropDownPlaceholderstring

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.

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

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

 textbox.dropDownPlaceholder = 'Empty';

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

 let dropDownPlaceholder = textbox.dropDownPlaceholder;

dropDownPosition"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.

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

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

 textbox.dropDownPosition = 'bottom';

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

 let dropDownPosition = textbox.dropDownPosition;

dropDownWidthstring | 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%").

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

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

 textbox.dropDownWidth = 500;

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

 let dropDownWidth = textbox.dropDownWidth;

escKeyMode"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.

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

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

 textbox.escKeyMode = 'equals';

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

 let escKeyMode = textbox.escKeyMode;

enterKeyBehavior"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.

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

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

 textbox.enterKeyBehavior = 'submit';

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

 let enterKeyBehavior = textbox.enterKeyBehavior;

formstring

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.

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

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

 textbox.form = 'form2';

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

 let form = textbox.form;

hintany

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.

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

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

 textbox.hint = Hint;

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

 let hint = textbox.hint;

horizontalScrollBarVisibility"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.

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

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

 textbox.horizontalScrollBarVisibility = 'hidden';

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

 let horizontalScrollBarVisibility = textbox.horizontalScrollBarVisibility;

inputMemberstring

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.

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

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

 textbox.inputMember = 'value';

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

 let inputMember = textbox.inputMember;

inputPurposestring

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.

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

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

 textbox.inputPurpose = 'country';

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

 let inputPurpose = textbox.inputPurpose;

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

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

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

 textbox.itemHeight = 30;

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

 let itemHeight = textbox.itemHeight;

itemMeasureMode"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

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

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

 textbox.itemMeasureMode = 'auto';

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

 let itemMeasureMode = textbox.itemMeasureMode;

items{label: string, value: any}[]

A getter that retrieves and returns an array containing all the list item elements (e.g., '

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

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

 textbox.itemTemplate = 'templateB';

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

 let itemTemplate = textbox.itemTemplate;

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

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

 textbox.label = 'Label';

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

 let label = textbox.label;

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

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

 textbox.loadingIndicatorPlaceholder = 'LOADING...';

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

 let loadingIndicatorPlaceholder = textbox.loadingIndicatorPlaceholder;

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

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

 textbox.loadingIndicatorPosition = 'top';

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

 let loadingIndicatorPosition = textbox.loadingIndicatorPosition;

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

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

 textbox.unlockKey = '1111-2222-3333-4444-5555';

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

 let unlockKey = textbox.unlockKey;

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

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

 textbox.locale = 'en';

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

 let locale = textbox.locale;

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

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

 textbox.localizeFormatFunction = function(defaultMessage, message, messageArguments){return '...'};

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

 let localizeFormatFunction = textbox.localizeFormatFunction;

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

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

 textbox.maxLength = 150;

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

 let maxLength = textbox.maxLength;

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

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

 textbox.minLength = 3;

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

 let minLength = textbox.minLength;

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

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

 textbox.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}}."}};

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

 let messages = textbox.messages;

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

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

 textbox.name = 'comboBox2';

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

 let name = textbox.name;

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

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

 textbox.opened = false;

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

 let opened = textbox.opened;

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

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

 textbox.placeholder = 'Submit';

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

 let placeholder = textbox.placeholder;

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

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

 textbox.readonly = false;

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

 let readonly = textbox.readonly;

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

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

 textbox.rightToLeft = true;

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

 let rightToLeft = textbox.rightToLeft;

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

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

 textbox.required = false;

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

 let required = textbox.required;

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

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

 textbox.requiredMessage = 'Mandatory';

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

 let requiredMessage = textbox.requiredMessage;

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

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

 textbox.selectAllOnFocus = false;

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

 let selectAllOnFocus = textbox.selectAllOnFocus;

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

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

 textbox.theme = 'red';

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

 let theme = textbox.theme;

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

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

 textbox.unfocusable = false;

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

 let unfocusable = textbox.unfocusable;

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

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

 textbox.value = 'New demo value.';

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

 let value = textbox.value;

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

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

 textbox.valueMember = 'newValue';

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

 let valueMember = textbox.valueMember;

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

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

 textbox.verticalScrollBarVisibility = 'visible';

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

 let verticalScrollBarVisibility = textbox.verticalScrollBarVisibility;

const textbox = document.querySelector('smart-text-box');
textbox.addEventListener('change', function (event) {
    const detail = event.detail,
        oldValue = detail.oldValue,
        value = detail.value,
        type = detail.type;

	// event handling code goes here.
})

const textbox = document.querySelector('smart-text-box');
textbox.addEventListener('changing', function (event) {
    const detail = event.detail,
        oldValue = detail.oldValue,
        value = detail.value;

	// event handling code goes here.
})

const textbox = document.querySelector('smart-text-box');
textbox.close();

const textbox = document.querySelector('smart-text-box');
textbox.open();

const textbox = document.querySelector('smart-text-box');
textbox.reset();