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
Properties
Events
Methods
Properties
animation"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"Example
Set the animation property.
<smart-multiline-text-box animation='none'></smart-multiline-text-box>
Set the animation property by using the HTML Element's instance.
const multilinetextbox = document.querySelector('smart-multiline-text-box');
multilinetextbox.animation = 'simple';
Get the animation property.
const multilinetextbox = document.querySelector('smart-multiline-text-box');
let animation = multilinetextbox.animation;
autoCapitalize"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"Example
Set the autoCapitalize property.
<smart-multiline-text-box auto-capitalize='words'></smart-multiline-text-box>
Set the autoCapitalize property by using the HTML Element's instance.
const multilinetextbox = document.querySelector('smart-multiline-text-box');
multilinetextbox.autoCapitalize = 'characters';
Get the autoCapitalize property.
const multilinetextbox = document.querySelector('smart-multiline-text-box');
let autoCapitalize = multilinetextbox.autoCapitalize;
autoComplete"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"Example
Set the autoComplete property.
<smart-multiline-text-box auto-complete='on'></smart-multiline-text-box>
Set the autoComplete property by using the HTML Element's instance.
const multilinetextbox = document.querySelector('smart-multiline-text-box');
multilinetextbox.autoComplete = 'off';
Get the autoComplete property.
const multilinetextbox = document.querySelector('smart-multiline-text-box');
let autoComplete = multilinetextbox.autoComplete;
autoExpandboolean
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
falseExample
Set the autoExpand property.
<smart-multiline-text-box auto-expand></smart-multiline-text-box>
Set the autoExpand property by using the HTML Element's instance.
const multilinetextbox = document.querySelector('smart-multiline-text-box');
multilinetextbox.autoExpand = false;
Get the autoExpand property.
const multilinetextbox = document.querySelector('smart-multiline-text-box');
let autoExpand = multilinetextbox.autoExpand;
autoFocusboolean
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
falseExample
Set the autoFocus property.
<smart-multiline-text-box auto-focus></smart-multiline-text-box>
Set the autoFocus property by using the HTML Element's instance.
const multilinetextbox = document.querySelector('smart-multiline-text-box');
multilinetextbox.autoFocus = false;
Get the autoFocus property.
const multilinetextbox = document.querySelector('smart-multiline-text-box');
let autoFocus = multilinetextbox.autoFocus;
colsnumber
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 elements; it is specific to
Default value
20Example
Set the cols property.
<smart-multiline-text-box cols='40'></smart-multiline-text-box>
Set the cols property by using the HTML Element's instance.
const multilinetextbox = document.querySelector('smart-multiline-text-box');
multilinetextbox.cols = 60;
Get the cols property.
const multilinetextbox = document.querySelector('smart-multiline-text-box');
let cols = multilinetextbox.cols;
disabledboolean
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
falseExample
Set the disabled property.
<smart-multiline-text-box disabled></smart-multiline-text-box>
Set the disabled property by using the HTML Element's instance.
const multilinetextbox = document.querySelector('smart-multiline-text-box');
multilinetextbox.disabled = false;
Get the disabled property.
const multilinetextbox = document.querySelector('smart-multiline-text-box');
let disabled = multilinetextbox.disabled;
displayMode"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"Example
Set the displayMode property.
<smart-multiline-text-box display-mode='escaped'></smart-multiline-text-box>
Set the displayMode property by using the HTML Element's instance.
const multilinetextbox = document.querySelector('smart-multiline-text-box');
multilinetextbox.displayMode = 'default';
Get the displayMode property.
const multilinetextbox = document.querySelector('smart-multiline-text-box');
let displayMode = multilinetextbox.displayMode;
enterKeyBehavior"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"Example
Set the enterKeyBehavior property.
<smart-multiline-text-box enter-key-behavior='submit'></smart-multiline-text-box>
Set the enterKeyBehavior property by using the HTML Element's instance.
const multilinetextbox = document.querySelector('smart-multiline-text-box');
multilinetextbox.enterKeyBehavior = 'clearOnSubmit';
Get the enterKeyBehavior property.
const multilinetextbox = document.querySelector('smart-multiline-text-box');
let enterKeyBehavior = multilinetextbox.enterKeyBehavior;
formstring
Specifies the form element with which this element is associated, known as its "form owner." The value of this attribute must be the ID of an existing