Blog

Controls - Restrict text input control to whole numbers only

With text input controls, there's no native way to restrict data entry to whole numbers only. This post describes a technique that we can use to limit input values to integers or whole numbers only.

When building datra entry forms and screens,  a common requirement is to configure text input controls to accept numeric input values only. To help with this task, the text input control provides a format property. This accepts two values - Text and Number.



With the text format set to Number, users can enter only numeric characters into the text input control.

On an app that runs in the browser, if a user were to enter a non-numeric character, the text input control 'throws away' the invalid character and retains any valid numeric characters in the text input control. On a mobile device, Power Apps displays the numeric keypad to prevent the entry of non-numeric characters.

The Number format accepts the entry of decimal numbers with a decimal point. A common requirement is to accept integer/whole numbers only and unfortunately, there is no native property of the text input control to enforce this restriction.

How to limit text input values to integer/whole numbers only

To configure a text input control so that it accepts numbers only, a workaround is to add formula to the OnChange property of the text input control. The formula checks whether the input is a whole number and if false, the formula notifies the user and resets the text input control.

The formula that we use looks like this.

If(TextInput1.Text <> "" And
Value(TextInput1.Text) <> RoundDown(Value(TextInput1.Text),0),
Notify("Not a whole number");
Reset(TextInput1)
)
The screenshot beneath highlights the application of this method to a text input control on a form.


If a user now enters a decimal value, the app alerts the user when the focus leaves the text input contro and restores the control value back to the initial value.


To clarify this behaviour, the reset function completely discards the decimal value that the user enters and restores the control value to the initial value. It doesn't discard only the invalid decimal portions of the input value.

Conclusion

With text input controls, there's no native way to restrict data entry to whole numbers only. This post described one workaround, which is to add formula to the OnChange property that discards the value if the user enters a decimal value.