Introduction to modern Number input control
Number input control is one of the new modern controls in Power Apps. It is almost entirely identical as a text input control. However, there are certain features that are relevant to numeric values. I will explain all of those in the properties list below.
Properties
- Appearance - There are 3 different options:
- 'NumberInput.Appearance'.FilledDarker (default)
- 'NumberInput.Appearance'.FilledLighter
- 'NumberInput.Appearance'.Outline
- Value - The default/initial value
- Min - The minimum value that's allowed
- Max - The maximum value that's allowed
- Precision - The number of decimal places to show
- Step - The numeric value by which the number in the control should increment/decrement when up/down arrows are clicked
- DelayOutput - Whether there should be a half-second delay in registering the user's input
- ValidationState - There are 2 options:
- 'NumberInput.ValidationState'.None (default)
- 'NumberInput.ValidationState'.Error (it adds a red border around the control, you can base it on certain condition)
Using modern Number control
One of the use cases that I worked on in the past where this control would have been tremendously useful was for users to scan items using barcodes and then update the count using a + and a - button/icon. I had to use a bunch of controls. This modern control helps me achieve all the functionality that I needed with just one control. Here is a quick demo:
This control does not have the Reset property. So, to reset this control, use the Reset function. To learn more about the Reset function, click here.
Stay tuned for the remaining modern controls!
To read the official documentation of modern controls, click here.