Numeric Textbox Component
NumericTextBox component that provides a specialized input for numeric values with validation, formatting, and increment/decrement capabilities. Supports both controlled and uncontrolled modes.
Usage
To import and use the Numeric Textbox component in your application, use the following code snippet:
Demos
Explore the demos of the React Numeric Textbox component. Refer to this page.
Props
The following table outlines the props for the Numeric Textbox component:
| Name | Type | Default | Description |
|---|---|---|---|
| clearButton | node | false | Specifies whether to show a clear button within the input field. When enabled, a clear button (×) appears when the field has a value, allowing users to quickly clear the input with a single click. |
| 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. |
| decimals | number | - | Specifies the number precision applied to the textbox value when the NumericTextBox is focused. |
| defaultValue | number | null | - | Specifies the default value of the NumericTextBox for uncontrolled mode. |
| format | string | - | Specifies the number format that indicates the display format for the value of the NumericTextBox. |
| labelMode | 'Never' | Specifies the floating label type for the component. | |
| max | number | - | Specifies a maximum value that is allowed a user can enter. |
| min | number | - | Specifies a minimum value that is allowed a user can enter. |
| placeholder | string | - | Specifies the string shown as a hint/placeholder when the NumericTextBox is empty. |
| size | Size.Medium | Specifies the size of the component. Options include 'Small', 'Medium' and 'Large'. | |
| spinButton | boolean | true | Specifies whether to show increment and decrement buttons (spin buttons) within the input field. When enabled, up/down buttons appear that allow users to increment or decrement the numeric value in the input by a predefined step |
| step | number | 1 | Specifies the incremental or decremental step size for the NumericTextBox. |
| strictMode | boolean | true | 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, |
| validateOnType | boolean | false | Specifies whether the decimals length should be restricted during typing. |
| value | number | null | null | Specifies the value of the NumericTextBox. When provided, component becomes controlled. |
| variant | Variant | Variant.Standard | Specifies the visual style variant of the component. |
Events
The following table outlines the events for the Numeric Textbox component:
| Name | Type | Description |
|---|---|---|
| onChange | (event: NumericChangeEvent) => void | Specifies the callback function that triggers when the value of the NumericTextBox changes. The change event of the NumericTextBox component will be triggered in the following scenarios:
|