NumericTextBox JAVASCRIPT UI Component API

NumericTextBox Javascript API

Class

NumericTextBox

NumericTextBox

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

Selector

smart-numeric-text-box

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

animation"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"

Example

Set the animation property. 

 <smart-numeric-text-box animation='none'></smart-numeric-text-box>

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

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

Get the animation property. 

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

decimalSeparatorstring

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

"."

Example

Set the decimalSeparator property. 

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

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

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

Get the decimalSeparator property. 

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

disabledboolean

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

Example

Set the disabled property. 

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

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

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

Get the disabled property. 

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

dropDownAppendToany

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.

Example

Set the dropDownAppendTo property. 

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

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

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

Get the dropDownAppendTo property. 

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

dropDownEnabledboolean

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

Example

Set the dropDownEnabled property. 

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

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

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

Get the dropDownEnabled property. 

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

enableMouseWheelActionboolean

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

Example

Set the enableMouseWheelAction property. 

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

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

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

Get the enableMouseWheelAction property. 

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

hintstring

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

""

Example

Set the hint property. 

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

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

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

Get the hint property. 

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

inputFormat"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"

Example

Set the inputFormat property. 

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

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

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

Get the inputFormat property. 

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

labelstring

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

Default value

""

Example

Set the label property. 

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

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

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

Get the label property. 

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

leadingZerosboolean

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

Example

Set the leadingZeros property. 

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

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

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

Get the leadingZeros property. 

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

unlockKeystring

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

""

Example

Set the unlockKey property. 

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

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

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

Get the unlockKey property. 

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

localestring

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"

Example

Set the locale property. 

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

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

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

Get the locale property. 

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

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

Example

Set the localizeFormatFunction property. 

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

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

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

Get the localizeFormatFunction property. 

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

maxnumber | string

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

Example

Set the max property. 

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

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

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

Get the max property. 

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

messagesobject

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

}

Example

Set the messages property. 

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

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

 const numerictextbox = document.querySelector('smart-numeric-text-box');
 numerictextbox.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."}};

Get the messages property. 

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

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

Example

Set the min property. 

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

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

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

Get the min property. 

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

namestring

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

""

Example

Set the name property. 

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

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

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

Get the name property. 

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

nullableboolean

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

Example

Set the nullable property. 

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

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

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

Get the nullable property. 

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

openedboolean

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

Example

Set the opened property. 

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

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

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

Get the opened property. 

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

outputFormatStringstring

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"

Example

Set the outputFormatString property. 

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

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

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

Get the outputFormatString property. 

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

placeholderstring

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

""""

Example

Set the placeholder property. 

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

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

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

Get the placeholder property. 

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

precisionDigitsnumber

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.

Example

Set the precisionDigits property. 

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

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

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

Get the precisionDigits property. 

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

radix"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

Example

Set the radix property. 

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

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

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

Get the radix property. 

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

radixDisplayboolean

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

Example

Set the radixDisplay property. 

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

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

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

Get the radixDisplay property. 

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

radixDisplayPosition"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"

Example

Set the radixDisplayPosition property. 

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

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

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

Get the radixDisplayPosition property. 

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

readonlyboolean

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

Example

Set the readonly property. 

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

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

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

Get the readonly property. 

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

rightToLeftboolean

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.

Example

Set the rightToLeft property. 

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

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

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

Get the rightToLeft property. 

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

scientificNotationboolean

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

Example

Set the scientificNotation property. 

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

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

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

Get the scientificNotation property. 

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

showDropDownValuesboolean

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

Example

Set the showDropDownValues property. 

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

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

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

Get the showDropDownValues property. 

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

showUnitboolean

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

Example

Set the showUnit property. 

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

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

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

Get the showUnit property. 

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

significantDigitsnumber

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

Example

Set the significantDigits property. 

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

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

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

Get the significantDigits property. 

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

spinButtonsboolean

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

Example

Set the spinButtons property. 

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

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

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

Get the spinButtons property. 

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

spinButtonsDelaynumber

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

Example

Set the spinButtonsDelay property. 

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

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

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

Get the spinButtonsDelay property. 

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

spinButtonsInitialDelaynumber

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

Example

Set the spinButtonsInitialDelay property. 

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

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

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

Get the spinButtonsInitialDelay property. 

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

spinButtonsPosition"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"

Example

Set the spinButtonsPosition property. 

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

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

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

Get the spinButtonsPosition property. 

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

spinButtonsStepnumber | 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

Example

Set the spinButtonsStep property. 

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

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

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

Get the spinButtonsStep property. 

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

themestring

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

""

Example

Set the theme property. 

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

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

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

Get the theme property. 

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

unfocusableboolean

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

Example

Set the unfocusable property. 

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

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

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

Get the unfocusable property. 

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

unitstring

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"

Example

Set the unit property. 

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

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

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

Get the unit property. 

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

validation"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"

Example

Set the validation property. 

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

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

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

Get the validation property. 

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

valueany

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

Example

Set the value property. 

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

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

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

Get the value property. 

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

wordLength"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"

Example

Set the wordLength property. 

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

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

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

Get the wordLength property. 

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

Events

changeCustomEvent

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.

Example

Set up the event handler of change event. 

const numerictextbox = document.querySelector('smart-numeric-text-box');
numerictextbox.addEventListener('change', function (event) {
	// event handling code goes here.
})

changingCustomEvent

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.

Example

Set up the event handler of changing event. 

const numerictextbox = document.querySelector('smart-numeric-text-box');
numerictextbox.addEventListener('changing', function (event) {
	// event handling code goes here.
})

closeCustomEvent

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.

Example

Set up the event handler of close event. 

const numerictextbox = document.querySelector('smart-numeric-text-box');
numerictextbox.addEventListener('close', function (event) {
	// event handling code goes here.
})

closingCustomEvent

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.

Example

Set up the event handler of closing event. 

const numerictextbox = document.querySelector('smart-numeric-text-box');
numerictextbox.addEventListener('closing', function (event) {
	// event handling code goes here.
})

openCustomEvent

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.

Example

Set up the event handler of open event. 

const numerictextbox = document.querySelector('smart-numeric-text-box');
numerictextbox.addEventListener('open', function (event) {
	// event handling code goes here.
})

openingCustomEvent

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.

Example

Set up the event handler of opening event. 

const numerictextbox = document.querySelector('smart-numeric-text-box');
numerictextbox.addEventListener('opening', function (event) {
	// event handling code goes here.
})

radixChangeCustomEvent

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.

Example

Set up the event handler of radixChange event. 

const numerictextbox = document.querySelector('smart-numeric-text-box');
numerictextbox.addEventListener('radixChange', function (event) {
	// event handling code goes here.
})

Methods

focus(): void

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.


Invoke the focus method.

const numerictextbox = document.querySelector('smart-numeric-text-box');
numerictextbox.focus();

val( value?: string | number, suppressValidation?: boolean): string

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

Invoke the val method.

const numerictextbox = document.querySelector('smart-numeric-text-box');
const result = numerictextbox.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