PasswordTextBox JAVASCRIPT UI Component API

PasswordTextBox Javascript API

Class

PasswordTextBox

PasswordTextBox

PasswordTextBox lets the user enter a password with the text hidden.

Selector

smart-password-text-box

Properties

AanimationSpecifies or retrieves the current animation mode. When set to 'none', all animations are disabled. If set to any other supported value, animations will be enabled according to the specified mode.
AautoFocusIndicates that the element will automatically receive keyboard focus as soon as the page is loaded, allowing users to interact with it immediately without clicking or tabbing to it. This is often used to improve accessibility and streamline user interaction with form fields or interactive elements.
DdisabledDetermines whether the element is interactive or inactive. When enabled, users can interact with the element; when disabled, the element becomes unresponsive to user actions such as clicks or input.
EenterKeyBehaviorDefines the action that occurs when the "Enter" key is pressed within the input field. By default, the mode is set to "submit", meaning pressing "Enter" will attempt to submit the associated form. You can customize this behavior by specifying alternative modes, such as preventing form submission or triggering a custom handler.
FformSpecifies the form element with which this element is associated (referred to as its "form owner"). The value of this attribute should be the id of a
element within the same HTML document. This allows the element to be associated with a form even if it is not nested inside the tags.
HhintDisplays supplemental helper text beneath the element, visible only while the element is focused. This text provides additional guidance or context to users during interaction.
LlabelDisplays a label positioned above the input element. This label remains persistently visible, providing a clear and accessible description of the input’s purpose at all times.
UunlockKeyGets or sets the unlockKey, a unique key required to activate and access the product. Use this property to retrieve the current unlock key or assign a new one to enable product unlocking functionality.
LlocaleSpecifies or retrieves the current language setting. This property determines which set of localized text strings from the messages property is used for display. When you set the language, the corresponding messages are shown to users in that language. When you get the language, it returns the currently active language code.
LlocalizeFormatFunctionCallback function that allows you to customize the formatting of messages returned by the Localization Module. This enables you to modify or enhance localized message strings—such as adding dynamic data, adjusting placeholders, or changing text structure—before they are displayed to users.
MmaxLengthSpecifies or retrieves the maximum number of characters allowed in the input field. If set, the user cannot enter more characters than this limit. This constraint helps enforce data validation and control the input length.
MmessagesDefines an object where each property corresponds to a specific password strength state, with associated string values that describe or label each state (e.g., "weak," "moderate," "strong"). This object is typically used to display feedback messages or labels reflecting the current strength of a user's password during input.
MminLengthSpecifies or retrieves the minimum number of characters required for user input. When set, the user must enter at least this many characters for the input to be considered valid.
NnameSets or retrieves the value of the element's name attribute. The name attribute is used to identify form fields when submitting HTML forms, allowing the data entered in the element to be included in the form's submission with the specified name as the key. This is essential for server-side processing of form data.
PpasswordStrengthWith this property, you can specify a custom callback function that evaluates the strength of a password. The function should accept the current password as input and return a string representing the assessed strength level. The returned string must be one of the following predefined values: 'short', 'weak', 'far', 'good', or 'strong'. This value will be used by the component to indicate how secure the entered password is according to your custom logic.
PplaceholderThis is the text that appears within the element when it is empty, serving as a prompt or hint to the user about the expected input. Once the user enters a value, this placeholder text disappears.
RrequiredEnhances the requirement that the user must provide a value for this element before the form can be submitted. If this field is left empty, the form submission will be blocked and the user will be prompted to enter a value. This ensures that the input is mandatory, helping maintain data completeness and integrity.
RrightToLeftSets or retrieves a value specifying whether the element’s alignment is adjusted to support right-to-left (RTL) languages, such as Arabic or Hebrew. When enabled, the element’s content and layout are adapted for proper display in locales that use right-to-left text direction.
SselectAllOnFocusDetermines if the entire content of the input field should be automatically highlighted (selected) when the input receives focus, making it easier for users to quickly replace or copy the content.
SshowPasswordIconSpecifies whether the password icon (such as an eye symbol to show or hide password text) is displayed in the input field.
SshowPasswordStrengthSpecifies whether a tooltip displaying the password strength indicator will be visible to the user during password entry. When enabled, this tooltip provides real-time feedback on the strength of the entered password.
TthemeSpecifies the visual theme to be applied. The theme controls the overall appearance and style—including colors, fonts, and backgrounds—of the element for a consistent look and feel.
TtooltipArrowSpecifies whether the Tooltip component should display an arrow pointing to the target element. Setting this option to true will show the arrow, while false will hide it.
TtooltipDelaySpecifies the amount of time, in milliseconds, to wait before displaying the tooltip after a user interaction (such as hovering or focusing on an element).
TtooltipPositionSpecifies the placement of the tooltip relative to the target element, such as "top", "bottom", "left", or "right". This controls where the tooltip will appear when it is displayed.
TtooltipTemplateSpecifies a custom template for rendering the tooltip’s content, allowing you to define the layout, formatting, and dynamic data within the tooltip. This enables greater control over the appearance and behavior of the tooltip beyond the default content.
UunfocusableIndicates whether the element should be excluded from keyboard navigation and cannot receive focus. If set to true, users will not be able to focus on the element using the keyboard or mouse interactions.
VvalueSets a new value for the element or retrieves its current value, depending on whether an argument is provided. Useful for updating or accessing the element’s data within a form or component.

Events

CchangeThis event is triggered whenever the value of the element is modified by the user or through programmatic changes. It occurs after the change has been committed, allowing you to respond to updates in the element’s value.
CchangingThis event is triggered whenever a key is released (key up) within the TextBox, but only if the TextBox's value has changed as a result of the key press. This ensures that the event fires solely when user input modifies the content, preventing unnecessary triggers when the value remains unchanged.

Methods

FfocusSets keyboard focus to the specified element, making it the active element on the page and enabling user input or interaction through the keyboard. This is commonly used to improve accessibility, guide user workflow, or trigger specific UI behaviors.
RresetThis method resets the input field to its initial value, discarding any changes made by the user and restoring the input's original state as specified when the component or element was first rendered.

Properties

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

Specifies or retrieves the current animation mode. When set to 'none', all animations are disabled. If set to any other supported value, animations will be enabled according to the specified mode.

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-password-text-box animation='none'></smart-password-text-box>

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

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

Get the animation property. 

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

autoFocusboolean

Indicates that the element will automatically receive keyboard focus as soon as the page is loaded, allowing users to interact with it immediately without clicking or tabbing to it. This is often used to improve accessibility and streamline user interaction with form fields or interactive elements.

Default value

false

Example

Set the autoFocus property. 

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

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

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

Get the autoFocus property. 

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

disabledboolean

Determines whether the element is interactive or inactive. When enabled, users can interact with the element; when disabled, the element becomes unresponsive to user actions such as clicks or input.

Default value

false

Example

Set the disabled property. 

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

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

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

Get the disabled property. 

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

enterKeyBehavior"clearOnSubmit" | "submit"

Defines the action that occurs when the "Enter" key is pressed within the input field. By default, the mode is set to "submit", meaning pressing "Enter" will attempt to submit the associated form. You can customize this behavior by specifying alternative modes, such as preventing form submission or triggering a custom handler.

Allowed Values

  • "clearOnSubmit" - Clears the value of the input on Submit.
  • "submit" - Submits the value of the input but doesn't clear it.

Default value

"submit"

Example

Set the enterKeyBehavior property. 

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

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

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

Get the enterKeyBehavior property. 

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

formstring

Specifies the form element with which this element is associated (referred to as its "form owner"). The value of this attribute should be the id of a element within the same HTML document. This allows the element to be associated with a form even if it is not nested inside the tags.

Default value

""

Example

Set the form property. 

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

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

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

Get the form property. 

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

hintany

Displays supplemental helper text beneath the element, visible only while the element is focused. This text provides additional guidance or context to users during interaction.

Example

Set the hint property. 

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

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

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

Get the hint property. 

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

labelstring

Displays a label positioned above the input element. This label remains persistently visible, providing a clear and accessible description of the input’s purpose at all times.

Default value

""

Example

Set the label property. 

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

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

 const passwordtextbox = document.querySelector('smart-password-text-box');
 passwordtextbox.label = 'Hint';

Get the label property. 

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

unlockKeystring

Gets or sets the unlockKey, a unique key required to activate and access the product. Use this property to retrieve the current unlock key or assign a new one to enable product unlocking functionality.

Default value

""

Example

Set the unlockKey property. 

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

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

 const passwordtextbox = document.querySelector('smart-password-text-box');
 passwordtextbox.unlockKey = '1111-2222-3333-4444-5555';

Get the unlockKey property. 

 const passwordtextbox = document.querySelector('smart-password-text-box');
 let unlockKey = passwordtextbox.unlockKey;

localestring

Specifies or retrieves the current language setting. This property determines which set of localized text strings from the messages property is used for display. When you set the language, the corresponding messages are shown to users in that language. When you get the language, it returns the currently active language code.

Default value

"en"

Example

Set the locale property. 

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

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

 const passwordtextbox = document.querySelector('smart-password-text-box');
 passwordtextbox.locale = 'fr';

Get the locale property. 

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

localizeFormatFunctionfunction | null

Callback function that allows you to customize the formatting of messages returned by the Localization Module. This enables you to modify or enhance localized message strings—such as adding dynamic data, adjusting placeholders, or changing text structure—before they are displayed to users.

Example

Set the localizeFormatFunction property. 

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

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

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

Get the localizeFormatFunction property. 

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

maxLengthnumber

Specifies or retrieves the maximum number of characters allowed in the input field. If set, the user cannot enter more characters than this limit. This constraint helps enforce data validation and control the input length.

Example

Set the maxLength property. 

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

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

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

Get the maxLength property. 

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

messagesobject

Defines an object where each property corresponds to a specific password strength state, with associated string values that describe or label each state (e.g., "weak," "moderate," "strong"). This object is typically used to display feedback messages or labels reflecting the current strength of a user's password during input.

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

"passwordStrength": "Password strength",

"short": "Short",

"weak": "Weak",

"far": "Far",

"good": "Good",

"strong": "Strong",

"showPassword": "Show password"

}

Try a demo showcasing the messages property.

Example

Set the messages property. 

 <smart-password-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}}.","passwordStrength":"Passwortstaerke","short":"kurz","weak":"schwach","far":"weit","good":"gut","strong":"stark","showPassword":"Passwort anzeigen"}}'></smart-password-text-box>

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

 const passwordtextbox = document.querySelector('smart-password-text-box');
 passwordtextbox.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}}.","passwordStrength":"Password strength","short":"Short","weak":"Weak","far":"Far","good":"Good","strong":"Strong","showPassword":"Show password"}};

Get the messages property. 

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

minLengthnumber

Specifies or retrieves the minimum number of characters required for user input. When set, the user must enter at least this many characters for the input to be considered valid.

Default value

2

Example

Set the minLength property. 

 <smart-password-text-box min-length='20'></smart-password-text-box>

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

 const passwordtextbox = document.querySelector('smart-password-text-box');
 passwordtextbox.minLength = 50;

Get the minLength property. 

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

namestring

Sets or retrieves the value of the element's name attribute. The name attribute is used to identify form fields when submitting HTML forms, allowing the data entered in the element to be included in the form's submission with the specified name as the key. This is essential for server-side processing of form data.

Default value

""

Example

Set the name property. 

 <smart-password-text-box name='TextArea'></smart-password-text-box>

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

 const passwordtextbox = document.querySelector('smart-password-text-box');
 passwordtextbox.name = 'textarea';

Get the name property. 

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

passwordStrengthfunction | null

With this property, you can specify a custom callback function that evaluates the strength of a password. The function should accept the current password as input and return a string representing the assessed strength level. The returned string must be one of the following predefined values: 'short', 'weak', 'far', 'good', or 'strong'. This value will be used by the component to indicate how secure the entered password is according to your custom logic.

Try a demo showcasing the passwordStrength property.

Example

Set the passwordStrength property. 

 <smart-password-text-box password-strength='function (password, allowedSymbols) { return 'weak'; }'></smart-password-text-box>

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

 const passwordtextbox = document.querySelector('smart-password-text-box');
 passwordtextbox.passwordStrength = function (password, allowedSymbols) { return 'strong'; };

Get the passwordStrength property. 

 const passwordtextbox = document.querySelector('smart-password-text-box');
 let passwordStrength = passwordtextbox.passwordStrength;

placeholderstring

This is the text that appears within the element when it is empty, serving as a prompt or hint to the user about the expected input. Once the user enters a value, this placeholder text disappears.

Default value

""
Try a demo showcasing the placeholder property.

Example

Set the placeholder property. 

 <smart-password-text-box placeholder='Placeholder'></smart-password-text-box>

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

 const passwordtextbox = document.querySelector('smart-password-text-box');
 passwordtextbox.placeholder = 'PlaceHolder';

Get the placeholder property. 

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

requiredboolean

Enhances the requirement that the user must provide a value for this element before the form can be submitted. If this field is left empty, the form submission will be blocked and the user will be prompted to enter a value. This ensures that the input is mandatory, helping maintain data completeness and integrity.

Default value

false

Example

Set the required property. 

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

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

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

Get the required property. 

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

rightToLeftboolean

Sets or retrieves a value specifying whether the element’s alignment is adjusted to support right-to-left (RTL) languages, such as Arabic or Hebrew. When enabled, the element’s content and layout are adapted for proper display in locales that use right-to-left text direction.

Default value

false
Try a demo showcasing the rightToLeft property.

Example

Set the rightToLeft property. 

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

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

 const passwordtextbox = document.querySelector('smart-password-text-box');
 passwordtextbox.rightToLeft = false;

Get the rightToLeft property. 

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

selectAllOnFocusboolean

Determines if the entire content of the input field should be automatically highlighted (selected) when the input receives focus, making it easier for users to quickly replace or copy the content.

Default value

false
Try a demo showcasing the selectAllOnFocus property.

Example

Set the selectAllOnFocus property. 

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

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

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

Get the selectAllOnFocus property. 

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

showPasswordIconboolean

Specifies whether the password icon (such as an eye symbol to show or hide password text) is displayed in the input field.

Default value

false
Try a demo showcasing the showPasswordIcon property.

Example

Set the showPasswordIcon property. 

 <smart-password-text-box show-password-icon></smart-password-text-box>

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

 const passwordtextbox = document.querySelector('smart-password-text-box');
 passwordtextbox.showPasswordIcon = false;

Get the showPasswordIcon property. 

 const passwordtextbox = document.querySelector('smart-password-text-box');
 let showPasswordIcon = passwordtextbox.showPasswordIcon;

showPasswordStrengthboolean

Specifies whether a tooltip displaying the password strength indicator will be visible to the user during password entry. When enabled, this tooltip provides real-time feedback on the strength of the entered password.

Default value

false
Try a demo showcasing the showPasswordStrength property.

Example

Set the showPasswordStrength property. 

 <smart-password-text-box show-password-strength></smart-password-text-box>

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

 const passwordtextbox = document.querySelector('smart-password-text-box');
 passwordtextbox.showPasswordStrength = false;

Get the showPasswordStrength property. 

 const passwordtextbox = document.querySelector('smart-password-text-box');
 let showPasswordStrength = passwordtextbox.showPasswordStrength;

themestring

Specifies the visual theme to be applied. The theme controls the overall appearance and style—including colors, fonts, and backgrounds—of the element for a consistent look and feel.

Default value

""

Example

Set the theme property. 

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

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

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

Get the theme property. 

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

tooltipArrowboolean

Specifies whether the Tooltip component should display an arrow pointing to the target element. Setting this option to true will show the arrow, while false will hide it.

Default value

false
Try a demo showcasing the tooltipArrow property.

Example

Set the tooltipArrow property. 

 <smart-password-text-box tooltip-arrow></smart-password-text-box>

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

 const passwordtextbox = document.querySelector('smart-password-text-box');
 passwordtextbox.tooltipArrow = false;

Get the tooltipArrow property. 

 const passwordtextbox = document.querySelector('smart-password-text-box');
 let tooltipArrow = passwordtextbox.tooltipArrow;

tooltipDelaynumber

Specifies the amount of time, in milliseconds, to wait before displaying the tooltip after a user interaction (such as hovering or focusing on an element).

Default value

0

Example

Set the tooltipDelay property. 

 <smart-password-text-box tooltip-delay='200'></smart-password-text-box>

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

 const passwordtextbox = document.querySelector('smart-password-text-box');
 passwordtextbox.tooltipDelay = 300;

Get the tooltipDelay property. 

 const passwordtextbox = document.querySelector('smart-password-text-box');
 let tooltipDelay = passwordtextbox.tooltipDelay;

tooltipPosition"absolute" | "bottom" | "top" | "left" | "right"

Specifies the placement of the tooltip relative to the target element, such as "top", "bottom", "left", or "right". This controls where the tooltip will appear when it is displayed.

Allowed Values

  • "absolute" - The tooltip is positioned absolutely by the user.
  • "bottom" - The tooltip is positioned below the input.
  • "top" - The tooltip is positioned above the input.
  • "left" - The tooltip is positioned to the left of the input.
  • "right" - The tooltip is positioned to the right the input.

Default value

"top"
Try a demo showcasing the tooltipPosition property.

Example

Set the tooltipPosition property. 

 <smart-password-text-box tooltip-position='left'></smart-password-text-box>

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

 const passwordtextbox = document.querySelector('smart-password-text-box');
 passwordtextbox.tooltipPosition = 'right';

Get the tooltipPosition property. 

 const passwordtextbox = document.querySelector('smart-password-text-box');
 let tooltipPosition = passwordtextbox.tooltipPosition;

tooltipTemplatestring

Specifies a custom template for rendering the tooltip’s content, allowing you to define the layout, formatting, and dynamic data within the tooltip. This enables greater control over the appearance and behavior of the tooltip beyond the default content.

Default value

"null"
Try a demo showcasing the tooltipTemplate property.

Example

Set the tooltipTemplate property. 

 <smart-password-text-box tooltip-template='templateId1'></smart-password-text-box>

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

 const passwordtextbox = document.querySelector('smart-password-text-box');
 passwordtextbox.tooltipTemplate = 'templateId2';

Get the tooltipTemplate property. 

 const passwordtextbox = document.querySelector('smart-password-text-box');
 let tooltipTemplate = passwordtextbox.tooltipTemplate;

unfocusableboolean

Indicates whether the element should be excluded from keyboard navigation and cannot receive focus. If set to true, users will not be able to focus on the element using the keyboard or mouse interactions.

Default value

false

Example

Set the unfocusable property. 

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

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

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

Get the unfocusable property. 

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

valuestring

Sets a new value for the element or retrieves its current value, depending on whether an argument is provided. Useful for updating or accessing the element’s data within a form or component.

Default value

""

Example

Set the value property. 

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

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

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

Get the value property. 

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

Events

changeCustomEvent

This event is triggered whenever the value of the element is modified by the user or through programmatic changes. It occurs after the change has been committed, allowing you to respond to updates in the element’s value.

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

Methods

isDefaultPrevented

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

Returns

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

preventDefault

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

stopPropagation

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

Try a demo showcasing the change event.

Example

Set up the event handler of change event. 

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

	// event handling code goes here.
})

changingCustomEvent

This event is triggered whenever a key is released (key up) within the TextBox, but only if the TextBox's value has changed as a result of the key press. This ensures that the event fires solely when user input modifies the content, preventing unnecessary triggers when the value remains unchanged.

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

Arguments

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

Methods

isDefaultPrevented

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

Returns

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

preventDefault

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

stopPropagation

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

Example

Set up the event handler of changing event. 

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

	// event handling code goes here.
})

Methods

focus(): void

Sets keyboard focus to the specified element, making it the active element on the page and enabling user input or interaction through the keyboard. This is commonly used to improve accessibility, guide user workflow, or trigger specific UI behaviors.


Invoke the focus method.

const passwordtextbox = document.querySelector('smart-password-text-box');
passwordtextbox.focus();

reset(): void

This method resets the input field to its initial value, discarding any changes made by the user and restoring the input's original state as specified when the component or element was first rendered.


Invoke the reset method.

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

CSS Variables

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

Default value

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

smartPasswordTextBox default width

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

Default value

"var(--smart-editor-height)"

smartPasswordTextBox default height