NumberInput — Smart UI JavaScript API

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

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

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

      el.min = 0;
      el.max = 1000;
      el.value = 42;
      el.spinButtons = true;

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

Developer Quick Reference

Component: NumberInput   Framework: JavaScript   Selector: smart-number-input

API counts: 18 properties, 4 methods, 1 events

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

Common methods: getFormattedValue(), getValue(), select(), setValue()

Common events: change

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

NumberInput specifies an input field where the user can enter a numbers.

Class

NumberInput

NumberInput

NumberInput specifies an input field where the user can enter a numbers.

Selector

smart-number-input

Quick picks

changedisabledvalue

Properties

AanimationSpecifies or retrieves the current animation mode. When set to 'none', all animations are disabled. Setting this property to other supported values enables specific animation behaviors as defined by the available modes.
DdisabledControls whether the element is active and interactive (enabled) or inactive and unresponsive (disabled). When set to disabled, the element cannot be interacted with by users, and its associated actions or events will not trigger.
IinputPurposeSpecifies the intended purpose of the input field and indicates the level of permission granted to the user agent (such as a browser or password manager) to automatically assist in completing the input when used within a form. This attribute provides guidance to browsers about the type of data expected in the field, enabling features like autofill and enhanced accessibility. It corresponds to the standard HTML autocomplete attribute and accepts values such as 'on' (to enable autocomplete), 'off' (to disable autocomplete), or more specific tokens like 'name', 'email', 'organization', 'street-address', and others, enabling browsers to supply relevant information where appropriate. For a full list of valid values and their meanings, refer to the official HTML documentation for the autocomplete attribute.
LlocaleSpecifies or retrieves the current language code (e.g., "en", "fr") used for localization. This property should be used together with the messages property, which contains the corresponding translated text for each supported language. Setting this value determines which set of messages will be displayed to the user.
LlocalizeFormatFunctionA callback function that allows you to define a custom format for messages returned by the Localization Module. Use this to modify the structure, content, or appearance of localized messages before they are delivered to the application.
MmaxSpecifies the maximum numeric value that the input field can accept or display. Any value entered that exceeds this limit will be considered invalid.
MmessagesDefines or retrieves an object containing all the text strings used within the widget that can be localized. This enables the widget's user interface to display text in different languages, depending on the selected locale property. Use this object to provide translations for various widget messages, labels, and prompts to support internationalization.
MminSpecifies the minimum numerical value that users are allowed to enter or select within the input field. This value sets the lower limit for acceptable input, ensuring that any input below this threshold will be considered invalid.
NnameSets or retrieves the value of the element’s name attribute. The name attribute uniquely identifies form elements and is used as the key when submitting form data to a server. This allows the form data associated with this element to be sent and processed correctly when the form is submitted.
NnumberFormatSpecifies or retrieves the format in which the element's value is represented. This determines how the value is displayed to the user and how it is processed or stored in the underlying data model.
PplaceholderSpecifies the placeholder text that appears inside the input field before the user enters a value. This text provides a hint or example of the expected input format or content.
RreadonlySpecifies whether the user is allowed to type or modify text within the input field. If set to false, the input becomes read-only and the user cannot enter or change its contents.
RrightToLeftSets or retrieves a value that determines whether the element’s text direction and alignment are configured for right-to-left (RTL) languages, such as Arabic or Hebrew. When enabled, the element adjusts its layout and text flow to properly support RTL locales.
SstepSpecifies or retrieves the amount by which the element’s value increases or decreases when the user interacts with controls such as up/down arrows, sliders, or keyboard inputs. This determines the step interval for adjusting the element’s value.
TthemeSpecifies the visual theme to be applied to the element. Themes control the overall appearance, including colors, fonts, and styles, ensuring a consistent look and feel across the element. Selecting a theme customizes the design and user experience of the component.
UunfocusableIf set to true, the element will be excluded from the tab order and cannot receive keyboard focus. This means users will not be able to select the element using the Tab key or other keyboard navigation methods.
UunlockKeyGets or sets the unlockKey, a unique string required to authenticate and unlock access to the product's features. Use this property to retrieve the current unlockKey or assign a new one to enable product usage.
VvalueProvides a way to retrieve (get) or assign (set) the current value of the element, typically used for form fields such as input, textarea, or select elements. When used as a getter, it returns the element's current value as a string. When used as a setter, it updates the element's value to the specified string.

Events

CchangeThis event is triggered whenever the user selects a different item or modifies the current selection. It occurs each time the selection state changes, allowing you to respond dynamically to user interactions such as choosing an option from a dropdown menu, highlighting text, or switching between selectable elements.

Methods

GgetFormattedValueReturns the value converted to the specified format, ensuring that the output matches the required data type or structure (e.g., string, number, JSON object, date format) as requested by the caller.
GgetValueReturns the numeric value corresponding to the given input. If the input is a number, it is returned as-is; if the input is a string or another type that can be converted to a number, its numeric equivalent is returned. If the input cannot be converted to a number, the function may return NaN or throw an error, depending on implementation.
SselectSelects the entire text within the input field. If the input is set to readonly, the function will focus the element instead of selecting its text."
SsetValueAssigns a specified value to the input field, updating its displayed and underlying data. This ensures that the input reflects the current state or user-provided data within the form or component.

Properties

animationSpecifies or retrieves the current animation mode. When set to 'none', all animations are disabled. Setting this property to other supported values enables specific animation behaviors as defined by the available modes."none" | "simple" | "advanced"

Specifies or retrieves the current animation mode. When set to 'none', all animations are disabled. Setting this property to other supported values enables specific animation behaviors as defined by the available modes.

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-number-input animation="none"></smart-number-input>

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

const el = document.querySelector('smart-number-input');
el.animation = "simple";

Read the current value:

const el = document.querySelector('smart-number-input');
const animation = el.animation;

disabledControls whether the element is active and interactive (enabled) or inactive and unresponsive (disabled). When set to disabled, the element cannot be interacted with by users, and its associated actions or events will not trigger.boolean

Controls whether the element is active and interactive (enabled) or inactive and unresponsive (disabled). When set to disabled, the element cannot be interacted with by users, and its associated actions or events will not trigger.

Default value

false
Try a demo showcasing the disabled property.

Examples

Markup and runtime examples for disabled:

HTML attribute:

<smart-number-input disabled></smart-number-input>

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

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

Read the current value:

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

inputPurposeSpecifies the intended purpose of the input field and indicates the level of permission granted to the user agent (such as a browser or password manager) to automatically assist in completing the input when used within a form. This attribute provides guidance to browsers about the type of data expected in the field, enabling features like autofill and enhanced accessibility. It corresponds to the standard HTML autocomplete attribute and accepts values such as 'on' (to enable autocomplete), 'off' (to disable autocomplete), or more specific tokens like 'name', 'email', 'organization', 'street-address', and others, enabling browsers to supply relevant information where appropriate. For a full list of valid values and their meanings, refer to the official HTML documentation for the autocomplete attribute.string

Specifies the intended purpose of the input field and indicates the level of permission granted to the user agent (such as a browser or password manager) to automatically assist in completing the input when used within a form. This attribute provides guidance to browsers about the type of data expected in the field, enabling features like autofill and enhanced accessibility. It corresponds to the standard HTML autocomplete attribute and accepts values such as 'on' (to enable autocomplete), 'off' (to disable autocomplete), or more specific tokens like 'name', 'email', 'organization', 'street-address', and others, enabling browsers to supply relevant information where appropriate. For a full list of valid values and their meanings, refer to the official HTML documentation for the autocomplete attribute.

Default value

"off"

Examples

Markup and runtime examples for inputPurpose:

HTML:

<smart-number-input input-purpose="on"></smart-number-input>

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

const el = document.querySelector('smart-number-input');
el.inputPurpose = "country";

Read the current value:

const el = document.querySelector('smart-number-input');
const inputPurpose = el.inputPurpose;

localeSpecifies or retrieves the current language code (e.g., "en", "fr") used for localization. This property should be used together with the messages property, which contains the corresponding translated text for each supported language. Setting this value determines which set of messages will be displayed to the user.string

Specifies or retrieves the current language code (e.g., "en", "fr") used for localization. This property should be used together with the messages property, which contains the corresponding translated text for each supported language. Setting this value determines which set of messages will be displayed to the user.

Default value

"en"

Examples

Markup and runtime examples for locale:

HTML:

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

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

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

Read the current value:

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

localizeFormatFunctionA callback function that allows you to define a custom format for messages returned by the Localization Module. Use this to modify the structure, content, or appearance 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 to modify the structure, content, or appearance of localized messages before they are delivered to the application.

Examples

Markup and runtime examples for localizeFormatFunction:

HTML:

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

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

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

Read the current value:

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

maxSpecifies the maximum numeric value that the input field can accept or display. Any value entered that exceeds this limit will be considered invalid.number

Specifies the maximum numeric value that the input field can accept or display. Any value entered that exceeds this limit will be considered invalid.

Default value

9999999999

Examples

Markup and runtime examples for max:

HTML:

<smart-number-input max="500"></smart-number-input>

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

const el = document.querySelector('smart-number-input');
el.max = 10;

Read the current value:

const el = document.querySelector('smart-number-input');
const max = el.max;

messagesDefines or retrieves an object containing all the text strings used within the widget that can be localized. This enables the widget's user interface to display text in different languages, depending on the selected locale property. Use this object to provide translations for various widget messages, labels, and prompts to support internationalization.object

Defines or retrieves an object containing all the text strings used within the widget that can be localized. This enables the widget's user interface to display text in different languages, depending on the selected locale property. Use this object to provide translations for various widget messages, labels, and prompts to support internationalization.

Default value




"en": {

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

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

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

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

"moduleUndefined": "Module is undefined.",

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

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

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

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

}

Examples

Markup and runtime examples for messages:

HTML:

<smart-number-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-number-input>

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

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

minSpecifies the minimum numerical value that users are allowed to enter or select within the input field. This value sets the lower limit for acceptable input, ensuring that any input below this threshold will be considered invalid.number

Specifies the minimum numerical value that users are allowed to enter or select within the input field. This value sets the lower limit for acceptable input, ensuring that any input below this threshold will be considered invalid.

Default value

-9999999999

Examples

Markup and runtime examples for min:

HTML:

<smart-number-input min="-50"></smart-number-input>

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

const el = document.querySelector('smart-number-input');
el.min = 0;

Read the current value:

const el = document.querySelector('smart-number-input');
const min = el.min;

nameSets or retrieves the value of the element’s name attribute. The name attribute uniquely identifies form elements and is used as the key when submitting form data to a server. This allows the form data associated with this element to be sent and processed correctly when the form is submitted.string

Sets or retrieves the value of the element’s name attribute. The name attribute uniquely identifies form elements and is used as the key when submitting form data to a server. This allows the form data associated with this element to be sent and processed correctly when the form is submitted.

Default value

""

Examples

Markup and runtime examples for name:

HTML:

<smart-number-input name="dropdown"></smart-number-input>

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

const el = document.querySelector('smart-number-input');
el.name = "dropDown2";

Read the current value:

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

numberFormatSpecifies or retrieves the format in which the element's value is represented. This determines how the value is displayed to the user and how it is processed or stored in the underlying data model. any

Specifies or retrieves the format in which the element's value is represented. This determines how the value is displayed to the user and how it is processed or stored in the underlying data model.

Examples

Markup and runtime examples for numberFormat:

HTML:

<smart-number-input number-format="{ style: 'currency', currency: 'EUR' }"></smart-number-input>

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

const el = document.querySelector('smart-number-input');
el.numberFormat = { style: 'currency', currency: 'JPY' };

Read the current value:

const el = document.querySelector('smart-number-input');
const numberFormat = el.numberFormat;

placeholderSpecifies the placeholder text that appears inside the input field before the user enters a value. This text provides a hint or example of the expected input format or content.string

Specifies the placeholder text that appears inside the input field before the user enters a value. This text provides a hint or example of the expected input format or content.

Default value

""
Try a demo showcasing the placeholder property.

Examples

Markup and runtime examples for placeholder:

HTML:

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

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

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

Read the current value:

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

readonlySpecifies whether the user is allowed to type or modify text within the input field. If set to false, the input becomes read-only and the user cannot enter or change its contents.boolean

Specifies whether the user is allowed to type or modify text within the input field. If set to false, the input becomes read-only and the user cannot enter or change its contents.

Default value

false

Examples

Markup and runtime examples for readonly:

HTML attribute:

<smart-number-input readonly></smart-number-input>

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

const el = document.querySelector('smart-number-input');
el.readonly = false;

Read the current value:

const el = document.querySelector('smart-number-input');
const readonly = el.readonly;

rightToLeftSets or retrieves a value that determines whether the element’s text direction and alignment are configured for right-to-left (RTL) languages, such as Arabic or Hebrew. When enabled, the element adjusts its layout and text flow to properly support RTL locales.boolean

Sets or retrieves a value that determines whether the element’s text direction and alignment are configured for right-to-left (RTL) languages, such as Arabic or Hebrew. When enabled, the element adjusts its layout and text flow to properly support RTL locales.

Default value

false
Try a demo showcasing the rightToLeft property.

Examples

Markup and runtime examples for rightToLeft:

HTML attribute:

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

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

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

Read the current value:

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

stepSpecifies or retrieves the amount by which the element’s value increases or decreases when the user interacts with controls such as up/down arrows, sliders, or keyboard inputs. This determines the step interval for adjusting the element’s value.number

Specifies or retrieves the amount by which the element’s value increases or decreases when the user interacts with controls such as up/down arrows, sliders, or keyboard inputs. This determines the step interval for adjusting the element’s value.

Default value

1

Examples

Markup and runtime examples for step:

HTML:

<smart-number-input step="2"></smart-number-input>

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

const el = document.querySelector('smart-number-input');
el.step = 5;

Read the current value:

const el = document.querySelector('smart-number-input');
const step = el.step;

themeSpecifies the visual theme to be applied to the element. Themes control the overall appearance, including colors, fonts, and styles, ensuring a consistent look and feel across the element. Selecting a theme customizes the design and user experience of the component.string

Specifies the visual theme to be applied to the element. Themes control the overall appearance, including colors, fonts, and styles, ensuring a consistent look and feel across the element. Selecting a theme customizes the design and user experience of the component.

Default value

""

Examples

Markup and runtime examples for theme:

HTML:

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

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

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

Read the current value:

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

unfocusableIf set to true, the element will be excluded from the tab order and cannot receive keyboard focus. This means users will not be able to select the element using the Tab key or other keyboard navigation methods.boolean

If set to true, the element will be excluded from the tab order and cannot receive keyboard focus. This means users will not be able to select the element using the Tab key or other keyboard navigation methods.

Default value

false

Examples

Markup and runtime examples for unfocusable:

HTML attribute:

<smart-number-input unfocusable></smart-number-input>

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

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

Read the current value:

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

unlockKeyGets or sets the unlockKey, a unique string required to authenticate and unlock access to the product's features. Use this property to retrieve the current unlockKey or assign a new one to enable product usage.string

Gets or sets the unlockKey, a unique string required to authenticate and unlock access to the product's features. Use this property to retrieve the current unlockKey or assign a new one to enable product usage.

Default value

""

Examples

Markup and runtime examples for unlockKey:

HTML:

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

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

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

Read the current value:

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

valueProvides a way to retrieve (get) or assign (set) the current value of the element, typically used for form fields such as input, textarea, or select elements. When used as a getter, it returns the element's current value as a string. When used as a setter, it updates the element's value to the specified string.any

Provides a way to retrieve (get) or assign (set) the current value of the element, typically used for form fields such as input, textarea, or select elements. When used as a getter, it returns the element's current value as a string. When used as a setter, it updates the element's value to the specified string.

Default value

0

Examples

Markup and runtime examples for value:

HTML:

<smart-number-input value="6"></smart-number-input>

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

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

Read the current value:

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

Events

changeThis event is triggered whenever the user selects a different item or modifies the current selection. It occurs each time the selection state changes, allowing you to respond dynamically to user interactions such as choosing an option from a dropdown menu, highlighting text, or switching between selectable elements.CustomEvent

This event is triggered whenever the user selects a different item or modifies the current selection. It occurs each time the selection state changes, allowing you to respond dynamically to user interactions such as choosing an option from a dropdown menu, highlighting text, or switching between selectable elements.

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

	// event handling code goes here.
})

Methods

getFormattedValue( value: string | number, format?: any): stringReturns the value converted to the specified format, ensuring that the output matches the required data type or structure (e.g., string, number, JSON object, date format) as requested by the caller.

Returns the value converted to the specified format, ensuring that the output matches the required data type or structure (e.g., string, number, JSON object, date format) as requested by the caller.

Arguments

valuestring | number

The value to be formatted by the method.

format?any

The object that contains the formatting properties. The argument should contain Intl.NumberFormat valid properties. For example, { style: 'currency', currency: 'EUR' }

Returnsstring

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

const result = document.querySelector('smart-number-input')?.getFormattedValue();

getValue(): numberReturns the numeric value corresponding to the given input. If the input is a number, it is returned as-is; if the input is a string or another type that can be converted to a number, its numeric equivalent is returned. If the input cannot be converted to a number, the function may return NaN or throw an error, depending on implementation.

Returns the numeric value corresponding to the given input. If the input is a number, it is returned as-is; if the input is a string or another type that can be converted to a number, its numeric equivalent is returned. If the input cannot be converted to a number, the function may return NaN or throw an error, depending on implementation.

Returnsnumber

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

const result = document.querySelector('smart-number-input')?.getValue();

select(): voidSelects the entire text within the input field. If the input is set to readonly, the function will focus the element instead of selecting its text."

Selects the entire text within the input field. If the input is set to readonly, the function will focus the element instead of selecting its text."

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

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

setValue( value: string | number): voidAssigns a specified value to the input field, updating its displayed and underlying data. This ensures that the input reflects the current state or user-provided data within the form or component.

Assigns a specified value to the input field, updating its displayed and underlying data. This ensures that the input reflects the current state or user-provided data within the form or component.

Arguments

valuestring | number

The value to be set.

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

document.querySelector('smart-number-input')?.setValue();