MultilineTextBox — Smart UI JavaScript API

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

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

    const el = document.getElementById('demo-multilinetextbox');
    if (el) {
      el.placeholder = 'Type here...';
      el.placeholder = 'Enter text here';
      el.value = 'Multi-line input';

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

Developer Quick Reference

Component: MultilineTextBox   Framework: JavaScript   Selector: smart-multiline-text-box

API counts: 36 properties, 4 methods, 1 events

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

Common methods: focus(), reset(), selection(), select()

Common events: change

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

Defines a multi-line text input control. MultilineTextBox can hold an unlimited number of characters, and the text renders in a fixed-width font

Class

MultilineTextBox

MultilineTextBox

Defines a multi-line text input control. MultilineTextBox can hold an unlimited number of characters, and the text renders in a fixed-width font

Selector

smart-multiline-text-box

Quick picks

changedisabledfocusvalue

Properties

AanimationSpecifies the animation mode for the component. When this property is set to 'none', all animations are disabled. Setting it to other supported values enables the corresponding animation effects. Use this property to control whether and how animations are applied.
AautoCapitalizeSpecifies if and in what manner user-entered text should be automatically capitalized during input or editing. This setting controls the automatic transformation of text—for example, capitalizing the first letter of each word, each sentence, or all characters—based on the selected capitalization behavior.
AautoCompleteSpecifies whether the browser is allowed to automatically fill in the value of the input control based on the user's previously entered data, such as usernames, passwords, or addresses. When enabled, this facilitates autofill and streamlines user input by suggesting or completing values according to stored information.
AautoExpandControls whether the element automatically increases its height to accommodate input that exceeds its current vertical space. When enabled, the element will expand vertically as more content is entered, preventing scrollbars from appearing.
AautoFocusSpecifies whether the input element should automatically receive focus when the page finishes loading, allowing users to start interacting with it immediately without manually clicking or tabbing into the field.
CcolsThe cols attribute sets the visible width (measured in average character columns) of a textarea input field in a form. Its value must be a positive integer, determining how many characters are visible in a single row. If the cols attribute is not provided, the textarea defaults to displaying 20 character columns in width. Note: The cols attribute is not applicable to Input elements; it is specific to Textarea elements.
DdisabledControls whether the element is active or inactive. When enabled, the element can interact with user input; when disabled, the element is unresponsive and typically appears visually distinct to indicate its inactive state.
DdisplayModeDefines the visual presentation of the characters entered within the input field, such as whether they are shown as plain text, masked (e.g., as asterisks for passwords), or styled in a particular way. This setting determines how users see their input while typing or viewing the form.
EenterKeyBehaviorSpecifies how the application responds when the "Enter" key is pressed, such as submitting a form, adding a new line, or triggering a specific action.
FformSpecifies the form element with which this element is associated, known as its "form owner." The value of this attribute must be the ID of an existing Form element within the same HTML document. This allows input or button elements to be associated with a form, even if they are not nested inside the form tag itself.
HhintProvides supplementary helper text displayed beneath the element. This text becomes visible only when the element is focused, offering users additional guidance or context during interaction.
HhorizontalScrollBarVisibilityDetermines whether the horizontal scrollbar is visible, hidden, or displayed automatically based on the content's width.
IinputPurposeSpecifies the expected purpose of the input field and determines whether the browser (user agent) is allowed to offer automated assistance, such as autofill suggestions, when the element is used within a form. This property maps directly to the standard HTML autocomplete attribute, enabling the browser to understand what kind of information should be entered into the field. Accepted values include 'on', 'off', or context-specific keywords such as 'name', 'email', 'organization', or 'street-address'. Setting an appropriate value improves user experience by allowing the browser to assist in accurately and efficiently filling out form fields with relevant data.
LlabelPositions the label above the input element. The label will always be visible and displayed above the input field, providing clear identification for the corresponding input regardless of user interaction or input state.
LlocaleDefines or retrieves the current language code (e.g., "en", "fr", "es") to be used for localization. This property works together with the messages property, allowing the application to display the appropriate translations based on the selected language. When setting this value, ensure that corresponding translations exist within the messages object for consistent multilingual support.
LlocalizeFormatFunctionA callback function that allows you to define custom formatting for messages returned by the Localization Module. Use this to modify message content, structure, or placeholders before they are displayed to users, enabling tailored localization outputs that meet specific application or user requirements.
MmaxLengthSpecifies or retrieves the maximum number of characters allowed in the input field. If set, users cannot enter more characters than this limit.
MmessagesDefines or retrieves an object containing key-value pairs for all user-facing strings within the widget, enabling text customization and localization. This property works in conjunction with the locale property to display translated content according to the selected language or locale. Use this to provide translated strings for different languages, ensuring your widget can support internationalization.
MminLengthSpecifies or retrieves the minimum number of characters that a user is required to enter in the input field. If the user enters fewer characters than the specified minimum, the input will be considered invalid.
NnameDefines or retrieves the value of the element’s name attribute. The name attribute uniquely identifies form elements when submitting an HTML form, enabling the form data to be correctly organized and transmitted to the server. This is essential for backend processing and data association.
PplaceholderSpecifies the placeholder text that appears inside the element when it is empty or no value has been entered. This text serves as a hint or example to guide users on the expected input format or content.
RreadonlyIf enabled, users will be prevented from interacting with the element. This means that all user actions, such as clicks, typing, or other input events, will be disabled for this element.
RrequiredIndicates that the user is required to enter a value in this field before the form can be submitted. If the field is left empty, the form submission will be blocked and the user will be prompted to provide a valid input. This ensures that essential information is collected before processing the form.
RresizableControls whether the user can resize the element. When enabled, a resize handle appears in the bottom-right corner of the input area, allowing the user to manually adjust its size. If disabled, the element remains a fixed size and no resize indicator is shown.
RrightToLeftSpecifies or retrieves a value that determines whether the element’s alignment is configured for right-to-left (RTL) languages, ensuring proper display and support for locales that use RTL fonts and text direction (such as Arabic or Hebrew).
RrowsSpecifies the number of text lines that are visible within the control at one time. This determines the vertical size of the control and how much content is displayed to the user without scrolling.
SselectAllOnFocusDetermines if the entire content of the input field will be automatically highlighted (selected) when the input gains focus, allowing users to easily replace or copy the existing text.
SselectionEndSpecifies the position (zero-based index) of the last character within the currently selected text range. This value represents the character immediately after the end of the selection; if no text is selected, it is equal to the starting index of the selection.
SselectionStartSpecifies the zero-based index position of the first character included in the current text selection. This value represents where the selection begins within the overall string or text content.
SspellCheckIndicates whether the element's text should be checked for spelling and grammar errors by the browser. When enabled, the browser will highlight possible mistakes and may provide correction suggestions to the user.
TthemeSpecifies the theme to be applied, which controls the overall appearance and styling of the element, including colors, fonts, and other visual properties.
UunfocusableWhen set to true, the element is not focusable, meaning it cannot receive focus via keyboard navigation, mouse interaction, or scripting.
UunlockKeyDefines or retrieves the unlockKey value used to authenticate and grant access to the product's locked features. This property acts as a security credential required to unlock and utilize restricted functionality within the product.
VvalueProvides functionality to retrieve (get) the current value of the element or assign (set) a new value to it. This is commonly used for form elements such as input fields, textareas, or select elements, allowing you to programmatically access or modify the user's input or the element's content.
VverticalScrollBarVisibilityDetermines whether the vertical scrollbar is displayed, hidden, or automatically shown based on the content's overflow within the container. This property allows you to control how and when users can scroll vertically.
WwrapSpecifies the behavior of the control when handling long text input, determining whether the text automatically wraps onto a new line or remains on a single line, allowing for improved readability and layout management.

Events

CchangeThis event is triggered whenever the user modifies the content of the text box, such as by typing, deleting, or pasting text. It detects any change to the input’s value and can be used to respond in real-time as the user edits the text box.

Methods

FfocusSets keyboard and interaction focus to the element, making it the active target for user input and accessibility tools. This enables users to interact with the element (e.g., typing in a field or activating controls) and allows screen readers to announce its presence.
RresetThis method resets the value of the element box to its original, default state as defined upon initialization. Any user input or programmatically modified content will be cleared, returning the element box to its initial configuration.
SselectExtracts a specified portion of the input text based on the provided arguments, such as start and end positions or a pattern. If no arguments are given, the entire input text is selected by default. This function enables precise control over which segment of the text is retrieved or manipulated.
SselectionReturns the text currently selected by the user within the active input field, textarea, or document. If no text is selected, the function returns an empty string.

Properties

animationSpecifies the animation mode for the component. When this property is set to 'none', all animations are disabled. Setting it to other supported values enables the corresponding animation effects. Use this property to control whether and how animations are applied."none" | "simple" | "advanced"

Specifies the animation mode for the component. When this property is set to 'none', all animations are disabled. Setting it to other supported values enables the corresponding animation effects. Use this property to control whether and how animations are applied.

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

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

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

Read the current value:

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

autoCapitalizeSpecifies if and in what manner user-entered text should be automatically capitalized during input or editing. This setting controls the automatic transformation of text—for example, capitalizing the first letter of each word, each sentence, or all characters—based on the selected capitalization behavior."none" | "characters" | "words"

Specifies if and in what manner user-entered text should be automatically capitalized during input or editing. This setting controls the automatic transformation of text—for example, capitalizing the first letter of each word, each sentence, or all characters—based on the selected capitalization behavior.

Allowed Values

  • "none" - Does not capitalize the input.
  • "characters" - Capitalizes every character that is entered.
  • "words" - Capitalizes only the first letter of every new words that is entered.

Default value

"none"

Examples

Markup and runtime examples for autoCapitalize:

HTML:

<smart-multiline-text-box auto-capitalize="words"></smart-multiline-text-box>

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

const el = document.querySelector('smart-multiline-text-box');
el.autoCapitalize = "characters";

Read the current value:

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

autoCompleteSpecifies whether the browser is allowed to automatically fill in the value of the input control based on the user's previously entered data, such as usernames, passwords, or addresses. When enabled, this facilitates autofill and streamlines user input by suggesting or completing values according to stored information."on" | "off"

Specifies whether the browser is allowed to automatically fill in the value of the input control based on the user's previously entered data, such as usernames, passwords, or addresses. When enabled, this facilitates autofill and streamlines user input by suggesting or completing values according to stored information.

Allowed Values

  • "on" - Enables the browser's autoComplete functionality.
  • "off" - Disables the browser's autoComplete functionality.

Default value

"off"

Examples

Markup and runtime examples for autoComplete:

HTML:

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

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

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

Read the current value:

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

autoExpandControls whether the element automatically increases its height to accommodate input that exceeds its current vertical space. When enabled, the element will expand vertically as more content is entered, preventing scrollbars from appearing.boolean

Controls whether the element automatically increases its height to accommodate input that exceeds its current vertical space. When enabled, the element will expand vertically as more content is entered, preventing scrollbars from appearing.

Default value

false
Try a demo showcasing the autoExpand property.

Examples

Markup and runtime examples for autoExpand:

HTML attribute:

<smart-multiline-text-box auto-expand></smart-multiline-text-box>

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

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

Read the current value:

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

autoFocusSpecifies whether the input element should automatically receive focus when the page finishes loading, allowing users to start interacting with it immediately without manually clicking or tabbing into the field.boolean

Specifies whether the input element should automatically receive focus when the page finishes loading, allowing users to start interacting with it immediately without manually clicking or tabbing into the field.

Default value

false
Try a demo showcasing the autoFocus property.

Examples

Markup and runtime examples for autoFocus:

HTML attribute:

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

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

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

Read the current value:

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

colsThe cols attribute sets the visible width (measured in average character columns) of a textarea input field in a form. Its value must be a positive integer, determining how many characters are visible in a single row. If the cols attribute is not provided, the textarea defaults to displaying 20 character columns in width. Note: The cols attribute is not applicable to Input elements; it is specific to Textarea elements.number

The cols attribute sets the visible width (measured in average character columns) of a textarea input field in a form. Its value must be a positive integer, determining how many characters are visible in a single row. If the cols attribute is not provided, the textarea defaults to displaying 20 character columns in width. Note: The cols attribute is not applicable to Input elements; it is specific to Textarea elements.

Default value

20

Examples

Markup and runtime examples for cols:

HTML:

<smart-multiline-text-box cols="40"></smart-multiline-text-box>

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

const el = document.querySelector('smart-multiline-text-box');
el.cols = 60;

Read the current value:

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

disabledControls whether the element is active or inactive. When enabled, the element can interact with user input; when disabled, the element is unresponsive and typically appears visually distinct to indicate its inactive state.boolean

Controls whether the element is active or inactive. When enabled, the element can interact with user input; when disabled, the element is unresponsive and typically appears visually distinct to indicate its inactive state.

Default value

false

Examples

Markup and runtime examples for disabled:

HTML attribute:

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

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

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

Read the current value:

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

displayModeDefines the visual presentation of the characters entered within the input field, such as whether they are shown as plain text, masked (e.g., as asterisks for passwords), or styled in a particular way. This setting determines how users see their input while typing or viewing the form."default" | "escaped"

Defines the visual presentation of the characters entered within the input field, such as whether they are shown as plain text, masked (e.g., as asterisks for passwords), or styled in a particular way. This setting determines how users see their input while typing or viewing the form.

Allowed Values

  • "default" - The special characters of the input are not being escaped.
  • "escaped" - The special characters of the input are being escaped by replacing them with their corresponding codes.

Default value

"default"
Try a demo showcasing the displayMode property.

Examples

Markup and runtime examples for displayMode:

HTML:

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

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

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

Read the current value:

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

enterKeyBehaviorSpecifies how the application responds when the "Enter" key is pressed, such as submitting a form, adding a new line, or triggering a specific action."clearOnSubmit" | "newLine" | "submit"

Specifies how the application responds when the "Enter" key is pressed, such as submitting a form, adding a new line, or triggering a specific action.

Allowed Values

  • "clearOnSubmit" - Pressing "Enter" key fires change event with the curent value and the input gets cleared.
  • "newLine" - Pressing "Enter" key just adds a new line character to the input.
  • "submit" - Pressing "Enter" key fires change event with the curent value. The default mode.

Default value

"newLine"
Try a demo showcasing the enterKeyBehavior property.

Examples

Markup and runtime examples for enterKeyBehavior:

HTML:

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

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

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

Read the current value:

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

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 an existing Form element within the same HTML document. This allows input or button elements to be associated with a form, even if they are not nested inside the form tag itself.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 an existing Form element within the same HTML document. This allows input or button elements to be associated with a form, even if they are not nested inside the form tag itself.

Default value

""

Examples

Markup and runtime examples for form:

HTML:

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

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

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

Read the current value:

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

hintProvides supplementary helper text displayed beneath the element. This text becomes visible only when the element is focused, offering users additional guidance or context during interaction.any

Provides supplementary helper text displayed beneath the element. This text becomes visible only when the element is focused, offering users additional guidance or context during interaction.

Examples

Markup and runtime examples for hint:

HTML:

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

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

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

Read the current value:

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

horizontalScrollBarVisibilityDetermines whether the horizontal scrollbar is visible, hidden, or displayed automatically based on the content's width."auto" | "disabled" | "hidden" | "visible"

Determines whether the horizontal scrollbar is visible, hidden, or displayed automatically based on the content's width.

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

Examples

Markup and runtime examples for horizontalScrollBarVisibility:

HTML:

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

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

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

Read the current value:

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

inputPurposeSpecifies the expected purpose of the input field and determines whether the browser (user agent) is allowed to offer automated assistance, such as autofill suggestions, when the element is used within a form. This property maps directly to the standard HTML autocomplete attribute, enabling the browser to understand what kind of information should be entered into the field. Accepted values include 'on', 'off', or context-specific keywords such as 'name', 'email', 'organization', or 'street-address'. Setting an appropriate value improves user experience by allowing the browser to assist in accurately and efficiently filling out form fields with relevant data.string

Specifies the expected purpose of the input field and determines whether the browser (user agent) is allowed to offer automated assistance, such as autofill suggestions, when the element is used within a form. This property maps directly to the standard HTML autocomplete attribute, enabling the browser to understand what kind of information should be entered into the field. Accepted values include 'on', 'off', or context-specific keywords such as 'name', 'email', 'organization', or 'street-address'. Setting an appropriate value improves user experience by allowing the browser to assist in accurately and efficiently filling out form fields with relevant data.

Default value

"off"

Examples

Markup and runtime examples for inputPurpose:

HTML:

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

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

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

Read the current value:

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

labelPositions the label above the input element. The label will always be visible and displayed above the input field, providing clear identification for the corresponding input regardless of user interaction or input state.string

Positions the label above the input element. The label will always be visible and displayed above the input field, providing clear identification for the corresponding input regardless of user interaction or input state.

Default value

""
Try a demo showcasing the label property.

Examples

Markup and runtime examples for label:

HTML:

<smart-multiline-text-box label="Label text"></smart-multiline-text-box>

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

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

Read the current value:

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

localeDefines or retrieves the current language code (e.g., "en", "fr", "es") to be used for localization. This property works together with the messages property, allowing the application to display the appropriate translations based on the selected language. When setting this value, ensure that corresponding translations exist within the messages object for consistent multilingual support.string

Defines or retrieves the current language code (e.g., "en", "fr", "es") to be used for localization. This property works together with the messages property, allowing the application to display the appropriate translations based on the selected language. When setting this value, ensure that corresponding translations exist within the messages object for consistent multilingual support.

Default value

"en"

Examples

Markup and runtime examples for locale:

HTML:

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

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

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

Read the current value:

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

localizeFormatFunctionA callback function that allows you to define custom formatting for messages returned by the Localization Module. Use this to modify message content, structure, or placeholders before they are displayed to users, enabling tailored localization outputs that meet specific application or user requirements.function | null

A callback function that allows you to define custom formatting for messages returned by the Localization Module. Use this to modify message content, structure, or placeholders before they are displayed to users, enabling tailored localization outputs that meet specific application or user requirements.

Examples

Markup and runtime examples for localizeFormatFunction:

HTML:

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

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

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

Read the current value:

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

maxLengthSpecifies or retrieves the maximum number of characters allowed in the input field. If set, users cannot enter more characters than this limit.number

Specifies or retrieves the maximum number of characters allowed in the input field. If set, users cannot enter more characters than this limit.

Examples

Markup and runtime examples for maxLength:

HTML:

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

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

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

Read the current value:

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

messagesDefines or retrieves an object containing key-value pairs for all user-facing strings within the widget, enabling text customization and localization. This property works in conjunction with the locale property to display translated content according to the selected language or locale. Use this to provide translated strings for different languages, ensuring your widget can support internationalization.object

Defines or retrieves an object containing key-value pairs for all user-facing strings within the widget, enabling text customization and localization. This property works in conjunction with the locale property to display translated content according to the selected language or locale. Use this to provide translated strings for different languages, ensuring your widget can support internationalization.

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

}

Try a demo showcasing the messages property.

Examples

Markup and runtime examples for messages:

HTML:

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

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

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

minLengthSpecifies or retrieves the minimum number of characters that a user is required to enter in the input field. If the user enters fewer characters than the specified minimum, the input will be considered invalid.number

Specifies or retrieves the minimum number of characters that a user is required to enter in the input field. If the user enters fewer characters than the specified minimum, the input will be considered invalid.

Default value

0

Examples

Markup and runtime examples for minLength:

HTML:

<smart-multiline-text-box min-length="20"></smart-multiline-text-box>

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

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

Read the current value:

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

nameDefines or retrieves the value of the element’s name attribute. The name attribute uniquely identifies form elements when submitting an HTML form, enabling the form data to be correctly organized and transmitted to the server. This is essential for backend processing and data association.string

Defines or retrieves the value of the element’s name attribute. The name attribute uniquely identifies form elements when submitting an HTML form, enabling the form data to be correctly organized and transmitted to the server. This is essential for backend processing and data association.

Default value

""

Examples

Markup and runtime examples for name:

HTML:

<smart-multiline-text-box name="TextArea"></smart-multiline-text-box>

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

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

Read the current value:

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

placeholderSpecifies the placeholder text that appears inside the element when it is empty or no value has been entered. This text serves as a hint or example to guide users on the expected input format or content.string

Specifies the placeholder text that appears inside the element when it is empty or no value has been entered. This text serves as a hint or example to guide users on the expected input format or content.

Default value

""
Try a demo showcasing the placeholder property.

Examples

Markup and runtime examples for placeholder:

HTML:

<smart-multiline-text-box placeholder="Placeholder"></smart-multiline-text-box>

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

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

Read the current value:

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

readonlyIf enabled, users will be prevented from interacting with the element. This means that all user actions, such as clicks, typing, or other input events, will be disabled for this element.boolean

If enabled, users will be prevented from interacting with the element. This means that all user actions, such as clicks, typing, or other input events, will be disabled for this element.

Default value

false

Examples

Markup and runtime examples for readonly:

HTML attribute:

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

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

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

Read the current value:

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

requiredIndicates that the user is required to enter a value in this field before the form can be submitted. If the field is left empty, the form submission will be blocked and the user will be prompted to provide a valid input. This ensures that essential information is collected before processing the form.boolean

Indicates that the user is required to enter a value in this field before the form can be submitted. If the field is left empty, the form submission will be blocked and the user will be prompted to provide a valid input. This ensures that essential information is collected before processing the form.

Default value

false

Examples

Markup and runtime examples for required:

HTML attribute:

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

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

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

Read the current value:

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

resizableControls whether the user can resize the element. When enabled, a resize handle appears in the bottom-right corner of the input area, allowing the user to manually adjust its size. If disabled, the element remains a fixed size and no resize indicator is shown.boolean

Controls whether the user can resize the element. When enabled, a resize handle appears in the bottom-right corner of the input area, allowing the user to manually adjust its size. If disabled, the element remains a fixed size and no resize indicator is shown.

Default value

false
Try a demo showcasing the resizable property.

Examples

Markup and runtime examples for resizable:

HTML attribute:

<smart-multiline-text-box resizable></smart-multiline-text-box>

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

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

Read the current value:

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

rightToLeftSpecifies or retrieves a value that determines whether the element’s alignment is configured for right-to-left (RTL) languages, ensuring proper display and support for locales that use RTL fonts and text direction (such as Arabic or Hebrew).boolean

Specifies or retrieves a value that determines whether the element’s alignment is configured for right-to-left (RTL) languages, ensuring proper display and support for locales that use RTL fonts and text direction (such as Arabic or Hebrew).

Default value

false
Try a demo showcasing the rightToLeft property.

Examples

Markup and runtime examples for rightToLeft:

HTML attribute:

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

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

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

Read the current value:

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

rowsSpecifies the number of text lines that are visible within the control at one time. This determines the vertical size of the control and how much content is displayed to the user without scrolling.number

Specifies the number of text lines that are visible within the control at one time. This determines the vertical size of the control and how much content is displayed to the user without scrolling.

Default value

5
Try a demo showcasing the rows property.

Examples

Markup and runtime examples for rows:

HTML:

<smart-multiline-text-box rows="40"></smart-multiline-text-box>

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

const el = document.querySelector('smart-multiline-text-box');
el.rows = 60;

Read the current value:

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

selectAllOnFocusDetermines if the entire content of the input field will be automatically highlighted (selected) when the input gains focus, allowing users to easily replace or copy the existing text.boolean

Determines if the entire content of the input field will be automatically highlighted (selected) when the input gains focus, allowing users to easily replace or copy the existing text.

Default value

false
Try a demo showcasing the selectAllOnFocus property.

Examples

Markup and runtime examples for selectAllOnFocus:

HTML attribute:

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

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

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

Read the current value:

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

selectionEndSpecifies the position (zero-based index) of the last character within the currently selected text range. This value represents the character immediately after the end of the selection; if no text is selected, it is equal to the starting index of the selection.number

Specifies the position (zero-based index) of the last character within the currently selected text range. This value represents the character immediately after the end of the selection; if no text is selected, it is equal to the starting index of the selection.

Default value

0

Examples

Markup and runtime examples for selectionEnd:

HTML:

<smart-multiline-text-box selection-end="40"></smart-multiline-text-box>

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

const el = document.querySelector('smart-multiline-text-box');
el.selectionEnd = 60;

Read the current value:

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

selectionStartSpecifies the zero-based index position of the first character included in the current text selection. This value represents where the selection begins within the overall string or text content.number

Specifies the zero-based index position of the first character included in the current text selection. This value represents where the selection begins within the overall string or text content.

Default value

0

Examples

Markup and runtime examples for selectionStart:

HTML:

<smart-multiline-text-box selection-start="40"></smart-multiline-text-box>

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

const el = document.querySelector('smart-multiline-text-box');
el.selectionStart = 60;

Read the current value:

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

spellCheckIndicates whether the element's text should be checked for spelling and grammar errors by the browser. When enabled, the browser will highlight possible mistakes and may provide correction suggestions to the user.boolean

Indicates whether the element's text should be checked for spelling and grammar errors by the browser. When enabled, the browser will highlight possible mistakes and may provide correction suggestions to the user.

Default value

false

Examples

Markup and runtime examples for spellCheck:

HTML attribute:

<smart-multiline-text-box spell-check></smart-multiline-text-box>

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

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

Read the current value:

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

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

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

Default value

""

Examples

Markup and runtime examples for theme:

HTML:

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

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

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

Read the current value:

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

unfocusableWhen set to true, the element is not focusable, meaning it cannot receive focus via keyboard navigation, mouse interaction, or scripting.boolean

When set to true, the element is not focusable, meaning it cannot receive focus via keyboard navigation, mouse interaction, or scripting.

Default value

false

Examples

Markup and runtime examples for unfocusable:

HTML attribute:

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

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

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

Read the current value:

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

unlockKeyDefines or retrieves the unlockKey value used to authenticate and grant access to the product's locked features. This property acts as a security credential required to unlock and utilize restricted functionality within the product.string

Defines or retrieves the unlockKey value used to authenticate and grant access to the product's locked features. This property acts as a security credential required to unlock and utilize restricted functionality within the product.

Default value

""

Examples

Markup and runtime examples for unlockKey:

HTML:

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

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

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

Read the current value:

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

valueProvides functionality to retrieve (get) the current value of the element or assign (set) a new value to it. This is commonly used for form elements such as input fields, textareas, or select elements, allowing you to programmatically access or modify the user's input or the element's content.string

Provides functionality to retrieve (get) the current value of the element or assign (set) a new value to it. This is commonly used for form elements such as input fields, textareas, or select elements, allowing you to programmatically access or modify the user's input or the element's content.

Default value

""
Try a demo showcasing the value property.

Examples

Markup and runtime examples for value:

HTML:

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

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

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

Read the current value:

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

verticalScrollBarVisibilityDetermines whether the vertical scrollbar is displayed, hidden, or automatically shown based on the content's overflow within the container. This property allows you to control how and when users can scroll vertically."auto" | "disabled" | "hidden" | "visible"

Determines whether the vertical scrollbar is displayed, hidden, or automatically shown based on the content's overflow within the container. This property allows you to control how and when users can scroll vertically.

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

Examples

Markup and runtime examples for verticalScrollBarVisibility:

HTML:

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

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

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

Read the current value:

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

wrapSpecifies the behavior of the control when handling long text input, determining whether the text automatically wraps onto a new line or remains on a single line, allowing for improved readability and layout management."hard" | "soft" | "off"

Specifies the behavior of the control when handling long text input, determining whether the text automatically wraps onto a new line or remains on a single line, allowing for improved readability and layout management.

Allowed Values

  • "hard" - The text in the input is wrapped (contains newlines) when submitted in a form. The cols attribute must be specified.
  • "soft" - The text in the injput is not wrapped when submitted in a form. This is default
  • "off" - The text inside the input is not being wrapped to a new line when submitted in a form.

Default value

"soft"

Examples

Markup and runtime examples for wrap:

HTML:

<smart-multiline-text-box wrap="hard"></smart-multiline-text-box>

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

const el = document.querySelector('smart-multiline-text-box');
el.wrap = "soft";

Read the current value:

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

Events

changeThis event is triggered whenever the user modifies the content of the text box, such as by typing, deleting, or pasting text. It detects any change to the input’s value and can be used to respond in real-time as the user edits the text box.CustomEvent

This event is triggered whenever the user modifies the content of the text box, such as by typing, deleting, or pasting text. It detects any change to the input’s value and can be used to respond in real-time as the user edits the text box.

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

Arguments

evCustomEvent
ev.detailObject
ev.detail.oldValue - The previous value of the element before it was changed.
ev.detail.value - The new value of the element.
ev.detail.type - Indicates when the element was called, e.g. on blur or submit.

Methods

isDefaultPrevented

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

Returns

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

preventDefault

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

stopPropagation

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

Try a demo showcasing the change event.

Examples

Listen for change using the pattern that matches your stack.

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

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

	// event handling code goes here.
})

Methods

focus(): voidSets keyboard and interaction focus to the element, making it the active target for user input and accessibility tools. This enables users to interact with the element (e.g., typing in a field or activating controls) and allows screen readers to announce its presence.

Sets keyboard and interaction focus to the element, making it the active target for user input and accessibility tools. This enables users to interact with the element (e.g., typing in a field or activating controls) and allows screen readers to announce its presence.

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

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

reset(): voidThis method resets the value of the element box to its original, default state as defined upon initialization. Any user input or programmatically modified content will be cleared, returning the element box to its initial configuration.

This method resets the value of the element box to its original, default state as defined upon initialization. Any user input or programmatically modified content will be cleared, returning the element box to its initial configuration.

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

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

select( rangeFrom?: any, rangeTo?: any): voidExtracts a specified portion of the input text based on the provided arguments, such as start and end positions or a pattern. If no arguments are given, the entire input text is selected by default. This function enables precise control over which segment of the text is retrieved or manipulated.

Extracts a specified portion of the input text based on the provided arguments, such as start and end positions or a pattern. If no arguments are given, the entire input text is selected by default. This function enables precise control over which segment of the text is retrieved or manipulated.

Arguments

rangeFrom?any

Determines the start index of the text selection.

rangeTo?any

Determines the end index of the text selection.

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

document.querySelector('smart-multiline-text-box')?.select("0, 3");

selection( displayMode: string): stringReturns the text currently selected by the user within the active input field, textarea, or document. If no text is selected, the function returns an empty string.

Returns the text currently selected by the user within the active input field, textarea, or document. If no text is selected, the function returns an empty string.

Arguments

displayModestring

If displayMode is set to 'escaped', the value returned from the method contains escaped special characters.

Returnsstring

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

const result = document.querySelector('smart-multiline-text-box')?.selection("escaped");

CSS Variables

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

Default value

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

Default width of the element.

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

Default value

"calc(10 * var(--smart-editor-height))"

Default height of the element.