TextBox JAVASCRIPT UI Component API

TextBox Javascript API

Class

TextBox
ListItem
ListItemsGroup

TextBox

TextBox is an input field with auto-suggest options.

Selector

smart-text-box

Properties

AanimationSets or gets the animation mode. Animation is disabled when the property is set to 'none'
AautoFocusDetermines whether the text box will be focused on page load or not.
AautoCompleteDetermines the autocomplete mode. Auto complete modes filter the items from the dataSource and show only those that match the input.
AautoCompleteDelayDetermines the delay before the drop down opens to show the matches from the auto complete operation.
DdataSourceDetermines the data source that will be loaded to the ComboBox. The dataSource can be an array of strings, numbers or objects where the attributes represent the properties of a List Item. For example label, value. It can also be a callback that returns an Array of items as previously described.
DdisabledEnables or disables the element.
DdisplayLoadingIndicatorDetermines whether an indicator will appear during filtering and remote item loading.
DdisplayMemberSets or gets the displayMember. The displayMember specifies the name of a property to display. The name is contained in the collection specified by the 'dataSource' property.
DdisplayModeDetermines how the characters are displayed inside the input.
DdropDownAppendToDetermines the drop down parent. The drop down can be removed from the body of the element and continue to work in another container. This is usefull when one of the parents of the element doesn't allow overflowing, by settings this property to 'body' the drop down will be appended to the DOM and the drop down will open/close as usual. dropDownAppendTo can be a string representing the id of an HTML element on the page or a direct reference to that element. Reseting it back to null will take the drop down back to it's original place.
DdropDownHeightSets the height of the drop down. By default it's set to an empty string. In this case the height of the drop down is controlled by a CSS variable.
DdropDownMaxHeightSets the maximum Height of the drop down. By default it's set to an empty string. In this case the maxHeight of the drop down is controlled by a CSS variable.
DdropDownMaxWidthSets the maximum Width of the drop down. By default it's set to an empty string. In this case the maxWidth of the drop down is controlled by a CSS variable.
DdropDownMinHeightSets the minimum Height of the drop down. By default it's set to an empty string. In this case the minHeight of the drop down is controlled by a CSS variable.
DdropDownMinWidthSets the minimum Width of the drop down. By default it's set to an empty string. In this case the minWidth of the drop down is controlled by a CSS variable.
DdropDownOpenModeDetermines how the drop down is going to open.
DdropDownOverlayIf this property is enabled, when the element's dropdown is opened, a transparent overlay is positioned between the dropdown and the rest of the document. The purpose of the overlay is to make sure that clicking anywhere outside the drop down will will target the overlay and not the DOM.
DdropDownPlaceholderDetermines the placeholder for the drop down, displayed when there are no items in it.
DdropDownPositionDetermines the position of the drop down when opened.
DdropDownWidthSets the width of the drop down. By default it's set to an empty string. In this case the width of the drop down is controlled by a CSS variable.
EescKeyModeDetermines the behavior of the element when Escape key is pressed.
EenterKeyBehaviorSpecifies the behavior of "Enter" key.
FformThe form element that the element is associated with (its "form owner"). The value of the attribute must be the ID of a form element in the same document.
HhintSets additional helper text below the element. The hint is visible only when the element is focused.
HhorizontalScrollBarVisibilityDetermines the visibility of the horizontal Scroll bar thats inside the drop down.
IinputMemberRepresents the property name of a List item. Determines the value of the input when a ListItem is selected. Usefull in cases where the user wants to display for example the value of an item instead of it's label. By default the label is displayed in the input.
IinputPurposeSets the purpose of the input and what, if any, permission the user agent has to provide automated assistance in filling out the element's input when in a form, as well as guidance to the browser as to the type of information expected in the element. This value corresponds to the standard HTML autocomplete attribute and can be set to values such as 'on', 'name', 'organization', 'street-address', etc.
IitemHeightSets the height for all list items. Used only when virtualization is enabled.
IitemMeasureModeDetermines the item width measuring algorithm.
IitemsA getter that returns an array of all List items inside the drop down.
IitemTemplateThe itemTemplate property is a string that represents the id of an HTMLTemplateElement in the DOM. It's used to set a customize the content of the list items.
LlabelSets a little text label above the element.
LloadingIndicatorPlaceholderDetermines the text that will be displayed next to the loading indicator when the loader is visible and it's position is top or bottom.
LloadingIndicatorPositionDetermines the position of the loading indicator.
LlocaleSets or gets the language. Used in conjunction with the property messages.
LlocalizeFormatFunctionCallback used to customize the format of the messages that are returned from the Localization Module.
MmaxLengthSets or gets the maximum number of characters that the user can enter.
MminLengthSets or gets the minimum number of characters that the user have to enter to trigger the auto complete functionality.
MmessagesSets or gets an object specifying strings used in the widget that can be localized. Used in conjunction with the property language.
NnameSets or gets the name attribute for the element. Name is used when submiting HTML forms.
OopenedDetermines whether the drop down is opened or closed
PplaceholderDetermines the input's placeholder.
RreadonlyDisables user interaction with the element.
RrightToLeftSets or gets the value indicating whether the element is aligned to support locales using right-to-left fonts.
RrequiredSpecifies that the user must fill the input before submitting a form with the element.
RrequiredMessageSpecifies the message that will appear if required is set and no value is provided in the input.
SselectAllOnFocusDetermines whether the content of the input will be selected on focus or not.
TthemeDetermines the theme. Theme defines the look of the element
UunfocusableIf is set to true, the element cannot be focused.
VvalueSets or gets the value of the element.
VvalueMemberDetermines the value member of an item. Stored as value in the item object. Similar to groupMember, valueMember is especially usefull when using data from a JSON file as a dataSource for the ListBox and there's a specific property that should be used for the value the items.
VverticalScrollBarVisibilityDetermines the visibility of the vertical scroll bar that's inside the drop down.

Events

CchangeThis event is triggered when the value of the Text Box is changed. This happens on blur and if 'Enter' is pressed.
CchangingThis event is triggered on each key up event of the TextBox, if the value is changed.

Methods

CcloseCloses the drop down. The drop down is used only when auto complete is enabled.
OopenOpens the drop down. The drop down is used only when auto complete is enabled.
RresetThe method is used to reset the input back to it's initial value.

Properties

animation"none" | "simple" | "advanced"

Sets or gets the animation mode. Animation is disabled when the property is set to 'none'

Allowed Values

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

Default value

"advanced"

Example

Set the animation property. 

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

Set the animation property by using the HTML Element's instance. 

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

Get the animation property. 

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

autoFocusboolean

Determines whether the text box will be focused on page load or not.

Default value

false

Example

Set the autoFocus property. 

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

Set the autoFocus property by using the HTML Element's instance. 

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

Get the autoFocus property. 

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

autoComplete"none" | "auto" | "inline" | "manual"

Determines the autocomplete mode. Auto complete modes filter the items from the dataSource and show only those that match the input.

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.

Example

Set the autoComplete property. 

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

Set the autoComplete property by using the HTML Element's instance. 

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

Get the autoComplete property. 

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

autoCompleteDelaynumber

Determines the delay before the drop down opens to show the matches from the auto complete operation.

Default value

100

Example

Set the autoCompleteDelay property. 

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

Set the autoCompleteDelay property by using the HTML Element's instance. 

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

Get the autoCompleteDelay property. 

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

dataSourceany

Determines the data source that will be loaded to the ComboBox. The dataSource can be an array of strings, numbers or objects where the attributes represent the properties of a List Item. For example label, value. It can also be a callback that returns an Array of items as previously described.

Try a demo showcasing the dataSource property.

Example

Set the dataSource property. 

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

Set the dataSource property by using the HTML Element's instance. 

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

Get the dataSource property. 

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

disabledboolean

Enables or disables the element.

Default value

false

Example

Set the disabled property. 

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

Set the disabled property by using the HTML Element's instance. 

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

Get the disabled property. 

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

displayLoadingIndicatorboolean

Determines whether an indicator will appear during filtering and remote item loading.

Default value

false

Example

Set the displayLoadingIndicator property. 

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

Set the displayLoadingIndicator property by using the HTML Element's instance. 

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

Get the displayLoadingIndicator property. 

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

displayMemberstring

Sets or gets the displayMember. The displayMember specifies the name of a property to display. The name is contained in the collection specified by the 'dataSource' property.

Default value

""""

Example

Set the displayMember property. 

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

Set the displayMember property by using the HTML Element's instance. 

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

Get the displayMember property. 

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

displayMode"default" | "escaped"

Determines how the characters are displayed inside the input.

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 '\n'.

Default value

"default"
Try a demo showcasing the displayMode property.

Example

Set the displayMode property. 

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

Set the displayMode property by using the HTML Element's instance. 

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

Get the displayMode property. 

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

dropDownAppendToany

Determines the drop down parent. The drop down can be removed from the body of the element and continue to work in another container. This is usefull when one of the parents of the element doesn't allow overflowing, by settings this property to 'body' the drop down will be appended to the DOM and the drop down will open/close as usual. dropDownAppendTo can be a string representing the id of an HTML element on the page or a direct reference to that element. Reseting it back to null will take the drop down back to it's original place.

Try a demo showcasing the dropDownAppendTo property.

Example

Set the dropDownAppendTo property. 

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

Set the dropDownAppendTo property by using the HTML Element's instance. 

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

Get the dropDownAppendTo property. 

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

dropDownHeightstring | number

Sets the height of the drop down. By default it's set to an empty string. In this case the height of the drop down is controlled by a CSS variable.

Default value

""

Example

Set the dropDownHeight property. 

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

Set the dropDownHeight property by using the HTML Element's instance. 

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

Get the dropDownHeight property. 

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

dropDownMaxHeightstring | number

Sets the maximum Height of the drop down. By default it's set to an empty string. In this case the maxHeight of the drop down is controlled by a CSS variable.

Default value

""

Example

Set the dropDownMaxHeight property. 

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

Set the dropDownMaxHeight property by using the HTML Element's instance. 

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

Get the dropDownMaxHeight property. 

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

dropDownMaxWidthstring | number

Sets the maximum Width of the drop down. By default it's set to an empty string. In this case the maxWidth of the drop down is controlled by a CSS variable.

Default value

""

Example

Set the dropDownMaxWidth property. 

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

Set the dropDownMaxWidth property by using the HTML Element's instance. 

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

Get the dropDownMaxWidth property. 

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

dropDownMinHeightstring | number

Sets the minimum Height of the drop down. By default it's set to an empty string. In this case the minHeight of the drop down is controlled by a CSS variable.

Default value

""

Example

Set the dropDownMinHeight property. 

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

Set the dropDownMinHeight property by using the HTML Element's instance. 

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

Get the dropDownMinHeight property. 

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

dropDownMinWidthstring | number

Sets the minimum Width of the drop down. By default it's set to an empty string. In this case the minWidth of the drop down is controlled by a CSS variable.

Default value

""

Example

Set the dropDownMinWidth property. 

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

Set the dropDownMinWidth property by using the HTML Element's instance. 

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

Get the dropDownMinWidth property. 

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

dropDownOpenMode"none" | "default" | "auto"

Determines how the drop down is going to open.

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"
Try a demo showcasing the dropDownOpenMode property.

Example

Set the dropDownOpenMode property. 

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

Set the dropDownOpenMode property by using the HTML Element's instance. 

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

Get the dropDownOpenMode property. 

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

dropDownOverlayboolean

If this property is enabled, when the element's dropdown is opened, a transparent overlay is positioned between the dropdown and the rest of the document. The purpose of the overlay is to make sure that clicking anywhere outside the drop down will will target the overlay and not the DOM.

Default value

false

Example

Set the dropDownOverlay property. 

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

Set the dropDownOverlay property by using the HTML Element's instance. 

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

Get the dropDownOverlay property. 

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

dropDownPlaceholderstring

Determines the placeholder for the drop down, displayed when there are no items in it.

Default value

"No Items"

Example

Set the dropDownPlaceholder property. 

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

Set the dropDownPlaceholder property by using the HTML Element's instance. 

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

Get the dropDownPlaceholder property. 

 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"

Determines the position of the drop down when opened.

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"
Try a demo showcasing the dropDownPosition property.

Example

Set the dropDownPosition property. 

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

Set the dropDownPosition property by using the HTML Element's instance. 

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

Get the dropDownPosition property. 

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

dropDownWidthstring | number

Sets the width of the drop down. By default it's set to an empty string. In this case the width of the drop down is controlled by a CSS variable.

Default value

""

Example

Set the dropDownWidth property. 

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

Set the dropDownWidth property by using the HTML Element's instance. 

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

Get the dropDownWidth property. 

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

escKeyMode"none" | "previousValue" | "clearValue"

Determines the behavior of the element when Escape key is pressed.

Allowed Values

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

Default value

"none"
Try a demo showcasing the escKeyMode property.

Example

Set the escKeyMode property. 

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

Set the escKeyMode property by using the HTML Element's instance. 

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

Get the escKeyMode property. 

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

enterKeyBehavior"submit" | "clearOnSubmit"

Specifies the behavior of "Enter" key.

Allowed Values

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

Default value

"submit"

Example

Set the enterKeyBehavior property. 

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

Set the enterKeyBehavior property by using the HTML Element's instance. 

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

Get the enterKeyBehavior property. 

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

formstring

The form element that the element is associated with (its "form owner"). The value of the attribute must be the ID of a form element in the same document.

Default value

""

Example

Set the form property. 

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

Set the form property by using the HTML Element's instance. 

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

Get the form property. 

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

hintany

Sets additional helper text below the element. The hint is visible only when the element is focused.

Example

Set the hint property. 

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

Set the hint property by using the HTML Element's instance. 

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

Get the hint property. 

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

horizontalScrollBarVisibility"auto" | "disabled" | "hidden" | "visible"

Determines the visibility of the horizontal Scroll bar thats inside the drop down.

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"

Example

Set the horizontalScrollBarVisibility property. 

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

Set the horizontalScrollBarVisibility property by using the HTML Element's instance. 

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

Get the horizontalScrollBarVisibility property. 

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

inputMemberstring

Represents the property name of a List item. Determines the value of the input when a ListItem is selected. Usefull in cases where the user wants to display for example the value of an item instead of it's label. By default the label is displayed in the input.

Default value

""

Example

Set the inputMember property. 

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

Set the inputMember property by using the HTML Element's instance. 

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

Get the inputMember property. 

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

inputPurposestring

Sets the purpose of the input and what, if any, permission the user agent has to provide automated assistance in filling out the element's input when in a form, as well as guidance to the browser as to the type of information expected in the element. This value corresponds to the standard HTML autocomplete attribute and can be set to values such as 'on', 'name', 'organization', 'street-address', etc.

Default value

"off"

Example

Set the inputPurpose property. 

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

Set the inputPurpose property by using the HTML Element's instance. 

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

Get the inputPurpose property. 

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

itemHeightnumber | null

Sets the height for all list items. Used only when virtualization is enabled.

Example

Set the itemHeight property. 

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

Set the itemHeight property by using the HTML Element's instance. 

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

Get the itemHeight property. 

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

itemMeasureMode"auto" | "precise"

Determines the item width measuring algorithm.

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"

Example

Set the itemMeasureMode property. 

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

Set the itemMeasureMode property by using the HTML Element's instance. 

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

Get the itemMeasureMode property. 

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

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

A getter that returns an array of all List items inside the drop down.

Default value

""

itemTemplateany

The itemTemplate property is a string that represents the id of an HTMLTemplateElement in the DOM. It's used to set a customize the content of the list items.

Try a demo showcasing the itemTemplate property.

Example

Set the itemTemplate property. 

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

Set the itemTemplate property by using the HTML Element's instance. 

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

Get the itemTemplate property. 

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

labelstring

Sets a little text label above the element.

Default value

""
Try a demo showcasing the label property.

Example

Set the label property. 

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

Set the label property by using the HTML Element's instance. 

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

Get the label property. 

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

loadingIndicatorPlaceholderstring

Determines the text that will be displayed next to the loading indicator when the loader is visible and it's position is top or bottom.

Default value

"Loading..."

Example

Set the loadingIndicatorPlaceholder property. 

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

Set the loadingIndicatorPlaceholder property by using the HTML Element's instance. 

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

Get the loadingIndicatorPlaceholder property. 

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

loadingIndicatorPosition"bottom" | "center" | "top"

Determines the position of the loading indicator.

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"

Example

Set the loadingIndicatorPosition property. 

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

Set the loadingIndicatorPosition property by using the HTML Element's instance. 

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

Get the loadingIndicatorPosition property. 

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

localestring

Sets or gets the language. Used in conjunction with the property messages.

Default value

"en"

Example

Set the locale property. 

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

Set the locale property by using the HTML Element's instance. 

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

Get the locale property. 

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

localizeFormatFunctionfunction | null

Callback used to customize the format of the messages that are returned from the Localization Module.

Example

Set the localizeFormatFunction property. 

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

Set the localizeFormatFunction property by using the HTML Element's instance. 

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

Get the localizeFormatFunction property. 

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

maxLengthnumber

Sets or gets the maximum number of characters that the user can enter.

Example

Set the maxLength property. 

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

Set the maxLength property by using the HTML Element's instance. 

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

Get the maxLength property. 

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

minLengthnumber

Sets or gets the minimum number of characters that the user have to enter to trigger the auto complete functionality.

Default value

2
Try a demo showcasing the minLength property.

Example

Set the minLength property. 

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

Set the minLength property by using the HTML Element's instance. 

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

Get the minLength property. 

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

messagesobject

Sets or gets an object specifying strings used in the widget that can be localized. Used in conjunction with the property language.

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

}

Example

Set the messages property. 

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

Set the messages property by using the HTML Element's instance. 

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

Get the messages property. 

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

namestring

Sets or gets the name attribute for the element. Name is used when submiting HTML forms.

Default value

""

Example

Set the name property. 

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

Set the name property by using the HTML Element's instance. 

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

Get the name property. 

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

openedboolean

Determines whether the drop down is opened or closed

Default value

false

Example

Set the opened property. 

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

Set the opened property by using the HTML Element's instance. 

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

Get the opened property. 

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

placeholderstring

Determines the input's placeholder.

Default value

""
Try a demo showcasing the placeholder property.

Example

Set the placeholder property. 

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

Set the placeholder property by using the HTML Element's instance. 

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

Get the placeholder property. 

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

readonlyboolean

Disables user interaction with the element.

Default value

false

Example

Set the readonly property. 

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

Set the readonly property by using the HTML Element's instance. 

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

Get the readonly property. 

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

rightToLeftboolean

Sets or gets the value indicating whether the element is aligned to support locales using right-to-left fonts.

Default value

false
Try a demo showcasing the rightToLeft property.

Example

Set the rightToLeft property. 

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

Set the rightToLeft property by using the HTML Element's instance. 

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

Get the rightToLeft property. 

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

requiredboolean

Specifies that the user must fill the input before submitting a form with the element.

Default value

false

Example

Set the required property. 

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

Set the required property by using the HTML Element's instance. 

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

Get the required property. 

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

requiredMessagestring

Specifies the message that will appear if required is set and no value is provided in the input.

Default value

""

Example

Set the requiredMessage property. 

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

Set the requiredMessage property by using the HTML Element's instance. 

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

Get the requiredMessage property. 

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

selectAllOnFocusboolean

Determines whether the content of the input will be selected on focus or not.

Default value

false

Example

Set the selectAllOnFocus property. 

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

Set the selectAllOnFocus property by using the HTML Element's instance. 

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

Get the selectAllOnFocus property. 

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

themestring

Determines the theme. Theme defines the look of the element

Default value

""

Example

Set the theme property. 

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

Set the theme property by using the HTML Element's instance. 

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

Get the theme property. 

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

unfocusableboolean

If is set to true, the element cannot be focused.

Default value

false

Example

Set the unfocusable property. 

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

Set the unfocusable property by using the HTML Element's instance. 

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

Get the unfocusable property. 

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

valuestring

Sets or gets the value of the element.

Default value

""

Example

Set the value property. 

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

Set the value property by using the HTML Element's instance. 

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

Get the value property. 

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

valueMemberstring

Determines the value member of an item. Stored as value in the item object. Similar to groupMember, valueMember is especially usefull when using data from a JSON file as a dataSource for the ListBox and there's a specific property that should be used for the value the items.

Default value

""""

Example

Set the valueMember property. 

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

Set the valueMember property by using the HTML Element's instance. 

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

Get the valueMember property. 

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

verticalScrollBarVisibility"auto" | "disabled" | "hidden" | "visible"

Determines the visibility of the vertical scroll bar that's inside the drop down.

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"

Example

Set the verticalScrollBarVisibility property. 

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

Set the verticalScrollBarVisibility property by using the HTML Element's instance. 

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

Get the verticalScrollBarVisibility property. 

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

Events

changeCustomEvent

This event is triggered when the value of the Text Box is changed. This happens on blur and if 'Enter' is pressed.

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

Try a demo showcasing the change event.

Example

Set up the event handler of change event. 

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

changingCustomEvent

This event is triggered on each key up event of the TextBox, if the value is changed.

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

Example

Set up the event handler of changing event. 

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

Methods

close(): void

Closes the drop down. The drop down is used only when auto complete is enabled.


Invoke the close method.

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

open(): void

Opens the drop down. The drop down is used only when auto complete is enabled.


Invoke the open method.

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

reset(): void

The method is used to reset the input back to it's initial value.


Invoke the reset method.

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


ListItem

Defines a list item for ListBox, ComboBox, DropDownList.

Selector

smart-list-item

Properties

AalternationIndexalternationIndex
Ccolorcolor
DdisplayModedisplayMode
Ggroupedgrouped
Sselectedselected
Vvaluevalue
Llabellabel
Ddetailsdetails
Ggroupgroup
Hhiddenhidden
Rreadonlyreadonly

Properties

alternationIndexnumber

Default value

-1

colorstring

Default value

""

displayMode"plain" | "checkBox" | "radioButton"

Default value

"plain"

groupedboolean

Default value

false
 <smart-list-item grouped></smart-list-item>

selectedboolean

Default value

false
 <smart-list-item selected></smart-list-item>

valuestring

Default value

""

labelstring

Default value

""

detailsstring

Default value

""

groupstring

Default value

""

hiddenboolean

Default value

false
 <smart-list-item hidden></smart-list-item>

readonlyboolean

Default value

false
 <smart-list-item readonly></smart-list-item>


ListItemsGroup

Defines a group of list items.

Selector

smart-list-items-group

Properties

Llabellabel

Properties

labelstring

Default value

""