NumericTextBox

23 Sep 20258 minutes to read

Represents the NumericTextBox component that allows the user to enter only numeric values.

<input type='text' id="numeric"/>
<script>
  var numericObj = new NumericTextBox({ value: 10 });
  numericObj.appendTo("#numeric");
</script>

Properties

cssClass string

Gets or Sets the CSS classes to root element of the NumericTextBox which helps to customize the
complete UI styles for the NumericTextBox component.

Defaults to null

currency string

Specifies the currency code to use in currency formatting.
Possible values are the ISO 4217 currency codes, such as ‘USD’ for the US dollar,’EUR’ for the euro.

Defaults to null

decimals number

Specifies the number precision applied to the textbox value when the NumericTextBox is focused.
For more information on decimals, refer to
decimals.

Defaults to null

enablePersistence boolean

Enable or disable persisting NumericTextBox state between page reloads. If enabled, the value state will be persisted.

Defaults to false

enableRtl boolean

Enable or disable rendering component in right to left direction.

Defaults to false

enabled boolean

Sets a value that enables or disables the NumericTextBox control.

Defaults to true

floatLabelType FloatLabelType

The placeholder acts as a label
and floats above the NumericTextBox based on the below values.
Possible values are:

  • Never - Never floats the label in the NumericTextBox when the placeholder is available.
  • Always - The floating label always floats above the NumericTextBox.
  • Auto - The floating label floats above the NumericTextBox after focusing it or when enters the value in it.

Defaults to Never

format string

Specifies the number format that indicates the display format for the value of the NumericTextBox.
For more information on formats, refer to
formats.

Defaults to ‘n2’

htmlAttributes { : }

You can add the additional html attributes such as disabled, value etc., to the element.
If you configured both property and equivalent html attribute then the component considers the property value.

<input id="numeric" type="text" />
import { NumericTextBox } from '@syncfusion/ej2-inputs';

let numeric: NumericTextBox = new NumericTextBox({
  htmlAttributes: { name: "quantity", min: "0", max:"100" }
});
numeric.appendTo('#numeric');

Defaults to {}

locale string

Overrides the global culture and localization value for this component. Default global culture is ‘en-US’.

Defaults to ’’

max number

Specifies a maximum value that is allowed a user can enter.
For more information on max, refer to
max.

Defaults to null

min number

Specifies a minimum value that is allowed a user can enter.
For more information on min, refer to
min.

Defaults to null

placeholder string

Gets or sets the string shown as a hint/placeholder when the NumericTextBox is empty.
It acts as a label and floats above the NumericTextBox based on the
floatLabelType.

Defaults to null

readonly boolean

Sets a value that enables or disables the readonly state on the NumericTextBox. If it is true,
NumericTextBox will not allow your input.

Defaults to false

showClearButton boolean

Specifies whether to show or hide the clear icon.

Defaults to false

showSpinButton boolean

Specifies whether the up and down spin buttons should be displayed in NumericTextBox.

Defaults to true

step number

Specifies the incremental or decremental step size for the NumericTextBox.
For more information on step, refer to
step.

Defaults to 1

strictMode boolean

Specifies a value that indicates whether the NumericTextBox control allows the value for the specified range.
If it is true, the input value will be restricted between the min and max range.
The typed value gets modified to fit the range on focused out state.
Else, it allows any value even out of range value,
At that time of wrong value entered, the error class will be added to the component to highlight the error.

<input id="numeric" type="text" />
import { NumericTextBox } from '@syncfusion/ej2-inputs';

let numeric: NumericTextBox = new NumericTextBox({
  strictMode: false,
  min: 10,
  max: 20,
  value: 25
});
numeric.appendTo('#numeric');

Defaults to true

validateDecimalOnType boolean

Specifies whether the decimals length should be restricted during typing.

Defaults to false

value number

Sets the value of the NumericTextBox.

Defaults to null

width number|string

Specifies the width of the NumericTextBox.

Defaults to null

Methods

addEventListener

Adds the handler to the given event listener.

Parameter Type Description
eventName string A String that specifies the name of the event
handler Function Specifies the call to run when the event occurs.

Returns void

appendTo

Appends the control within the given HTML element

Parameter Type Description
selector (optional) string | HTMLElement Target element where control needs to be appended

Returns void

attachUnloadEvent

Adding unload event to persist data when enable persistence true

Returns void

dataBind

When invoked, applies the pending property changes immediately to the component.

Returns void

decrement

Decrements the NumericTextBox value with specified step value.

Parameter Type Description
step number Specifies the value used to decrement the NumericTextBox value.
if its not given then numeric value will be decremented based on the step property value.

Returns void

destroy

Removes the component from the DOM and detaches all its related event handlers.
Also it maintains the initial input element from the DOM.

Returns void

detachUnloadEvent

Removing unload event to persist data when enable persistence true

Returns void

focusIn

Sets the focus to widget for interaction.

Returns void

focusOut

Remove the focus from widget, if the widget is in focus state.

Returns void

getLocalData

Returns the persistence data for component

Returns any

getPersistData

Gets the properties to be maintained in the persisted state.

Returns string

getRootElement

Returns the route element of the component

Returns HTMLElement

getText

Returns the value of NumericTextBox with the format applied to the NumericTextBox.

Returns string

handleUnload

Handling unload event to persist data when enable persistence true

Returns void

increment

Increments the NumericTextBox value with the specified step value.

Parameter Type Description
step number Specifies the value used to increment the NumericTextBox value.
if its not given then numeric value will be incremented based on the step property value.

Returns void

refresh

Applies all the pending property changes and render the component again.

Returns void

removeEventListener

Removes the handler from the given event listener.

Parameter Type Description
eventName string A String that specifies the name of the event to remove
handler Function Specifies the function to remove

Returns void

Inject

Dynamically injects the required modules to the component.

Parameter Type Description
moduleList Function[] ?

Returns void

Events

blur EmitType<NumericBlurEventArgs>

Triggers when the NumericTextBox got focus out.

change EmitType<ChangeEventArgs>

Triggers when the value of the NumericTextBox changes.
The change event of the NumericTextBox component will be triggered in the following scenarios:

  • Changing the previous value using keyboard interaction and then focusing out of the component.
  • Focusing on the component and scrolling within the input.
  • Changing the value using the spin buttons.
  • Programmatically changing the value using the value property.

created EmitType<Object>

Triggers when the NumericTextBox component is created.

destroyed EmitType<Object>

Triggers when the NumericTextBox component is destroyed.

focus EmitType<NumericFocusEventArgs>

Triggers when the NumericTextBox got focus in.