PasswordInput — Smart UI JavaScript API

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

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

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

      el.value = 'Quick start value';

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

Developer Quick Reference

Component: PasswordInput   Framework: JavaScript   Selector: smart-password-input

API counts: 12 properties, 1 methods, 2 events

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

Common methods: select()

Common events: change, changing

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

PasswordInput specifies a password field where the user can enter data. It is similar to the password text box, but this component does not have additional functionality for tooltips and popups.

Class

PasswordInput

PasswordInput

PasswordInput specifies a password field where the user can enter data. It is similar to the password text box, but this component does not have additional functionality for tooltips and popups.

Selector

smart-password-input

Quick picks

changedisabledvalue

Properties

DdisabledDetermines whether the element is interactive or inactive. When enabled, the element can be used and respond to user actions; when disabled, the element is not interactive and will not respond to user input.
LlocaleSpecifies or retrieves the current language setting. This property is typically used together with the messages property to provide localization support, determining which set of translated messages or labels are displayed based on the selected language code (e.g., 'en', 'fr', 'es').
LlocalizeFormatFunctionSpecifies a callback function that allows you to customize the formatting of messages returned by the Localization Module. Use this callback to modify or enhance how localized strings are generated or displayed before they are delivered to your application.
MmessagesDefines or retrieves an object containing text strings used throughout the widget interface, enabling support for localization. This property works together with the locale property to display the widget's content in different languages by providing translations for UI elements such as labels, messages, and tooltips.
MminLengthSpecifies the minimum number of characters a user must type into the input field before the autocomplete feature activates. Once this threshold is reached, the dropdown will open and display a list of items that match the entered text.
NnameSpecifies or retrieves the value of the element's name attribute. The name attribute is used to identify form fields when submitting data via an HTML form, allowing the data to be sent as key-value pairs where the name serves as the key. This attribute is essential for server-side processing and differentiating between multiple inputs within the same form.
PplaceholderSpecifies the placeholder text displayed inside the input field when it is empty, providing a hint or example of the expected input value.
RrightToLeftSets or retrieves a value that specifies whether the element's alignment is configured to support right-to-left (RTL) languages, such as Arabic or Hebrew. When enabled, this ensures that text direction and layout are adjusted appropriately for locales that use RTL scripts.
TthemeSpecifies the visual theme to be applied to the element. Themes control the overall appearance, including colors, fonts, spacing, and stylistic details, ensuring a consistent look and feel across elements.
UunfocusableWhen set to true, this property prevents the element from receiving keyboard focus, making it unreachable via the keyboard (e.g., Tab key) and inaccessible by assistive technologies that rely on focus.
UunlockKeySets or retrieves the unlockKey, a unique identifier or code required to unlock and grant access to the product’s features or content.
VvalueSets a new value for the element or retrieves the current value of the element, depending on how the method or property is used. This is commonly used for form elements such as input fields, textareas, or select elements, allowing you to programmatically update or access their contents.

Events

CchangeThis event is triggered when the value of the element has been modified by the user and the element loses focus (i.e., when the user finishes editing and clicks or tabs away from the element).
CchangingThis event is triggered each time a key is released within the PasswordInput field, but only if the input value has changed as a result of the key press.

Methods

SselectEnhances the input field interaction by selecting all text within the input when it is editable. If the input is set to readonly, the element receives focus without selecting its text. This ensures intuitive behavior based on the input's current state.

Properties

disabledDetermines whether the element is interactive or inactive. When enabled, the element can be used and respond to user actions; when disabled, the element is not interactive and will not respond to user input.boolean

Determines whether the element is interactive or inactive. When enabled, the element can be used and respond to user actions; when disabled, the element is not interactive and will not respond to user input.

Default value

false
Try a demo showcasing the disabled property.

Examples

Markup and runtime examples for disabled:

HTML attribute:

<smart-password-input disabled></smart-password-input>

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

const el = document.querySelector('smart-password-input');
el.disabled = false;

Read the current value:

const el = document.querySelector('smart-password-input');
const disabled = el.disabled;

localeSpecifies or retrieves the current language setting. This property is typically used together with the messages property to provide localization support, determining which set of translated messages or labels are displayed based on the selected language code (e.g., 'en', 'fr', 'es').string

Specifies or retrieves the current language setting. This property is typically used together with the messages property to provide localization support, determining which set of translated messages or labels are displayed based on the selected language code (e.g., 'en', 'fr', 'es').

Default value

"en"

Examples

Markup and runtime examples for locale:

HTML:

<smart-password-input locale="de"></smart-password-input>

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

const el = document.querySelector('smart-password-input');
el.locale = "en";

Read the current value:

const el = document.querySelector('smart-password-input');
const locale = el.locale;

localizeFormatFunctionSpecifies a callback function that allows you to customize the formatting of messages returned by the Localization Module. Use this callback to modify or enhance how localized strings are generated or displayed before they are delivered to your application.function

Specifies a callback function that allows you to customize the formatting of messages returned by the Localization Module. Use this callback to modify or enhance how localized strings are generated or displayed before they are delivered to your application.

Examples

Markup and runtime examples for localizeFormatFunction:

HTML:

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

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

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

Read the current value:

const el = document.querySelector('smart-password-input');
const localizeFormatFunction = el.localizeFormatFunction;

messagesDefines or retrieves an object containing text strings used throughout the widget interface, enabling support for localization. This property works together with the locale property to display the widget's content in different languages by providing translations for UI elements such as labels, messages, and tooltips.object

Defines or retrieves an object containing text strings used throughout the widget interface, enabling support for localization. This property works together with the locale property to display the widget's content in different languages by providing translations for UI elements such as labels, messages, and tooltips.

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

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

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

minLengthSpecifies the minimum number of characters a user must type into the input field before the autocomplete feature activates. 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 feature activates. 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-password-input min-length="2"></smart-password-input>

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

const el = document.querySelector('smart-password-input');
el.minLength = 0;

Read the current value:

const el = document.querySelector('smart-password-input');
const minLength = el.minLength;

nameSpecifies or retrieves the value of the element's name attribute. The name attribute is used to identify form fields when submitting data via an HTML form, allowing the data to be sent as key-value pairs where the name serves as the key. This attribute is essential for server-side processing and differentiating between multiple inputs within the same form.string

Specifies or retrieves the value of the element's name attribute. The name attribute is used to identify form fields when submitting data via an HTML form, allowing the data to be sent as key-value pairs where the name serves as the key. This attribute is essential for server-side processing and differentiating between multiple inputs within the same form.

Default value

""

Examples

Markup and runtime examples for name:

HTML:

<smart-password-input name="passwordAccount1"></smart-password-input>

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

const el = document.querySelector('smart-password-input');
el.name = "passwordAccount2";

Read the current value:

const el = document.querySelector('smart-password-input');
const name = el.name;

placeholderSpecifies the placeholder text displayed inside the input field when it is empty, providing a hint or example of the expected input value.string

Specifies the placeholder text displayed inside the input field when it is empty, providing a hint or example of the expected input value.

Default value

""

Examples

Markup and runtime examples for placeholder:

HTML:

<smart-password-input placeholder="Empty"></smart-password-input>

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

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

Read the current value:

const el = document.querySelector('smart-password-input');
const placeholder = el.placeholder;

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

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

Default value

false

Examples

Markup and runtime examples for rightToLeft:

HTML attribute:

<smart-password-input right-to-left></smart-password-input>

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

const el = document.querySelector('smart-password-input');
el.rightToLeft = true;

Read the current value:

const el = document.querySelector('smart-password-input');
const rightToLeft = el.rightToLeft;

themeSpecifies the visual theme to be applied to the element. Themes control the overall appearance, including colors, fonts, spacing, and stylistic details, ensuring a consistent look and feel across elements.string

Specifies the visual theme to be applied to the element. Themes control the overall appearance, including colors, fonts, spacing, and stylistic details, ensuring a consistent look and feel across elements.

Default value

""

Examples

Markup and runtime examples for theme:

HTML:

<smart-password-input theme="blue"></smart-password-input>

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

const el = document.querySelector('smart-password-input');
el.theme = "red";

Read the current value:

const el = document.querySelector('smart-password-input');
const theme = el.theme;

unfocusableWhen set to true, this property prevents the element from receiving keyboard focus, making it unreachable via the keyboard (e.g., Tab key) and inaccessible by assistive technologies that rely on focus.boolean

When set to true, this property prevents the element from receiving keyboard focus, making it unreachable via the keyboard (e.g., Tab key) and inaccessible by assistive technologies that rely on focus.

Default value

false

Examples

Markup and runtime examples for unfocusable:

HTML attribute:

<smart-password-input unfocusable></smart-password-input>

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

const el = document.querySelector('smart-password-input');
el.unfocusable = false;

Read the current value:

const el = document.querySelector('smart-password-input');
const unfocusable = el.unfocusable;

unlockKeySets or retrieves the unlockKey, a unique identifier or code required to unlock and grant access to the product’s features or content.string

Sets or retrieves the unlockKey, a unique identifier or code required to unlock and grant access to the product’s features or content.

Default value

""

Examples

Markup and runtime examples for unlockKey:

HTML:

<smart-password-input unlock-key=""></smart-password-input>

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

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

Read the current value:

const el = document.querySelector('smart-password-input');
const unlockKey = el.unlockKey;

valueSets a new value for the element or retrieves the current value of the element, depending on how the method or property is used. This is commonly used for form elements such as input fields, textareas, or select elements, allowing you to programmatically update or access their contents.string

Sets a new value for the element or retrieves the current value of the element, depending on how the method or property is used. This is commonly used for form elements such as input fields, textareas, or select elements, allowing you to programmatically update or access their contents.

Default value

""

Examples

Markup and runtime examples for value:

HTML:

<smart-password-input value="value1"></smart-password-input>

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

const el = document.querySelector('smart-password-input');
el.value = "value2";

Read the current value:

const el = document.querySelector('smart-password-input');
const value = el.value;

Events

changeThis event is triggered when the value of the element has been modified by the user and the element loses focus (i.e., when the user finishes editing and clicks or tabs away from the element).CustomEvent

This event is triggered when the value of the element has been modified by the user and the element loses focus (i.e., when the user finishes editing and clicks or tabs away from the element).

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

Arguments

evCustomEvent
ev.detailObject
ev.detail.oldValue - The previous value.
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 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-password-input')?.addEventListener('change', (event) => {
    const detail = event.detail,
        oldValue = detail.oldValue,
        value = detail.value;

	// event handling code goes here.
})

changingThis event is triggered each time a key is released within the PasswordInput field, but only if the input value has changed as a result of the key press.CustomEvent

This event is triggered each time a key is released within the PasswordInput field, but only if the input value has changed as a result of the key press.

  • 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-password-input')?.addEventListener('changing', (event) => {
    const detail = event.detail,
        oldValue = detail.oldValue,
        value = detail.value;

	// event handling code goes here.
})

Methods

select(): voidEnhances the input field interaction by selecting all text within the input when it is editable. If the input is set to readonly, the element receives focus without selecting its text. This ensures intuitive behavior based on the input's current state.

Enhances the input field interaction by selecting all text within the input when it is editable. If the input is set to readonly, the element receives focus without selecting its text. This ensures intuitive behavior based on the input's current state.

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

document.querySelector('smart-password-input')?.select();