NumericTextBox — Smart UI JavaScript API

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

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

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

      el.min = 0;
      el.max = 1000;
      el.value = 100;
      el.spinButtons = true;
      el.spinButtonsPosition = 'right';
      el.spinButtonsStep = 1;

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

Developer Quick Reference

Component: NumericTextBox   Framework: JavaScript   Selector: smart-numeric-text-box

API counts: 42 properties, 2 methods, 7 events

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

Common methods: focus(), val()

Common events: change, changing, close, closing, open, opening

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

input field for entering a number. Includes number formatting for Engineers and Scientists.

Class

NumericTextBox

NumericTextBox

input field for entering a number. Includes number formatting for Engineers and Scientists.

Selector

smart-numeric-text-box

Quick picks

changedisabledfocusvalue

Properties

AanimationSpecifies or retrieves the current animation mode. When set to 'none', all animations are disabled. Otherwise, the selected mode determines how animations are displayed or executed within the component.
DdecimalSeparatorSpecifies or retrieves the character used as the decimal separator when formatting or parsing numeric values. This determines how fractional numbers are represented, for example, using a period ('.') or a comma (',') between the integer and fractional parts.
DdisabledControls whether the smartNumericTextBox component is active or inactive. When enabled, users can interact with and enter values in the numeric text box. When disabled, the component becomes read-only and user interaction is prevented.
DdropDownAppendToSpecifies the parent HTML element or container to which the Radix dropdown will be rendered or appended. This determines the dropdown's positioning context within the DOM and can affect its stacking, placement, and overflow behavior.
DdropDownEnabledControls whether a dropdown menu appears when the radix display button is clicked. If enabled, the dropdown presents selectable options for switching between different numeral systems: binary, octal, decimal, and hexadecimal. This allows users to easily change the numeral system used for number display or input.
EenableMouseWheelActionControls whether users can increase or decrease the value in the smartNumericTextBox component by scrolling the mouse wheel. When enabled, scrolling the wheel while the input is focused will increment or decrement the numeric value accordingly. When disabled, mouse wheel actions will have no effect on the value.
HhintDisplays supplementary helper text below the element to provide users with additional information, guidance, or context related to the element's purpose or required input.
IinputFormatSpecifies or retrieves the input format used by the widget. Modifying this property at runtime may result in a loss of precision, as existing data could be reformatted or truncated to fit the new format. It is recommended to set the input format during initialization to preserve data accuracy.
LlabelDisplays a descriptive text label above the element to provide context or identify its purpose for users.
LleadingZerosWhen this property is enabled, the binary and hexadecimal representations of a number are automatically padded with leading zeros as needed to ensure their length matches the specified wordLength. This guarantees consistent output width, even for numbers whose standard representations would be shorter than wordLength.
LlocaleSets or retrieves the current language code (e.g., 'en', 'fr', 'es'). This property determines which language is used for displaying localized content. It works together with the messages property, which should contain translations for each supported language. When the language is changed, the corresponding messages from the messages object are used for all localized text.
LlocalizeFormatFunctionCallback function associated with the localization module. This function is typically invoked when localization events occur, such as language changes or updates to localized content, enabling the application to respond dynamically to these changes.
MmaxSets or retrieves the maximum allowable value for the widget. This defines the highest value that the widget can accept or display.
MmessagesDefines or retrieves an object containing customizable text strings used within the widget, enabling localization of UI elements such as labels, messages, and tooltips. This property works together with the locale setting to display the widget's interface in different languages according to the user's preferences.
MminDefines or retrieves the lowest allowable value that the widget can accept. This property determines the minimum limit for user input or programmatically set values.
NnameSpecifies the unique name assigned to the control element, which can be used to identify and reference the control within forms, scripts, or styles. This name is often utilized when processing form data or targeting the control with JavaScript or CSS.
NnullableDetermines whether the value property can be set to null or an empty string. When enabled, assigning null or "" to the value property is allowed; otherwise, such assignments are prevented or ignored. Use this setting to control how empty or unset values are handled.
OopenedControls whether the radix dropdown menu is open or closed. This property can be set to open or close the dropdown programmatically, or read to determine its current state. It is effective only when dropDownEnabled is set to true; otherwise, the dropdown cannot be opened regardless of this property's value.
OoutputFormatStringDefines or retrieves the display format pattern used to present the input value when the element is not in focus. The specified pattern determines how the value appears to the user (for example, adding commas, decimal places, or currency symbols) while not editing. You can apply any formatting string supported by the NumberRenderer class as the outputFormatString, allowing for customized number formats such as '0,0.00' for thousands separators and two decimal places.
PplaceholderSpecifies the placeholder text that appears within the widget's input field when no value has been entered. This text provides a hint or example to guide the user on what kind of input is expected.
PprecisionDigitsSpecifies the number of digits to display after the decimal point in numeric values. This setting is only applicable when inputFormat is set to either 'floatingPoint' or 'complex', ensuring precise control over decimal precision for these input types.
RradixSets or retrieves the radix (base) used by the smartNumericTextBox for displaying its value. The radix determines the numeral system (such as decimal, binary, octal, or hexadecimal) in which the numeric value is shown. This property is only applicable when the inputFormat is set to 'integer', allowing the widget to represent integers in different numeral systems based on the specified radix value.
RradixDisplayControls the visibility of the radix (base) selection button in the smartNumericTextBox component. This option is relevant only when the inputFormat property is set to 'integer'. When enabled, users can toggle between different numeric bases (e.g., decimal, hexadecimal). When disabled, the radix selection button is hidden.
RradixDisplayPositionGets or sets the position of the radix (decimal separator) display button in the smartNumericTextBox component. This property determines where the button for selecting a radix is shown within the numeric input field (e.g., to the left or right of the input box).
RreadonlyControls whether the smartNumericTextBox is in a read-only state. When set to true, the user cannot modify the value; when set to false, the input can be edited. This property can be used to retrieve the current read-only status or to update it programmatically.
RrightToLeftSets or retrieves a value that determines whether the element's alignment supports right-to-left (RTL) text direction, such as for languages like Arabic or Hebrew. When enabled, the element will display its content aligned appropriately for RTL locales.
SscientificNotationControls whether the output value is displayed using scientific notation (e.g., 1e+6 instead of 1000000). This option is only relevant when the inputFormat property is set to 'integer'. If enabled, large or small integer values will be formatted in scientific notation; if disabled, values will be displayed in standard numeric form.
SshowDropDownValuesControls whether the dropdown displays the current value simultaneously in all four numeral systems (binary, octal, decimal, and hexadecimal). If enabled, users will see the value represented in each numeral system option within the dropdown list.
SshowUnitControls whether units are displayed or hidden in the user interface. When enabled, units will be visible; when disabled, units will be concealed from view.
SsignificantDigitsCalculates the number of significant digits present in a given number. This operation is only valid when the inputFormat is set to either 'floatingPoint' or 'complex', ensuring that the input is a numerical value represented as a floating-point or complex number. Use this functionality to assess numerical precision and significance within these specific formats.
SspinButtonsControls whether the spin buttons (increment and decrement controls) are displayed or hidden in the input field. When enabled, users can adjust the value using these buttons; when disabled, the spin buttons are not visible.
SspinButtonsDelaySpecifies the amount of time, in milliseconds, to wait between consecutive activations of the spin buttons when a user holds down the control. This determines how quickly the value will increment or decrement while the button is continuously pressed.
SspinButtonsInitialDelaySpecifies the amount of time, in milliseconds, to wait before starting the first repeated action when a spin button is held down. This initial delay determines how long the user must press and hold the button before automatic repeating begins.
SspinButtonsPositionSpecifies or retrieves the location of the spin buttons (increment and decrement controls) on the smartNumericTextBox component. This property allows you to control whether the spin buttons appear on the left, right, or another designated position within the input field.
SspinButtonsStepSpecifies or retrieves the increment or decrement value used when adjusting the control. This value determines by how much the value increases or decreases with each step (such as when using up/down arrows or stepper buttons).
TthemeSpecifies the theme to be applied to the element. The selected theme controls the overall appearance, including colors, fonts, and styling, ensuring a consistent visual design across the interface.
UunfocusableWhen set to true, this property prevents the element from receiving keyboard focus, meaning users cannot navigate to the element using the Tab key or other focus methods.
UunitGets or sets the name of the unit (such as "kg", "cm", "$", etc.) displayed in the smartNumericTextBox widget. This property allows you to specify the unit label that appears alongside the numeric input, providing context for the entered value.
UunlockKeySets or retrieves the unlockKey used to activate and access the product’s full features. When provided, the unlockKey grants authorization to unlock the product; when requested, it returns the current unlock key in use.
VvalidationEnhances value validation using the specified minimum and maximum constraints. - When set to 'strict', the value is continuously validated: any value outside the defined min or max boundaries is automatically corrected to the nearest valid value, regardless of how the value is updated (user interaction or programmatically). - When set to 'interaction', validation only occurs through user interactions such as typing or dragging. Programmatic changes to the value are not coerced within the min or max range. Additionally, if the min or max limits are updated, and the current value falls outside the new range, it remains unchanged and no change event is triggered.
VvalueSets or retrieves the current numeric value of the smartNumericTextBox widget. When used as a setter, it updates the widget's displayed value to the specified number. When used as a getter, it returns the widget’s current numeric value. This function supports both setting and getting the value, depending on whether a parameter is provided.
WwordLengthSpecifies or retrieves the word length when the inputFormat is set to 'integer'. This property is only relevant for integer inputs. If the min and/or max values are not explicitly defined, they will be automatically calculated based on the given word length—ensuring that the valid input range matches the specified number of bits.

Events

CchangeThis event is triggered whenever the value changes, whether due to user input or programmatic updates. It allows you to respond in real time when the value is modified.
CchangingThis event is triggered whenever the input value is modified by the user through actions such as typing on the keyboard or pasting text into the field. It detects changes in real-time as they occur, allowing you to respond immediately to user input.
CcloseThis event is triggered immediately after the dropdown menu has been closed by the user, either through selecting an option, clicking outside the dropdown, or using a keyboard action. Use this event to execute any actions or cleanup that should occur once the dropdown is no longer visible.
CclosingThis event is fired just before the dropdown menu is closed, giving you an opportunity to execute custom logic or prevent the closure. If you wish to stop the dropdown from closing, you can call event.preventDefault() within your event handler. This allows for conditional closing behavior based on your application's requirements.
OopenThis event is triggered whenever the dropdown menu becomes visible to the user, such as when the user clicks on the dropdown control or focuses on it using the keyboard.
OopeningThis event is fired just before the dropdown menu begins to open. If you need to prevent the dropdown from opening—for example, based on certain conditions—you can call event.preventDefault() within your event handler function. Doing so cancels the opening operation, allowing you to control when or whether the dropdown appears.
RradixChangeThis event is triggered whenever the radix value is modified by the user. It notifies listeners that the numerical base (such as decimal, binary, or hexadecimal) used for number input or display has been changed, allowing your application to update related components or recalculate values as necessary.

Methods

FfocusSets the input focus to the NumericTextBox component, allowing users to immediately start entering numeric values. This method brings the NumericTextBox into active view, enabling keyboard interactions and improving accessibility.
VvalRetrieves or updates the current numeric value displayed in the NumericTextBox component. Use this method to programmatically obtain the user-entered value or to set a new value within the control.

Properties

animationSpecifies or retrieves the current animation mode. When set to 'none', all animations are disabled. Otherwise, the selected mode determines how animations are displayed or executed within the component."none" | "simple" | "advanced"

Specifies or retrieves the current animation mode. When set to 'none', all animations are disabled. Otherwise, the selected mode determines how animations are displayed or executed within the component.

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-numeric-text-box animation="none"></smart-numeric-text-box>

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

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

Read the current value:

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

decimalSeparatorSpecifies or retrieves the character used as the decimal separator when formatting or parsing numeric values. This determines how fractional numbers are represented, for example, using a period ('.') or a comma (',') between the integer and fractional parts.string

Specifies or retrieves the character used as the decimal separator when formatting or parsing numeric values. This determines how fractional numbers are represented, for example, using a period ('.') or a comma (',') between the integer and fractional parts.

Default value

"."

Examples

Markup and runtime examples for decimalSeparator:

HTML:

<smart-numeric-text-box decimal-separator=","></smart-numeric-text-box>

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

const el = document.querySelector('smart-numeric-text-box');
el.decimalSeparator = ".";

Read the current value:

const el = document.querySelector('smart-numeric-text-box');
const decimalSeparator = el.decimalSeparator;

disabledControls whether the smartNumericTextBox component is active or inactive. When enabled, users can interact with and enter values in the numeric text box. When disabled, the component becomes read-only and user interaction is prevented.boolean

Controls whether the smartNumericTextBox component is active or inactive. When enabled, users can interact with and enter values in the numeric text box. When disabled, the component becomes read-only and user interaction is prevented.

Default value

false

Examples

Markup and runtime examples for disabled:

HTML attribute:

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

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

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

Read the current value:

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

dropDownAppendToSpecifies the parent HTML element or container to which the Radix dropdown will be rendered or appended. This determines the dropdown's positioning context within the DOM and can affect its stacking, placement, and overflow behavior.any

Specifies the parent HTML element or container to which the Radix dropdown will be rendered or appended. This determines the dropdown's positioning context within the DOM and can affect its stacking, placement, and overflow behavior.

Examples

Markup and runtime examples for dropDownAppendTo:

HTML:

<smart-numeric-text-box drop-down-append-to="body"></smart-numeric-text-box>

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

const el = document.querySelector('smart-numeric-text-box');
el.dropDownAppendTo = null;

Read the current value:

const el = document.querySelector('smart-numeric-text-box');
const dropDownAppendTo = el.dropDownAppendTo;

dropDownEnabledControls whether a dropdown menu appears when the radix display button is clicked. If enabled, the dropdown presents selectable options for switching between different numeral systems: binary, octal, decimal, and hexadecimal. This allows users to easily change the numeral system used for number display or input.boolean

Controls whether a dropdown menu appears when the radix display button is clicked. If enabled, the dropdown presents selectable options for switching between different numeral systems: binary, octal, decimal, and hexadecimal. This allows users to easily change the numeral system used for number display or input.

Default value

false

Examples

Markup and runtime examples for dropDownEnabled:

HTML attribute:

<smart-numeric-text-box drop-down-enabled></smart-numeric-text-box>

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

const el = document.querySelector('smart-numeric-text-box');
el.dropDownEnabled = false;

Read the current value:

const el = document.querySelector('smart-numeric-text-box');
const dropDownEnabled = el.dropDownEnabled;

enableMouseWheelActionControls whether users can increase or decrease the value in the smartNumericTextBox component by scrolling the mouse wheel. When enabled, scrolling the wheel while the input is focused will increment or decrement the numeric value accordingly. When disabled, mouse wheel actions will have no effect on the value.boolean

Controls whether users can increase or decrease the value in the smartNumericTextBox component by scrolling the mouse wheel. When enabled, scrolling the wheel while the input is focused will increment or decrement the numeric value accordingly. When disabled, mouse wheel actions will have no effect on the value.

Default value

false

Examples

Markup and runtime examples for enableMouseWheelAction:

HTML attribute:

<smart-numeric-text-box enable-mouse-wheel-action></smart-numeric-text-box>

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

const el = document.querySelector('smart-numeric-text-box');
el.enableMouseWheelAction = true;

Read the current value:

const el = document.querySelector('smart-numeric-text-box');
const enableMouseWheelAction = el.enableMouseWheelAction;

hintDisplays supplementary helper text below the element to provide users with additional information, guidance, or context related to the element's purpose or required input.string

Displays supplementary helper text below the element to provide users with additional information, guidance, or context related to the element's purpose or required input.

Default value

""

Examples

Markup and runtime examples for hint:

HTML:

<smart-numeric-text-box hint="Helper text"></smart-numeric-text-box>

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

const el = document.querySelector('smart-numeric-text-box');
el.hint = "Hint";

Read the current value:

const el = document.querySelector('smart-numeric-text-box');
const hint = el.hint;

inputFormatSpecifies or retrieves the input format used by the widget. Modifying this property at runtime may result in a loss of precision, as existing data could be reformatted or truncated to fit the new format. It is recommended to set the input format during initialization to preserve data accuracy."integer" | "floatingPoint" | "complex"

Specifies or retrieves the input format used by the widget. Modifying this property at runtime may result in a loss of precision, as existing data could be reformatted or truncated to fit the new format. It is recommended to set the input format during initialization to preserve data accuracy.

Default value

"integer"

Examples

Markup and runtime examples for inputFormat:

HTML:

<smart-numeric-text-box input-format="floatingPoint"></smart-numeric-text-box>

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

const el = document.querySelector('smart-numeric-text-box');
el.inputFormat = "complex";

Read the current value:

const el = document.querySelector('smart-numeric-text-box');
const inputFormat = el.inputFormat;

labelDisplays a descriptive text label above the element to provide context or identify its purpose for users.string

Displays a descriptive text label above the element to provide context or identify its purpose for users.

Default value

""

Examples

Markup and runtime examples for label:

HTML:

<smart-numeric-text-box label="Helper text"></smart-numeric-text-box>

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

const el = document.querySelector('smart-numeric-text-box');
el.label = "Hint";

Read the current value:

const el = document.querySelector('smart-numeric-text-box');
const label = el.label;

leadingZerosWhen this property is enabled, the binary and hexadecimal representations of a number are automatically padded with leading zeros as needed to ensure their length matches the specified wordLength. This guarantees consistent output width, even for numbers whose standard representations would be shorter than wordLength.boolean

When this property is enabled, the binary and hexadecimal representations of a number are automatically padded with leading zeros as needed to ensure their length matches the specified wordLength. This guarantees consistent output width, even for numbers whose standard representations would be shorter than wordLength.

Default value

false

Examples

Markup and runtime examples for leadingZeros:

HTML attribute:

<smart-numeric-text-box leading-zeros></smart-numeric-text-box>

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

const el = document.querySelector('smart-numeric-text-box');
el.leadingZeros = false;

Read the current value:

const el = document.querySelector('smart-numeric-text-box');
const leadingZeros = el.leadingZeros;

localeSets or retrieves the current language code (e.g., 'en', 'fr', 'es'). This property determines which language is used for displaying localized content. It works together with the messages property, which should contain translations for each supported language. When the language is changed, the corresponding messages from the messages object are used for all localized text.string

Sets or retrieves the current language code (e.g., 'en', 'fr', 'es'). This property determines which language is used for displaying localized content. It works together with the messages property, which should contain translations for each supported language. When the language is changed, the corresponding messages from the messages object are used for all localized text.

Default value

"en"

Examples

Markup and runtime examples for locale:

HTML:

<smart-numeric-text-box locale="de"></smart-numeric-text-box>

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

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

Read the current value:

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

localizeFormatFunctionCallback function associated with the localization module. This function is typically invoked when localization events occur, such as language changes or updates to localized content, enabling the application to respond dynamically to these changes.function | null

Callback function associated with the localization module. This function is typically invoked when localization events occur, such as language changes or updates to localized content, enabling the application to respond dynamically to these changes.

Examples

Markup and runtime examples for localizeFormatFunction:

HTML:

<smart-numeric-text-box localize-format-function="function(){return '...'}"></smart-numeric-text-box>

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

const el = document.querySelector('smart-numeric-text-box');
el.localizeFormatFunction = "function(){return '...'}";

Read the current value:

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

maxSets or retrieves the maximum allowable value for the widget. This defines the highest value that the widget can accept or display.number | string

Sets or retrieves the maximum allowable value for the widget. This defines the highest value that the widget can accept or display.

Examples

Markup and runtime examples for max:

HTML:

<smart-numeric-text-box max="10"></smart-numeric-text-box>

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

const el = document.querySelector('smart-numeric-text-box');
el.max = 20;

Read the current value:

const el = document.querySelector('smart-numeric-text-box');
const max = el.max;

messagesDefines or retrieves an object containing customizable text strings used within the widget, enabling localization of UI elements such as labels, messages, and tooltips. This property works together with the locale setting to display the widget's interface in different languages according to the user's preferences.object

Defines or retrieves an object containing customizable text strings used within the widget, enabling localization of UI elements such as labels, messages, and tooltips. This property works together with the locale setting to display the widget's interface in different languages according to the user's preferences.

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

"binary": "BIN",

"octal": "OCT",

"decimal": "DEC",

"hexadecimal": "HEX",

"integerOnly": "smartNumericTextBox: The property {{property}} can only be set when inputFormat is integer.",

"noInteger": "smartNumericTextBox: the property {{property}} cannot be set when inputFormat is integer.",

"significantPrecisionDigits": "smartNumericTextBox: the properties significantDigits and precisionDigits cannot be set at the same time."

}

Try a demo showcasing the messages property.

Examples

Markup and runtime examples for messages:

HTML:

<smart-numeric-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}}: Fehlende Bezugnahme auf {{file}}.","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.","binary":"Dual","octal":"Oktal","decimal":"Dezimal","hexadecimal":"Hexadezimal","integerOnly":"smartNumericTextBox: Die Eigenschaft {{property}} kann nur eingestellt werden, wenn inputFormat integer ist.","noInteger":"smartNumericTextBox: Die Eigenschaft {{property}} kann nicht eingestellt werden, wenn inputFormat integer ist.","significantPrecisionDigits":"smartNumericTextBox: Die Eigenschaften significantDigits und precisionDigits konnen nicht zusammen eingestellt werden."}}"></smart-numeric-text-box>

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

const el = document.querySelector('smart-numeric-text-box');
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.","binary":"BIN","octal":"OCT","decimal":"DEC","hexadecimal":"HEX","integerOnly":"smartNumericTextBox: The property {{property}} can only be set when inputFormat is integer.","noInteger":"smartNumericTextBox: the property {{property}} cannot be set when inputFormat is integer.","significantPrecisionDigits":"smartNumericTextBox: the properties significantDigits and precisionDigits cannot be set at the same time."}};

Read the current value:

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

minDefines or retrieves the lowest allowable value that the widget can accept. This property determines the minimum limit for user input or programmatically set values.number | string

Defines or retrieves the lowest allowable value that the widget can accept. This property determines the minimum limit for user input or programmatically set values.

Examples

Markup and runtime examples for min:

HTML:

<smart-numeric-text-box min="5"></smart-numeric-text-box>

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

const el = document.querySelector('smart-numeric-text-box');
el.min = 0;

Read the current value:

const el = document.querySelector('smart-numeric-text-box');
const min = el.min;

nameSpecifies the unique name assigned to the control element, which can be used to identify and reference the control within forms, scripts, or styles. This name is often utilized when processing form data or targeting the control with JavaScript or CSS.string

Specifies the unique name assigned to the control element, which can be used to identify and reference the control within forms, scripts, or styles. This name is often utilized when processing form data or targeting the control with JavaScript or CSS.

Default value

""

Examples

Markup and runtime examples for name:

HTML:

<smart-numeric-text-box name="textbox"></smart-numeric-text-box>

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

const el = document.querySelector('smart-numeric-text-box');
el.name = "numerictextbox";

Read the current value:

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

nullableDetermines whether the value property can be set to null or an empty string. When enabled, assigning null or "" to the value property is allowed; otherwise, such assignments are prevented or ignored. Use this setting to control how empty or unset values are handled.boolean

Determines whether the value property can be set to null or an empty string. When enabled, assigning null or "" to the value property is allowed; otherwise, such assignments are prevented or ignored. Use this setting to control how empty or unset values are handled.

Default value

false

Examples

Markup and runtime examples for nullable:

HTML attribute:

<smart-numeric-text-box nullable></smart-numeric-text-box>

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

const el = document.querySelector('smart-numeric-text-box');
el.nullable = false;

Read the current value:

const el = document.querySelector('smart-numeric-text-box');
const nullable = el.nullable;

openedControls whether the radix dropdown menu is open or closed. This property can be set to open or close the dropdown programmatically, or read to determine its current state. It is effective only when dropDownEnabled is set to true; otherwise, the dropdown cannot be opened regardless of this property's value.boolean

Controls whether the radix dropdown menu is open or closed. This property can be set to open or close the dropdown programmatically, or read to determine its current state. It is effective only when dropDownEnabled is set to true; otherwise, the dropdown cannot be opened regardless of this property's value.

Default value

false

Examples

Markup and runtime examples for opened:

HTML attribute:

<smart-numeric-text-box opened></smart-numeric-text-box>

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

const el = document.querySelector('smart-numeric-text-box');
el.opened = true;

Read the current value:

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

outputFormatStringDefines or retrieves the display format pattern used to present the input value when the element is not in focus. The specified pattern determines how the value appears to the user (for example, adding commas, decimal places, or currency symbols) while not editing. You can apply any formatting string supported by the NumberRenderer class as the outputFormatString, allowing for customized number formats such as '0,0.00' for thousands separators and two decimal places.string

Defines or retrieves the display format pattern used to present the input value when the element is not in focus. The specified pattern determines how the value appears to the user (for example, adding commas, decimal places, or currency symbols) while not editing. You can apply any formatting string supported by the NumberRenderer class as the outputFormatString, allowing for customized number formats such as '0,0.00' for thousands separators and two decimal places.

Default value

"null"

Examples

Markup and runtime examples for outputFormatString:

HTML:

<smart-numeric-text-box output-format-string="U"></smart-numeric-text-box>

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

const el = document.querySelector('smart-numeric-text-box');
el.outputFormatString = "#.00";

Read the current value:

const el = document.querySelector('smart-numeric-text-box');
const outputFormatString = el.outputFormatString;

placeholderSpecifies the placeholder text that appears within the widget's input field when no value has been entered. This text provides a hint or example to guide the user on what kind of input is expected.string

Specifies the placeholder text that appears within the widget's input field when no value has been entered. This text provides a hint or example to guide the user on what kind of input is expected.

Default value

""""
Try a demo showcasing the placeholder property.

Examples

Markup and runtime examples for placeholder:

HTML:

<smart-numeric-text-box placeholder="Placeholder"></smart-numeric-text-box>

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

const el = document.querySelector('smart-numeric-text-box');
el.placeholder = "New Placeholder";

Read the current value:

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

precisionDigitsSpecifies the number of digits to display after the decimal point in numeric values. This setting is only applicable when inputFormat is set to either 'floatingPoint' or 'complex', ensuring precise control over decimal precision for these input types.number

Specifies the number of digits to display after the decimal point in numeric values. This setting is only applicable when inputFormat is set to either 'floatingPoint' or 'complex', ensuring precise control over decimal precision for these input types.

Try a demo showcasing the precisionDigits property.

Examples

Markup and runtime examples for precisionDigits:

HTML:

<smart-numeric-text-box precision-digits="5"></smart-numeric-text-box>

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

const el = document.querySelector('smart-numeric-text-box');
el.precisionDigits = 6;

Read the current value:

const el = document.querySelector('smart-numeric-text-box');
const precisionDigits = el.precisionDigits;

radixSets or retrieves the radix (base) used by the smartNumericTextBox for displaying its value. The radix determines the numeral system (such as decimal, binary, octal, or hexadecimal) in which the numeric value is shown. This property is only applicable when the inputFormat is set to 'integer', allowing the widget to represent integers in different numeral systems based on the specified radix value."2" | "8" | "10" | "16" | "binary" | "octal" | "decimal" | "hexadecimal"

Sets or retrieves the radix (base) used by the smartNumericTextBox for displaying its value. The radix determines the numeral system (such as decimal, binary, octal, or hexadecimal) in which the numeric value is shown. This property is only applicable when the inputFormat is set to 'integer', allowing the widget to represent integers in different numeral systems based on the specified radix value.

Default value

10

Examples

Markup and runtime examples for radix:

HTML:

<smart-numeric-text-box radix="8"></smart-numeric-text-box>

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

const el = document.querySelector('smart-numeric-text-box');
el.radix = "binary";

Read the current value:

const el = document.querySelector('smart-numeric-text-box');
const radix = el.radix;

radixDisplayControls the visibility of the radix (base) selection button in the smartNumericTextBox component. This option is relevant only when the inputFormat property is set to 'integer'. When enabled, users can toggle between different numeric bases (e.g., decimal, hexadecimal). When disabled, the radix selection button is hidden.boolean

Controls the visibility of the radix (base) selection button in the smartNumericTextBox component. This option is relevant only when the inputFormat property is set to 'integer'. When enabled, users can toggle between different numeric bases (e.g., decimal, hexadecimal). When disabled, the radix selection button is hidden.

Default value

false

Examples

Markup and runtime examples for radixDisplay:

HTML attribute:

<smart-numeric-text-box radix-display></smart-numeric-text-box>

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

const el = document.querySelector('smart-numeric-text-box');
el.radixDisplay = false;

Read the current value:

const el = document.querySelector('smart-numeric-text-box');
const radixDisplay = el.radixDisplay;

radixDisplayPositionGets or sets the position of the radix (decimal separator) display button in the smartNumericTextBox component. This property determines where the button for selecting a radix is shown within the numeric input field (e.g., to the left or right of the input box)."left" | "right"

Gets or sets the position of the radix (decimal separator) display button in the smartNumericTextBox component. This property determines where the button for selecting a radix is shown within the numeric input field (e.g., to the left or right of the input box).

Default value

"left"

Examples

Markup and runtime examples for radixDisplayPosition:

HTML:

<smart-numeric-text-box radix-display-position="right"></smart-numeric-text-box>

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

const el = document.querySelector('smart-numeric-text-box');
el.radixDisplayPosition = "left";

Read the current value:

const el = document.querySelector('smart-numeric-text-box');
const radixDisplayPosition = el.radixDisplayPosition;

readonlyControls whether the smartNumericTextBox is in a read-only state. When set to true, the user cannot modify the value; when set to false, the input can be edited. This property can be used to retrieve the current read-only status or to update it programmatically.boolean

Controls whether the smartNumericTextBox is in a read-only state. When set to true, the user cannot modify the value; when set to false, the input can be edited. This property can be used to retrieve the current read-only status or to update it programmatically.

Default value

false

Examples

Markup and runtime examples for readonly:

HTML attribute:

<smart-numeric-text-box readonly></smart-numeric-text-box>

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

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

Read the current value:

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

rightToLeftSets or retrieves a value that determines whether the element's alignment supports right-to-left (RTL) text direction, such as for languages like Arabic or Hebrew. When enabled, the element will display its content aligned appropriately for RTL locales.boolean

Sets or retrieves a value that determines whether the element's alignment supports right-to-left (RTL) text direction, such as for languages like Arabic or Hebrew. When enabled, the element will display its content aligned appropriately for RTL locales.

Default value

false
Try a demo showcasing the rightToLeft property.

Examples

Markup and runtime examples for rightToLeft:

HTML attribute:

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

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

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

Read the current value:

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

scientificNotationControls whether the output value is displayed using scientific notation (e.g., 1e+6 instead of 1000000). This option is only relevant when the inputFormat property is set to 'integer'. If enabled, large or small integer values will be formatted in scientific notation; if disabled, values will be displayed in standard numeric form.boolean

Controls whether the output value is displayed using scientific notation (e.g., 1e+6 instead of 1000000). This option is only relevant when the inputFormat property is set to 'integer'. If enabled, large or small integer values will be formatted in scientific notation; if disabled, values will be displayed in standard numeric form.

Default value

false
Try a demo showcasing the scientificNotation property.

Examples

Markup and runtime examples for scientificNotation:

HTML attribute:

<smart-numeric-text-box scientific-notation></smart-numeric-text-box>

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

const el = document.querySelector('smart-numeric-text-box');
el.scientificNotation = false;

Read the current value:

const el = document.querySelector('smart-numeric-text-box');
const scientificNotation = el.scientificNotation;

showDropDownValuesControls whether the dropdown displays the current value simultaneously in all four numeral systems (binary, octal, decimal, and hexadecimal). If enabled, users will see the value represented in each numeral system option within the dropdown list.boolean

Controls whether the dropdown displays the current value simultaneously in all four numeral systems (binary, octal, decimal, and hexadecimal). If enabled, users will see the value represented in each numeral system option within the dropdown list.

Default value

false

Examples

Markup and runtime examples for showDropDownValues:

HTML attribute:

<smart-numeric-text-box show-drop-down-values></smart-numeric-text-box>

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

const el = document.querySelector('smart-numeric-text-box');
el.showDropDownValues = false;

Read the current value:

const el = document.querySelector('smart-numeric-text-box');
const showDropDownValues = el.showDropDownValues;

showUnitControls whether units are displayed or hidden in the user interface. When enabled, units will be visible; when disabled, units will be concealed from view.boolean

Controls whether units are displayed or hidden in the user interface. When enabled, units will be visible; when disabled, units will be concealed from view.

Default value

false

Examples

Markup and runtime examples for showUnit:

HTML attribute:

<smart-numeric-text-box show-unit></smart-numeric-text-box>

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

const el = document.querySelector('smart-numeric-text-box');
el.showUnit = false;

Read the current value:

const el = document.querySelector('smart-numeric-text-box');
const showUnit = el.showUnit;

significantDigitsCalculates the number of significant digits present in a given number. This operation is only valid when the inputFormat is set to either 'floatingPoint' or 'complex', ensuring that the input is a numerical value represented as a floating-point or complex number. Use this functionality to assess numerical precision and significance within these specific formats.number

Calculates the number of significant digits present in a given number. This operation is only valid when the inputFormat is set to either 'floatingPoint' or 'complex', ensuring that the input is a numerical value represented as a floating-point or complex number. Use this functionality to assess numerical precision and significance within these specific formats.

Default value

8
Try a demo showcasing the significantDigits property.

Examples

Markup and runtime examples for significantDigits:

HTML:

<smart-numeric-text-box significant-digits="5"></smart-numeric-text-box>

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

const el = document.querySelector('smart-numeric-text-box');
el.significantDigits = 6;

Read the current value:

const el = document.querySelector('smart-numeric-text-box');
const significantDigits = el.significantDigits;

spinButtonsControls whether the spin buttons (increment and decrement controls) are displayed or hidden in the input field. When enabled, users can adjust the value using these buttons; when disabled, the spin buttons are not visible.boolean

Controls whether the spin buttons (increment and decrement controls) are displayed or hidden in the input field. When enabled, users can adjust the value using these buttons; when disabled, the spin buttons are not visible.

Default value

false

Examples

Markup and runtime examples for spinButtons:

HTML attribute:

<smart-numeric-text-box spin-buttons></smart-numeric-text-box>

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

const el = document.querySelector('smart-numeric-text-box');
el.spinButtons = true;

Read the current value:

const el = document.querySelector('smart-numeric-text-box');
const spinButtons = el.spinButtons;

spinButtonsDelaySpecifies the amount of time, in milliseconds, to wait between consecutive activations of the spin buttons when a user holds down the control. This determines how quickly the value will increment or decrement while the button is continuously pressed.number

Specifies the amount of time, in milliseconds, to wait between consecutive activations of the spin buttons when a user holds down the control. This determines how quickly the value will increment or decrement while the button is continuously pressed.

Default value

75

Examples

Markup and runtime examples for spinButtonsDelay:

HTML:

<smart-numeric-text-box spin-buttons-delay="50"></smart-numeric-text-box>

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

const el = document.querySelector('smart-numeric-text-box');
el.spinButtonsDelay = 100;

Read the current value:

const el = document.querySelector('smart-numeric-text-box');
const spinButtonsDelay = el.spinButtonsDelay;

spinButtonsInitialDelaySpecifies the amount of time, in milliseconds, to wait before starting the first repeated action when a spin button is held down. This initial delay determines how long the user must press and hold the button before automatic repeating begins.number

Specifies the amount of time, in milliseconds, to wait before starting the first repeated action when a spin button is held down. This initial delay determines how long the user must press and hold the button before automatic repeating begins.

Default value

0

Examples

Markup and runtime examples for spinButtonsInitialDelay:

HTML:

<smart-numeric-text-box spin-buttons-initial-delay="25"></smart-numeric-text-box>

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

const el = document.querySelector('smart-numeric-text-box');
el.spinButtonsInitialDelay = 50;

Read the current value:

const el = document.querySelector('smart-numeric-text-box');
const spinButtonsInitialDelay = el.spinButtonsInitialDelay;

spinButtonsPositionSpecifies or retrieves the location of the spin buttons (increment and decrement controls) on the smartNumericTextBox component. This property allows you to control whether the spin buttons appear on the left, right, or another designated position within the input field."left" | "right"

Specifies or retrieves the location of the spin buttons (increment and decrement controls) on the smartNumericTextBox component. This property allows you to control whether the spin buttons appear on the left, right, or another designated position within the input field.

Default value

"right"

Examples

Markup and runtime examples for spinButtonsPosition:

HTML:

<smart-numeric-text-box spin-buttons-position="left"></smart-numeric-text-box>

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

const el = document.querySelector('smart-numeric-text-box');
el.spinButtonsPosition = "right";

Read the current value:

const el = document.querySelector('smart-numeric-text-box');
const spinButtonsPosition = el.spinButtonsPosition;

spinButtonsStepSpecifies or retrieves the increment or decrement value used when adjusting the control. This value determines by how much the value increases or decreases with each step (such as when using up/down arrows or stepper buttons).number | string

Specifies or retrieves the increment or decrement value used when adjusting the control. This value determines by how much the value increases or decreases with each step (such as when using up/down arrows or stepper buttons).

Default value

1

Examples

Markup and runtime examples for spinButtonsStep:

HTML:

<smart-numeric-text-box spin-buttons-step="2"></smart-numeric-text-box>

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

const el = document.querySelector('smart-numeric-text-box');
el.spinButtonsStep = 3;

Read the current value:

const el = document.querySelector('smart-numeric-text-box');
const spinButtonsStep = el.spinButtonsStep;

themeSpecifies the theme to be applied to the element. The selected theme controls the overall appearance, including colors, fonts, and styling, ensuring a consistent visual design across the interface.string

Specifies the theme to be applied to the element. The selected theme controls the overall appearance, including colors, fonts, and styling, ensuring a consistent visual design across the interface.

Default value

""

Examples

Markup and runtime examples for theme:

HTML:

<smart-numeric-text-box theme="blue"></smart-numeric-text-box>

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

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

Read the current value:

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

unfocusableWhen set to true, this property prevents the element from receiving keyboard focus, meaning users cannot navigate to the element using the Tab key or other focus methods.boolean

When set to true, this property prevents the element from receiving keyboard focus, meaning users cannot navigate to the element using the Tab key or other focus methods.

Default value

false

Examples

Markup and runtime examples for unfocusable:

HTML attribute:

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

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

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

Read the current value:

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

unitGets or sets the name of the unit (such as "kg", "cm", "$", etc.) displayed in the smartNumericTextBox widget. This property allows you to specify the unit label that appears alongside the numeric input, providing context for the entered value.string

Gets or sets the name of the unit (such as "kg", "cm", "$", etc.) displayed in the smartNumericTextBox widget. This property allows you to specify the unit label that appears alongside the numeric input, providing context for the entered value.

Default value

"kg"

Examples

Markup and runtime examples for unit:

HTML:

<smart-numeric-text-box unit="cm"></smart-numeric-text-box>

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

const el = document.querySelector('smart-numeric-text-box');
el.unit = "mm";

Read the current value:

const el = document.querySelector('smart-numeric-text-box');
const unit = el.unit;

unlockKeySets or retrieves the unlockKey used to activate and access the product’s full features. When provided, the unlockKey grants authorization to unlock the product; when requested, it returns the current unlock key in use.string

Sets or retrieves the unlockKey used to activate and access the product’s full features. When provided, the unlockKey grants authorization to unlock the product; when requested, it returns the current unlock key in use.

Default value

""

Examples

Markup and runtime examples for unlockKey:

HTML:

<smart-numeric-text-box unlock-key=""></smart-numeric-text-box>

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

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

Read the current value:

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

validationEnhances value validation using the specified minimum and maximum constraints. - When set to 'strict', the value is continuously validated: any value outside the defined min or max boundaries is automatically corrected to the nearest valid value, regardless of how the value is updated (user interaction or programmatically). - When set to 'interaction', validation only occurs through user interactions such as typing or dragging. Programmatic changes to the value are not coerced within the min or max range. Additionally, if the min or max limits are updated, and the current value falls outside the new range, it remains unchanged and no change event is triggered."strict" | "interaction"

Enhances value validation using the specified minimum and maximum constraints.
- When set to 'strict', the value is continuously validated: any value outside the defined min or max boundaries is automatically corrected to the nearest valid value, regardless of how the value is updated (user interaction or programmatically).
- When set to 'interaction', validation only occurs through user interactions such as typing or dragging. Programmatic changes to the value are not coerced within the min or max range. Additionally, if the min or max limits are updated, and the current value falls outside the new range, it remains unchanged and no change event is triggered.

Default value

"strict"

Examples

Markup and runtime examples for validation:

HTML:

<smart-numeric-text-box validation="strict"></smart-numeric-text-box>

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

const el = document.querySelector('smart-numeric-text-box');
el.validation = "interaction";

Read the current value:

const el = document.querySelector('smart-numeric-text-box');
const validation = el.validation;

valueSets or retrieves the current numeric value of the smartNumericTextBox widget. When used as a setter, it updates the widget's displayed value to the specified number. When used as a getter, it returns the widget’s current numeric value. This function supports both setting and getting the value, depending on whether a parameter is provided.any

Sets or retrieves the current numeric value of the smartNumericTextBox widget. When used as a setter, it updates the widget's displayed value to the specified number. When used as a getter, it returns the widget’s current numeric value. This function supports both setting and getting the value, depending on whether a parameter is provided.

Default value

0
Try a demo showcasing the value property.

Examples

Markup and runtime examples for value:

HTML:

<smart-numeric-text-box value="5"></smart-numeric-text-box>

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

const el = document.querySelector('smart-numeric-text-box');
el.value = 10;

Read the current value:

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

wordLengthSpecifies or retrieves the word length when the inputFormat is set to 'integer'. This property is only relevant for integer inputs. If the min and/or max values are not explicitly defined, they will be automatically calculated based on the given word length—ensuring that the valid input range matches the specified number of bits."int8" | "uint8" | "int16" | "uint16" | "int32" | "uint32" | "int64" | "uint64"

Specifies or retrieves the word length when the inputFormat is set to 'integer'. This property is only relevant for integer inputs. If the min and/or max values are not explicitly defined, they will be automatically calculated based on the given word length—ensuring that the valid input range matches the specified number of bits.

Default value

"int32"

Examples

Markup and runtime examples for wordLength:

HTML:

<smart-numeric-text-box word-length="int8"></smart-numeric-text-box>

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

const el = document.querySelector('smart-numeric-text-box');
el.wordLength = "int64";

Read the current value:

const el = document.querySelector('smart-numeric-text-box');
const wordLength = el.wordLength;

Events

changeThis event is triggered whenever the value changes, whether due to user input or programmatic updates. It allows you to respond in real time when the value is modified.CustomEvent

This event is triggered whenever the value changes, whether due to user input or programmatic updates. It allows you to respond in real time when the value is modified.

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

Arguments

evCustomEvent

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.

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-numeric-text-box')?.addEventListener('change', (event) => {
	// event handling code goes here.
})

changingThis event is triggered whenever the input value is modified by the user through actions such as typing on the keyboard or pasting text into the field. It detects changes in real-time as they occur, allowing you to respond immediately to user input.CustomEvent

This event is triggered whenever the input value is modified by the user through actions such as typing on the keyboard or pasting text into the field. It detects changes in real-time as they occur, allowing you to respond immediately to user input.

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

Arguments

evCustomEvent

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-numeric-text-box')?.addEventListener('changing', (event) => {
	// event handling code goes here.
})

closeThis event is triggered immediately after the dropdown menu has been closed by the user, either through selecting an option, clicking outside the dropdown, or using a keyboard action. Use this event to execute any actions or cleanup that should occur once the dropdown is no longer visible.CustomEvent

This event is triggered immediately after the dropdown menu has been closed by the user, either through selecting an option, clicking outside the dropdown, or using a keyboard action. Use this event to execute any actions or cleanup that should occur once the dropdown is no longer visible.

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

Arguments

evCustomEvent

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 close 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-numeric-text-box')?.addEventListener('close', (event) => {
	// event handling code goes here.
})

closingThis event is fired just before the dropdown menu is closed, giving you an opportunity to execute custom logic or prevent the closure. If you wish to stop the dropdown from closing, you can call event.preventDefault() within your event handler. This allows for conditional closing behavior based on your application's requirements.CustomEvent

This event is fired just before the dropdown menu is closed, giving you an opportunity to execute custom logic or prevent the closure. If you wish to stop the dropdown from closing, you can call event.preventDefault() within your event handler. This allows for conditional closing behavior based on your application's requirements.

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

Arguments

evCustomEvent

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 closing 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-numeric-text-box')?.addEventListener('closing', (event) => {
	// event handling code goes here.
})

openThis event is triggered whenever the dropdown menu becomes visible to the user, such as when the user clicks on the dropdown control or focuses on it using the keyboard.CustomEvent

This event is triggered whenever the dropdown menu becomes visible to the user, such as when the user clicks on the dropdown control or focuses on it using the keyboard.

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

Arguments

evCustomEvent

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 open 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-numeric-text-box')?.addEventListener('open', (event) => {
	// event handling code goes here.
})

openingThis event is fired just before the dropdown menu begins to open. If you need to prevent the dropdown from opening—for example, based on certain conditions—you can call event.preventDefault() within your event handler function. Doing so cancels the opening operation, allowing you to control when or whether the dropdown appears.CustomEvent

This event is fired just before the dropdown menu begins to open. If you need to prevent the dropdown from opening—for example, based on certain conditions—you can call event.preventDefault() within your event handler function. Doing so cancels the opening operation, allowing you to control when or whether the dropdown appears.

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

Arguments

evCustomEvent

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 opening 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-numeric-text-box')?.addEventListener('opening', (event) => {
	// event handling code goes here.
})

radixChangeThis event is triggered whenever the radix value is modified by the user. It notifies listeners that the numerical base (such as decimal, binary, or hexadecimal) used for number input or display has been changed, allowing your application to update related components or recalculate values as necessary.CustomEvent

This event is triggered whenever the radix value is modified by the user. It notifies listeners that the numerical base (such as decimal, binary, or hexadecimal) used for number input or display has been changed, allowing your application to update related components or recalculate values as necessary.

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

Arguments

evCustomEvent

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 radixChange 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-numeric-text-box')?.addEventListener('radixChange', (event) => {
	// event handling code goes here.
})

Methods

focus(): voidSets the input focus to the NumericTextBox component, allowing users to immediately start entering numeric values. This method brings the NumericTextBox into active view, enabling keyboard interactions and improving accessibility.

Sets the input focus to the NumericTextBox component, allowing users to immediately start entering numeric values. This method brings the NumericTextBox into active view, enabling keyboard interactions and improving accessibility.

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

document.querySelector('smart-numeric-text-box')?.focus();

val( value?: string | number, suppressValidation?: boolean): stringRetrieves or updates the current numeric value displayed in the NumericTextBox component. Use this method to programmatically obtain the user-entered value or to set a new value within the control.

Retrieves or updates the current numeric value displayed in the NumericTextBox component. Use this method to programmatically obtain the user-entered value or to set a new value within the control.

Arguments

value?string | number

The value to be set. If no parameter is passed, returns the displayed value of the smartNumericTextBox.

suppressValidation?boolean

If true is passed, the passed value will be set to the smartNumericTextBox without validation.

Returnsstring

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

const result = document.querySelector('smart-numeric-text-box')?.val(true,"10");

CSS Variables

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

Default value

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

smartNumericTextBox default width

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

Default value

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

smartNumericTextBox default height

--smart-numeric-text-box-default-radix-display-widthvar()

Default value

"12%"

smartNumericTextBox default radix display button width

--smart-numeric-text-box-default-unit-display-widthvar()

Default value

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

smartNumericTextBox default unit display width

--smart-numeric-text-box-text-alignvar()

Default value

"right"

smartNumericTextBox input text align