Input Number & Decimal Places

Perhaps surprisingly, when you use a Number type field, it will not allow you to enter decimal places. When you attempt the submit the form, the browser will consider a number with decimal places to be invalid.

This is due to the design of HTML5's INPUT type=number element, and the way most browsers handle it.

So what if you need decimal places?

Solutions

To allow decimal places in your number

Add custom attribute named _step to your Input field and specify the number of optional decimal places you want to allow;

• _.1 for one decimal place e.g. _23.4
• _.01 for two decimal places
• _.001 for three, and so on
• or _any for an unlimited number

For a specific number of decimal places

If you want to require a certain number of decimal places, you can accomplish that with a pattern.

Add a custom attribute named _pattern to your Input field and specify the following regex string.

• _^\d*\.\d$ to require exactly one decimal place
• _^\d*\.\d{2}$ to require exactly two decimal places
• _{^\d*\.\d{2,4}$} to require two, three, or four decimal places

Adjust to your liking.

References

Allow 2 decimal places in <input type="number"> - StackOverflow

Is there a float input type in HTML5? - StackOverflow

‍

‍