NumberField's issues

Hey Guys,

We would like to use the Vaadin NumberField component, but we’ve encountered the following issue. We want to use decimal numbers like 20.25, but it seems that this can only be achieved by setting the step property to 0.01. However, in this case, the increment/decrement buttons also increase/decrease the value by 0.01, while we would prefer that entering 20.25 in the field and clicking the plus button would change the value to 21.25, incrementing and decrementing the value by one.

I tried creating a new component to keep the code simple by extending the NumberField. I overridden the validator to allow decimal numbers. The problem is that with the up/down stepping, it doesn’t add +1 to the number; instead, it turns 20.25 into 21.

Additionally, I noticed that when I hover over the field, a tooltip message appears suggesting that the value should be 20 or 21. I tried various workarounds to disable the tooltip, but I couldn’t find a solution.

I also attempted to use setAllowedCharPattern with a regex pattern allowing only two decimal places, but it seems like the pattern is not being recognized, even though it is correct according to an online regex validator.

Could you provide some advice on this?

I don’t think there is any supported way to separate the format from the stepper buttons, unfortunately. You could make a feature request about that at

Also, if the underlying value is 20.456789, I believe it is impossible to display it as “20.5” without also changing it to 20.5? That’s so not sensible