TextArea — Smart UI JavaScript API

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

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

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

      el.placeholder = 'Enter description';
      el.value = 'Detailed notes...';

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

Developer Quick Reference

Component: TextArea   Framework: JavaScript   Selector: smart-text-area

API counts: 30 properties, 5 methods, 2 events

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

Common methods: close(), ensureVisible(), getMentions(), open(), select()

Common events: change, changing

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

TextArea specifies a textarea field where the user can enter data. Auto-complete options are displayed for easier input.

Class

TextArea

TextArea

TextArea specifies a textarea field where the user can enter data. Auto-complete options are displayed for easier input.

Selector

smart-text-area

Quick picks

changeclosedataSourcedisableditemsopenvalue

Properties

AanimationConfigures or retrieves the current animation mode. When set to 'none', all animations are disabled, resulting in instant transitions with no visual effects. Otherwise, the property determines the type or style of animation used for transitions or dynamic effects.
AautoCompleteDelaySpecifies the amount of time, in milliseconds, to wait before displaying the dropdown list of matching results after the user initiates the autocomplete operation. This delay helps control how quickly the matches appear, improving user experience and performance when fetching or filtering suggestions.
DdataSourceSpecifies the source of data to be loaded into the Input component. The dataSource can accept the following formats:- An array of strings or numbers, where each value will be used as a list item.- An array of objects, where each object represents a list item with specific properties such as label (display text) and value (underlying value).- A callback function that returns an array of items in one of the formats described above.This flexibility allows you to provide simple lists or more complex data structures for Input population, as well as load data asynchronously or dynamically when needed.
DdisabledDetermines whether the element is interactive or inactive. When enabled, users can interact with the element (e.g., click, type, or select). When disabled, the element is visible but does not respond to user interactions.
DdropDownButtonPositionSpecifies the placement of the dropdown button relative to its parent element, such as aligning it to the left, right, top, or bottom. This property controls where the dropdown button appears within the interface.
DdropDownHeightSpecifies the height of the dropdown menu. By default, this property is set to an empty string, which means the dropdown's height is determined by a corresponding CSS variable. If a specific value is provided, it will override the CSS variable and explicitly set the dropdown's height.
DdropDownWidthSpecifies the width of the dropdown menu. By default, this property is set to an empty string (""), which means the dropdown’s width will be determined by the associated CSS variable (typically via a custom property such as --dropdown-width). To override the default behavior, you can explicitly set a specific width (e.g., "200px", "100%", etc.), which will be applied directly to the dropdown. If left as an empty string, the component remains responsive to changes in the relevant CSS variable.
IinputPurposeDefines the expected type of data for this input field and specifies whether, and to what extent, the browser or user agent is allowed to offer autofill assistance. This attribute aligns with the standard HTML autocomplete attribute, providing guidance to browsers for streamlining data entry and enhancing user experience. Acceptable values indicate the type of information anticipated, such as 'on' (enable autocomplete), 'off' (disable autocomplete), 'name' (full name), 'organization' (company or organization name), 'street-address' (street address), among others. Proper use of this attribute ensures accurate and secure autofill behavior in web forms.
IitemsSpecifies the maximum number of items that can be displayed in the dropdown list when a new autoComplete query is performed. This setting controls how many matched results are visible to the user at one time within the dropdown. By default, up to 8 matching items will be shown in the dropdown menu.
LlocaleSpecifies or retrieves the current language code, typically following ISO 639-1 standards (e.g., "en" for English, "fr" for French). This property is used alongside the messages property to determine which set of localized messages should be displayed or accessed based on the selected language.
LlocalizeFormatFunctionA callback function that allows you to define a custom format for messages returned by the Localization Module. Use this function to modify or enhance the appearance, structure, or content of localized messages before they are delivered to the application.
MmessagesDefines or retrieves an object containing text strings used within the widget that support localization. This property enables you to customize the widget’s displayed text for different languages or regions. It is typically used together with the locale property to provide translations and localize the widget’s interface.
MminLengthSpecifies the minimum number of characters a user must type into the input field before the autocomplete functionality is activated. Once this threshold is reached, the dropdown will open and display a list of items that match the entered text.
NnameGets or sets the 'name' attribute of the element. The 'name' attribute assigns an identifier to the element, which is used when submitting form data. When a form is submitted, the value of each input element with a 'name' attribute is included in the form data, using the 'name' as the key. This allows server-side scripts to reference the data by name.
OopenedSpecifies whether the dropdown menu is currently visible (open) or hidden (closed).
PplaceholderSpecifies the placeholder text that appears inside the input field when it is empty, providing a hint or example to guide the user on what to enter.
QquerySpecifies or retrieves the search query used to filter items within the data source. This query determines which items are displayed during the autoComplete operation. If the query is an empty string, the filter is not applied, and all items from the data source will be shown.
QqueryModeSpecifies the autocomplete query mode, which defines how user input is matched to suggestions. This property controls the underlying matching algorithm—such as prefix, infix, or fuzzy matching—used to generate autocomplete results, thereby influencing the relevance and style of suggestions presented to the user.
RreadonlySpecifies whether the user can enter text into the input field. When the dropDownButtonPosition property is set to 'left' or 'right', the readonly property controls the component’s behavior—if a dataSource is provided:- When readonly is false, the input functions as a ComboBox, allowing users to both type custom values and select from the dropdown list.- When readonly is true, the input behaves as a DropDownList, restricting users to select only from the available options in the dropdown and preventing any text input.
RresizeSpecifies whether the user is allowed to manually resize the Textarea component, enabling or disabling drag-to-resize functionality in the interface.
RrichTextAllows you to toggle rich text formatting on or off, enabling users to apply styles such as bold, italics, lists, and other text enhancements when enabled, or restricting input to plain text when disabled.
RrightToLeftSets or retrieves a value that determines whether the element’s alignment is adjusted to support right-to-left (RTL) languages, such as Arabic or Hebrew. When enabled, this property ensures that text direction and layout are suitable for locales that use right-to-left scripts.
SsortDirectionSpecifies the sorting order to be applied when the sort option is enabled. Accepts either ascending (asc) to sort items from lowest to highest, or descending (desc) to sort items from highest to lowest.
SsortedSpecifies whether the items are arranged in alphabetical order. When set to true, the items will be automatically sorted from A to Z based on their names or labels; when set to false, the items will retain their original order as provided.
TthemeSpecifies the visual theme applied to the element. The selected theme controls the appearance, including colors, fonts, and overall styling, ensuring a consistent look and feel across the element's user interface.
TtypeSpecifies the type of data that the input field accepts (e.g., text, number, email, password). Setting the input type helps control the kind of information users can enter, enables appropriate on-screen keyboards on mobile devices, and allows browsers to provide built-in validation for certain data formats.
UunfocusableWhen set to true, this property prevents the element from receiving keyboard focus, making it impossible to navigate to the element using the Tab key or programmatic focus methods (such as element.focus()).
UunlockKeyDefines the 'unlockKey' property, which is used to retrieve or assign the unique key required to unlock access to the product. This property can be read to obtain the current unlock key or set to specify a new key for unlocking the product.
UusersDefines the list of users available for mentioning in the TextArea component. Expects an array where each element is an object containing both id and name properties (e.g., { id: string | number, name: string }). When users type the at symbol, a dropdown appears, allowing them to select a user from this array to mention within the TextArea.
VvalueSets or retrieves the current value of the element, allowing you to programmatically update or access the element's value property. This is commonly used for form controls such as input, select, and textarea elements.

Events

CchangeThis event is triggered whenever the user's selection within the component changes. It fires each time a new item or range is selected, allowing you to respond to selection updates in real time. Use this event to perform actions such as updating related UI elements, fetching additional data, or validating the current selection.
CchangingThis event is triggered whenever a key is released (keyup) within the TextArea, but only if the content of the TextArea has changed since the previous event.

Methods

CcloseCloses the dropdown menu, hiding its list of selectable options from view.
EensureVisibleGuarantees that the currently active (selected) item remains in view within the scrollable area, automatically scrolling as needed to prevent it from being hidden or obscured.
GgetMentionsReturns an array containing information about all users who are mentioned (e.g., with “@username”) within the value of the Textarea. Each user object in the array represents a unique user mention detected in the Textarea's current content.
OopenExpands the drop-down menu, displaying its list of selectable options to the user.
SselectEnhances user interaction with input elements by selecting all the text within the input field. If the input element has the readonly attribute, the function instead sets focus on the element without selecting the text, since selection is not allowed for readonly inputs. This ensures an appropriate response whether the input is editable or not.

Properties

animationConfigures or retrieves the current animation mode. When set to 'none', all animations are disabled, resulting in instant transitions with no visual effects. Otherwise, the property determines the type or style of animation used for transitions or dynamic effects."none" | "simple" | "advanced"

Configures or retrieves the current animation mode. When set to 'none', all animations are disabled, resulting in instant transitions with no visual effects. Otherwise, the property determines the type or style of animation used for transitions or dynamic effects.

Allowed Values

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

Default value

"advanced"

Examples

Markup and runtime examples for animation:

HTML:

<smart-text-area animation="none"></smart-text-area>

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

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

Read the current value:

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

autoCompleteDelaySpecifies the amount of time, in milliseconds, to wait before displaying the dropdown list of matching results after the user initiates the autocomplete operation. This delay helps control how quickly the matches appear, improving user experience and performance when fetching or filtering suggestions.number

Specifies the amount of time, in milliseconds, to wait before displaying the dropdown list of matching results after the user initiates the autocomplete operation. This delay helps control how quickly the matches appear, improving user experience and performance when fetching or filtering suggestions.

Default value

100

Examples

Markup and runtime examples for autoCompleteDelay:

HTML:

<smart-text-area auto-complete-delay="50"></smart-text-area>

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

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

Read the current value:

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

dataSourceSpecifies the source of data to be loaded into the Input component. The dataSource can accept the following formats:- An array of strings or numbers, where each value will be used as a list item.- An array of objects, where each object represents a list item with specific properties such as label (display text) and value (underlying value).- A callback function that returns an array of items in one of the formats described above.This flexibility allows you to provide simple lists or more complex data structures for Input population, as well as load data asynchronously or dynamically when needed.any

Specifies the source of data to be loaded into the Input component. The dataSource can accept the following formats:

- An array of strings or numbers, where each value will be used as a list item.
- An array of objects, where each object represents a list item with specific properties such as label (display text) and value (underlying value).
- A callback function that returns an array of items in one of the formats described above.

This flexibility allows you to provide simple lists or more complex data structures for Input population, as well as load data asynchronously or dynamically when needed.

Try a demo showcasing the dataSource property.

Examples

Markup and runtime examples for dataSource:

HTML:

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

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

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

Read the current value:

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

disabledDetermines whether the element is interactive or inactive. When enabled, users can interact with the element (e.g., click, type, or select). When disabled, the element is visible but does not respond to user interactions.boolean

Determines whether the element is interactive or inactive. When enabled, users can interact with the element (e.g., click, type, or select). When disabled, the element is visible but does not respond to user interactions.

Default value

false
Try a demo showcasing the disabled property.

Examples

Markup and runtime examples for disabled:

HTML attribute:

<smart-text-area disabled></smart-text-area>

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

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

Read the current value:

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

dropDownButtonPositionSpecifies the placement of the dropdown button relative to its parent element, such as aligning it to the left, right, top, or bottom. This property controls where the dropdown button appears within the interface."none" | "left" | "right"

Specifies the placement of the dropdown button relative to its parent element, such as aligning it to the left, right, top, or bottom. This property controls where the dropdown button appears within the interface.

Allowed Values

  • "none" - The drop down button is hidden and the element acts as a simple input.
  • "left" - A drop down button is displayed on the left side of the element. The element acts as a DropDownList or a ComboBox depending on the readonly property.
  • "right" - A drop down button is displayed on the right side of the element. The element acts as a DropDownList or a ComboBox depending on the readonly property.

Default value

"right"
Try a demo showcasing the dropDownButtonPosition property.

Examples

Markup and runtime examples for dropDownButtonPosition:

HTML:

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

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

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

Read the current value:

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

dropDownHeightSpecifies the height of the dropdown menu. By default, this property is set to an empty string, which means the dropdown's height is determined by a corresponding CSS variable. If a specific value is provided, it will override the CSS variable and explicitly set the dropdown's height.string | number

Specifies the height of the dropdown menu. By default, this property is set to an empty string, which means the dropdown's height is determined by a corresponding CSS variable. If a specific value is provided, it will override the CSS variable and explicitly set the dropdown's height.

Default value

""

Examples

Markup and runtime examples for dropDownHeight:

HTML:

<smart-text-area drop-down-height="300"></smart-text-area>

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

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

Read the current value:

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

dropDownWidthSpecifies the width of the dropdown menu. By default, this property is set to an empty string (""), which means the dropdown’s width will be determined by the associated CSS variable (typically via a custom property such as --dropdown-width). To override the default behavior, you can explicitly set a specific width (e.g., "200px", "100%", etc.), which will be applied directly to the dropdown. If left as an empty string, the component remains responsive to changes in the relevant CSS variable.string | number

Specifies the width of the dropdown menu. By default, this property is set to an empty string (""), which means the dropdown’s width will be determined by the associated CSS variable (typically via a custom property such as --dropdown-width). To override the default behavior, you can explicitly set a specific width (e.g., "200px", "100%", etc.), which will be applied directly to the dropdown. If left as an empty string, the component remains responsive to changes in the relevant CSS variable.

Default value

""

Examples

Markup and runtime examples for dropDownWidth:

HTML:

<smart-text-area drop-down-width="300"></smart-text-area>

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

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

Read the current value:

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

inputPurposeDefines the expected type of data for this input field and specifies whether, and to what extent, the browser or user agent is allowed to offer autofill assistance. This attribute aligns with the standard HTML autocomplete attribute, providing guidance to browsers for streamlining data entry and enhancing user experience. Acceptable values indicate the type of information anticipated, such as 'on' (enable autocomplete), 'off' (disable autocomplete), 'name' (full name), 'organization' (company or organization name), 'street-address' (street address), among others. Proper use of this attribute ensures accurate and secure autofill behavior in web forms.string

Defines the expected type of data for this input field and specifies whether, and to what extent, the browser or user agent is allowed to offer autofill assistance. This attribute aligns with the standard HTML autocomplete attribute, providing guidance to browsers for streamlining data entry and enhancing user experience. Acceptable values indicate the type of information anticipated, such as 'on' (enable autocomplete), 'off' (disable autocomplete), 'name' (full name), 'organization' (company or organization name), 'street-address' (street address), among others. Proper use of this attribute ensures accurate and secure autofill behavior in web forms.

Default value

"off"

Examples

Markup and runtime examples for inputPurpose:

HTML:

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

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

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

Read the current value:

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

itemsSpecifies the maximum number of items that can be displayed in the dropdown list when a new autoComplete query is performed. This setting controls how many matched results are visible to the user at one time within the dropdown. By default, up to 8 matching items will be shown in the dropdown menu.number

Specifies the maximum number of items that can be displayed in the dropdown list when a new autoComplete query is performed. This setting controls how many matched results are visible to the user at one time within the dropdown. By default, up to 8 matching items will be shown in the dropdown menu.

Default value

8

Examples

Markup and runtime examples for items:

HTML:

<smart-text-area items="2"></smart-text-area>

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

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

Read the current value:

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

localeSpecifies or retrieves the current language code, typically following ISO 639-1 standards (e.g., "en" for English, "fr" for French). This property is used alongside the messages property to determine which set of localized messages should be displayed or accessed based on the selected language.string

Specifies or retrieves the current language code, typically following ISO 639-1 standards (e.g., "en" for English, "fr" for French). This property is used alongside the messages property to determine which set of localized messages should be displayed or accessed based on the selected language.

Default value

"en"

Examples

Markup and runtime examples for locale:

HTML:

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

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

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

Read the current value:

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

localizeFormatFunctionA callback function that allows you to define a custom format for messages returned by the Localization Module. Use this function to modify or enhance the appearance, structure, or content of localized messages before they are delivered to the application.function

A callback function that allows you to define a custom format for messages returned by the Localization Module. Use this function to modify or enhance the appearance, structure, or content of localized messages before they are delivered to the application.

Examples

Markup and runtime examples for localizeFormatFunction:

HTML:

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

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

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

Read the current value:

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

messagesDefines or retrieves an object containing text strings used within the widget that support localization. This property enables you to customize the widget’s displayed text for different languages or regions. It is typically used together with the locale property to provide translations and localize the widget’s interface.object

Defines or retrieves an object containing text strings used within the widget that support localization. This property enables you to customize the widget’s displayed text for different languages or regions. It is typically used together with the locale property to provide translations and localize the widget’s interface.

Default value




"en": {

"propertyUnknownType": "'{{name}}' property is with undefined 'type' member!",

"propertyInvalidValue": "Invalid '{{name}}' property value! Actual value: {{actualValue}}, Expected value: {{value}}!",

"propertyInvalidValueType": "Invalid '{{name}}' property value type! Actual type: {{actualType}}, Expected type: {{type}}!",

"elementNotInDOM": "Element does not exist in DOM! Please, add the element to the DOM, before invoking a method.",

"moduleUndefined": "Module is undefined.",

"missingReference": "{{elementType}}: Missing reference to {{files}}.",

"htmlTemplateNotSuported": "{{elementType}}: Browser doesn't support HTMLTemplate elements.",

"invalidTemplate": "{{elementType}}: '{{property}}' property accepts a string that must match the id of an HTMLTemplate element from the DOM.",

"invalidNode": "{{elementType}}: Invalid parameter '{{node}}' when calling {{method}}."

}

Examples

Markup and runtime examples for messages:

HTML:

<smart-text-area 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-area>

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

const el = document.querySelector('smart-text-area');
el.messages = {"en":{"propertyUnknownType":"'{{name}}' property is with undefined 'type' member!","propertyInvalidValue":"Invalid '{{name}}' property value! Actual value: {{actualValue}}, Expected value: {{value}}!","propertyInvalidValueType":"Invalid '{{name}}' property value type! Actual type: {{actualType}}, Expected type: {{type}}!","elementNotInDOM":"Element does not exist in DOM! Please, add the element to the DOM, before invoking a method.","moduleUndefined":"Module is undefined.","missingReference":"{{elementType}}: Missing reference to {{files}}.","htmlTemplateNotSuported":"{{elementType}}: Browser doesn't support HTMLTemplate elements.","invalidTemplate":"{{elementType}}: '{{property}}' property accepts a string that must match the id of an HTMLTemplate element from the DOM.","invalidNode":"{{elementType}}: Invalid parameter '{{node}}' when calling {{method}}."}};

Read the current value:

const el = document.querySelector('smart-text-area');
const messages = el.messages;

minLengthSpecifies the minimum number of characters a user must type into the input field before the autocomplete functionality is activated. Once this threshold is reached, the dropdown will open and display a list of items that match the entered text.number

Specifies the minimum number of characters a user must type into the input field before the autocomplete functionality is activated. Once this threshold is reached, the dropdown will open and display a list of items that match the entered text.

Default value

1

Examples

Markup and runtime examples for minLength:

HTML:

<smart-text-area min-length="2"></smart-text-area>

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

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

Read the current value:

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

nameGets or sets the 'name' attribute of the element. The 'name' attribute assigns an identifier to the element, which is used when submitting form data. When a form is submitted, the value of each input element with a 'name' attribute is included in the form data, using the 'name' as the key. This allows server-side scripts to reference the data by name.string

Gets or sets the 'name' attribute of the element. The 'name' attribute assigns an identifier to the element, which is used when submitting form data. When a form is submitted, the value of each input element with a 'name' attribute is included in the form data, using the 'name' as the key. This allows server-side scripts to reference the data by name.

Default value

""

Examples

Markup and runtime examples for name:

HTML:

<smart-text-area name="dropdown"></smart-text-area>

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

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

Read the current value:

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

openedSpecifies whether the dropdown menu is currently visible (open) or hidden (closed).boolean

Specifies whether the dropdown menu is currently visible (open) or hidden (closed).

Default value

false

Examples

Markup and runtime examples for opened:

HTML attribute:

<smart-text-area opened></smart-text-area>

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

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

Read the current value:

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

placeholderSpecifies the placeholder text that appears inside the input field when it is empty, providing a hint or example to guide the user on what to enter.string

Specifies the placeholder text that appears inside the input field when it is empty, providing a hint or example to guide the user on what to enter.

Default value

""
Try a demo showcasing the placeholder property.

Examples

Markup and runtime examples for placeholder:

HTML:

<smart-text-area placeholder="Empty"></smart-text-area>

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

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

Read the current value:

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

querySpecifies or retrieves the search query used to filter items within the data source. This query determines which items are displayed during the autoComplete operation. If the query is an empty string, the filter is not applied, and all items from the data source will be shown.string | number

Specifies or retrieves the search query used to filter items within the data source. This query determines which items are displayed during the autoComplete operation. If the query is an empty string, the filter is not applied, and all items from the data source will be shown.

Default value

""

Examples

Markup and runtime examples for query:

HTML:

<smart-text-area query="ABC"></smart-text-area>

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

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

Read the current value:

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

queryModeSpecifies the autocomplete query mode, which defines how user input is matched to suggestions. This property controls the underlying matching algorithm—such as prefix, infix, or fuzzy matching—used to generate autocomplete results, thereby influencing the relevance and style of suggestions presented to the user."contains" | "containsIgnoreCase" | "doesNotContain" | "doesNotContainIgnoreCase" | "equals" | "equalsIgnoreCase" | "startsWith" | "startsWithIgnoreCase" | "endsWith" | "endsWithIgnoreCase"

Specifies the autocomplete query mode, which defines how user input is matched to suggestions. This property controls the underlying matching algorithm—such as prefix, infix, or fuzzy matching—used to generate autocomplete results, thereby influencing the relevance and style of suggestions presented to the user.

Allowed Values

  • "contains" - Displays the items that contain the search query (case sensitive)
  • "containsIgnoreCase" - Displays the items that contain the search query (case insensitive)
  • "doesNotContain" - Displays the items that do not contain the search query (case sensitive)
  • "doesNotContainIgnoreCase" - Displays the items that do not contain the search query (case insensitive)
  • "equals" - Displays the items that are equal the search query (case sensitive)
  • "equalsIgnoreCase" - Displays the items that are equal the search query (case insensitive)
  • "startsWith" - Displays the items that start with the search query (case sensitive)
  • "startsWithIgnoreCase" - Displays the items that start with the search query (case insensitive)
  • "endsWith" - Displays the items that end with the search query (case sensitive)
  • "endsWithIgnoreCase" - Displays the items that start with the search query (case insensitive)

Default value

"containsIgnoreCase"

Examples

Markup and runtime examples for queryMode:

HTML:

<smart-text-area query-mode="contains"></smart-text-area>

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

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

Read the current value:

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

readonlySpecifies whether the user can enter text into the input field. When the dropDownButtonPosition property is set to 'left' or 'right', the readonly property controls the component’s behavior—if a dataSource is provided:- When readonly is false, the input functions as a ComboBox, allowing users to both type custom values and select from the dropdown list.- When readonly is true, the input behaves as a DropDownList, restricting users to select only from the available options in the dropdown and preventing any text input.boolean

Specifies whether the user can enter text into the input field. When the dropDownButtonPosition property is set to 'left' or 'right', the readonly property controls the component’s behavior—if a dataSource is provided:

- When readonly is false, the input functions as a ComboBox, allowing users to both type custom values and select from the dropdown list.
- When readonly is true, the input behaves as a DropDownList, restricting users to select only from the available options in the dropdown and preventing any text input.

Default value

false
Try a demo showcasing the readonly property.

Examples

Markup and runtime examples for readonly:

HTML attribute:

<smart-text-area readonly></smart-text-area>

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

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

Read the current value:

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

resizeSpecifies whether the user is allowed to manually resize the Textarea component, enabling or disabling drag-to-resize functionality in the interface."none" | "horizontal" | "vertical" | "both"

Specifies whether the user is allowed to manually resize the Textarea component, enabling or disabling drag-to-resize functionality in the interface.

Default value

"none"
Try a demo showcasing the resize property.

Examples

Markup and runtime examples for resize:

HTML:

<smart-text-area resize="both"></smart-text-area>

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

const el = document.querySelector('smart-text-area');
el.resize = "none";

Read the current value:

const el = document.querySelector('smart-text-area');
const resize = el.resize;

richTextAllows you to toggle rich text formatting on or off, enabling users to apply styles such as bold, italics, lists, and other text enhancements when enabled, or restricting input to plain text when disabled.boolean

Allows you to toggle rich text formatting on or off, enabling users to apply styles such as bold, italics, lists, and other text enhancements when enabled, or restricting input to plain text when disabled.

Default value

false
Try a demo showcasing the richText property.

Examples

Markup and runtime examples for richText:

HTML attribute:

<smart-text-area rich-text></smart-text-area>

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

const el = document.querySelector('smart-text-area');
el.richText = false;

Read the current value:

const el = document.querySelector('smart-text-area');
const richText = el.richText;

rightToLeftSets or retrieves a value that determines whether the element’s alignment is adjusted to support right-to-left (RTL) languages, such as Arabic or Hebrew. When enabled, this property ensures that text direction and layout are suitable for locales that use right-to-left scripts.boolean

Sets or retrieves a value that determines whether the element’s alignment is adjusted to support right-to-left (RTL) languages, such as Arabic or Hebrew. When enabled, this property ensures that text direction and layout are suitable for locales that use right-to-left scripts.

Default value

false
Try a demo showcasing the rightToLeft property.

Examples

Markup and runtime examples for rightToLeft:

HTML attribute:

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

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

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

Read the current value:

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

sortDirectionSpecifies the sorting order to be applied when the sort option is enabled. Accepts either ascending (asc) to sort items from lowest to highest, or descending (desc) to sort items from highest to lowest.string

Specifies the sorting order to be applied when the sort option is enabled. Accepts either ascending (asc) to sort items from lowest to highest, or descending (desc) to sort items from highest to lowest.

Default value

"asc"

Examples

Markup and runtime examples for sortDirection:

HTML:

<smart-text-area sort-direction="desc"></smart-text-area>

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

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

Read the current value:

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

sortedSpecifies whether the items are arranged in alphabetical order. When set to true, the items will be automatically sorted from A to Z based on their names or labels; when set to false, the items will retain their original order as provided.boolean

Specifies whether the items are arranged in alphabetical order. When set to true, the items will be automatically sorted from A to Z based on their names or labels; when set to false, the items will retain their original order as provided.

Default value

false

Examples

Markup and runtime examples for sorted:

HTML attribute:

<smart-text-area sorted></smart-text-area>

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

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

Read the current value:

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

themeSpecifies the visual theme applied to the element. The selected theme controls the appearance, including colors, fonts, and overall styling, ensuring a consistent look and feel across the element's user interface.string

Specifies the visual theme applied to the element. The selected theme controls the appearance, including colors, fonts, and overall styling, ensuring a consistent look and feel across the element's user interface.

Default value

""

Examples

Markup and runtime examples for theme:

HTML:

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

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

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

Read the current value:

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

typeSpecifies the type of data that the input field accepts (e.g., text, number, email, password). Setting the input type helps control the kind of information users can enter, enables appropriate on-screen keyboards on mobile devices, and allows browsers to provide built-in validation for certain data formats.string

Specifies the type of data that the input field accepts (e.g., text, number, email, password). Setting the input type helps control the kind of information users can enter, enables appropriate on-screen keyboards on mobile devices, and allows browsers to provide built-in validation for certain data formats.

Default value

""

Examples

Markup and runtime examples for type:

HTML:

<smart-text-area type="blue"></smart-text-area>

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

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

Read the current value:

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

unfocusableWhen set to true, this property prevents the element from receiving keyboard focus, making it impossible to navigate to the element using the Tab key or programmatic focus methods (such as element.focus()).boolean

When set to true, this property prevents the element from receiving keyboard focus, making it impossible to navigate to the element using the Tab key or programmatic focus methods (such as element.focus()).

Default value

false

Examples

Markup and runtime examples for unfocusable:

HTML attribute:

<smart-text-area unfocusable></smart-text-area>

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

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

Read the current value:

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

unlockKeyDefines the 'unlockKey' property, which is used to retrieve or assign the unique key required to unlock access to the product. This property can be read to obtain the current unlock key or set to specify a new key for unlocking the product.string

Defines the 'unlockKey' property, which is used to retrieve or assign the unique key required to unlock access to the product. This property can be read to obtain the current unlock key or set to specify a new key for unlocking the product.

Default value

""

Examples

Markup and runtime examples for unlockKey:

HTML:

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

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

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

Read the current value:

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

usersDefines the list of users available for mentioning in the TextArea component. Expects an array where each element is an object containing both id and name properties (e.g., { id: string | number, name: string }). When users type the at symbol, a dropdown appears, allowing them to select a user from this array to mention within the TextArea.[]

Defines the list of users available for mentioning in the TextArea component. Expects an array where each element is an object containing both id and name properties (e.g., { id: string | number, name: string }). When users type the at symbol, a dropdown appears, allowing them to select a user from this array to mention within the TextArea.

Default value

[]

Examples

Markup and runtime examples for users:

HTML:

<smart-text-area users="[]"></smart-text-area>

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

const el = document.querySelector('smart-text-area');
el.users = [];

Read the current value:

const el = document.querySelector('smart-text-area');
const users = el.users;

valueSets or retrieves the current value of the element, allowing you to programmatically update or access the element's value property. This is commonly used for form controls such as input, select, and textarea elements.string

Sets or retrieves the current value of the element, allowing you to programmatically update or access the element's value property. This is commonly used for form controls such as input, select, and textarea elements.

Default value

""
Try a demo showcasing the value property.

Examples

Markup and runtime examples for value:

HTML:

<smart-text-area value="value1"></smart-text-area>

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

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

Read the current value:

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

Events

changeThis event is triggered whenever the user's selection within the component changes. It fires each time a new item or range is selected, allowing you to respond to selection updates in real time. Use this event to perform actions such as updating related UI elements, fetching additional data, or validating the current selection.CustomEvent

This event is triggered whenever the user's selection within the component changes. It fires each time a new item or range is selected, allowing you to respond to selection updates in real time. Use this event to perform actions such as updating related UI elements, fetching additional data, or validating the current selection.

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

Arguments

evCustomEvent
ev.detailObject
ev.detail.label - The label of the new selected item.
ev.detail.oldLabel - The label of the item that was previously selected before the event was triggered.
ev.detail.oldValue - The value of the item that was previously selected before the event was triggered.
ev.detail.value - The value of the new selected item.

Methods

isDefaultPrevented

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

Returns

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

preventDefault

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

stopPropagation

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

Examples

Listen for change using the pattern that matches your stack.

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

document.querySelector('smart-text-area')?.addEventListener('change', (event) => {
    const detail = event.detail,
        label = detail.label,
        oldLabel = detail.oldLabel,
        oldValue = detail.oldValue,
        value = detail.value;

	// event handling code goes here.
})

changingThis event is triggered whenever a key is released (keyup) within the TextArea, but only if the content of the TextArea has changed since the previous event.CustomEvent

This event is triggered whenever a key is released (keyup) within the TextArea, but only if the content of the TextArea has changed since the previous event.

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

Arguments

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

Methods

isDefaultPrevented

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

Returns

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

preventDefault

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

stopPropagation

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

Examples

Listen for changing using the pattern that matches your stack.

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

document.querySelector('smart-text-area')?.addEventListener('changing', (event) => {
    const detail = event.detail,
        oldValue = detail.oldValue,
        value = detail.value;

	// event handling code goes here.
})

Methods

close(): voidCloses the dropdown menu, hiding its list of selectable options from view.

Closes the dropdown menu, hiding its list of selectable options from view.

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

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

Try a demo showcasing the close method.

ensureVisible(): voidGuarantees that the currently active (selected) item remains in view within the scrollable area, automatically scrolling as needed to prevent it from being hidden or obscured.

Guarantees that the currently active (selected) item remains in view within the scrollable area, automatically scrolling as needed to prevent it from being hidden or obscured.

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

document.querySelector('smart-text-area')?.ensureVisible();

getMentions(): []Returns an array containing information about all users who are mentioned (e.g., with “@username”) within the value of the Textarea. Each user object in the array represents a unique user mention detected in the Textarea's current content.

Returns an array containing information about all users who are mentioned (e.g., with “@username”) within the value of the Textarea. Each user object in the array represents a unique user mention detected in the Textarea's current content.

Returns[]

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

const result = document.querySelector('smart-text-area')?.getMentions();

open(): voidExpands the drop-down menu, displaying its list of selectable options to the user.

Expands the drop-down menu, displaying its list of selectable options to the user.

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

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

Try a demo showcasing the open method.

select(): voidEnhances user interaction with input elements by selecting all the text within the input field. If the input element has the readonly attribute, the function instead sets focus on the element without selecting the text, since selection is not allowed for readonly inputs. This ensures an appropriate response whether the input is editable or not.

Enhances user interaction with input elements by selecting all the text within the input field. If the input element has the readonly attribute, the function instead sets focus on the element without selecting the text, since selection is not allowed for readonly inputs. This ensures an appropriate response whether the input is editable or not.

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

document.querySelector('smart-text-area')?.select();