Example of Range Validation in React Numeric Textbox Component

All Controls
/
Numerictextbox
/
Range

This sample demonstrates the range validation functionalities of the Numeric TextBox. Change the min, max and step values and click on apply button to change the property values in Numeric TextBox.

More Details...

Loading....
Description

The NumericTextBox has the options to restrict the input value between a specific range using the min, max, and strictMode properties.

  • When you enable the strictMode property, the value will automatically change within a range on passing the out-of-range values.
  • When you disable the strictMode property, the NumericTextBox component allows the out-of-range value with the highlighted textbox to indicate the given value is wrong.

In this demo, numeric textbox is restricted between 10 to 100 through the min and max properties. So you can enter only the value between this range.

More information on the range validation configuration can be found in the documentation section.