Accepting Decimal values within input

Question

I have an input field that currently takes in type=number, however this does not allow for decimal numbers, i do need to allow the user to have decimal input but i cant seem to get it working, would regex possibly be the solution to this problem as i would need some sort of validation.

<FormControl fullWidth style={{ width: '50%' }}>
    <InputLabel htmlFor="estimatedValue">Estimated Value</InputLabel>
    <Input
        type="number"
        id="estimatedValue"
        startAdornment={<InputAdornment position="start">£</InputAdornment>}
    />
</FormControl>

Possible duplicate of [Is there a float input type in HTML5?](https://stackoverflow.com/questions/19011861/is-there-a-float-input-type-in-html5) — Heretic Monkey, Jun 11 '19 at 13:37

score 3 · Answer 1 · answered Jun 11 '19 at 13:36

3

To achieve expected result, use step with type number for input

Please below link for reference from MDN

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number#Allowing_decimal_values

<input type="number" step="0.01">

answered Jun 11 '19 at 13:36

Naga Sai A

10,771
1
21
40

it doesn't quite seem to work for me, still errors saying by rounding the number down or up – Broken Mind Jun 11 '19 at 13:53
@PaulWillo96, could you confirm the range of values which you are trying for input field, as you can set max and min values – Naga Sai A Jun 11 '19 at 13:58
any value, however it can be a integer or float, min would be 0 as minus would not be accepted, max could be anything – Broken Mind Jun 11 '19 at 14:05
@PaulWillo96, https://codepen.io/nagasai/pen/XLWGyv , as mentioned in docs - You can still manually enter any number but it will be invalid and increase/decrease will not work for invalid number – Naga Sai A Jun 11 '19 at 14:17
are you using regex/ function on that field which seems to rounding it off – Naga Sai A Jun 11 '19 at 14:18
no non at all, every time i try and submit on the form i will receive an error saying that i should round down/up – Broken Mind Jun 11 '19 at 14:30
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/194771/discussion-between-naga-sai-a-and-paulwillo96). – Naga Sai A Jun 11 '19 at 14:33
are you trying in Chrome browser? – Naga Sai A Jun 11 '19 at 14:36

Accepting Decimal values within input

1 Answers1