Prefix & Suffix Adornments
The NumericTextBox provides configuration properties for adding items as prefix and suffix adornments. The component can display both built-in and custom adornments. Below you can find more details about the different configuration options.
Built-In Adornments
Validation Icon
The NumericTextBox component provides the showValidationIcon prop that can be used in a combination with the inputClass or the valid properties. Configuring a combination of these properties we can show a validation icon that marks the NumericTextBox value as valid or invalid.
Loading Icon
You can display a loading icon in the NumericTextBox by setting its showLoadingIcon property to true.
Clear button
You can display the built-in clear button inside the NumericTextBox by setting its showClearButton property to true. The clear button will appear once there is a value inside the NumericTextBox.
Separator
In scenarios when we need to display a separator in the adornments, we can use the InputSeparator component as demonstrated in the following example.
Prefix Adornments Customization
The NumericTextBox component allows you to define custom template that will be visualized as a prefix inside the component. To define a custom prefix, use the inputPrefix property as in the following example.
Suffix Adornments Customization
The NumericTextBox component allows you to define custom template that will be visualized as a suffix inside the component. To define a custom suffix, use the inputSuffix property as in the following example.
Disabled Adornments
All adornments defined for the NumericTextBox component are automatically enabled/disabled based on the disabled property. The property controls the enabled/disabled state of the whole NumericTextBox.