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?

Heretic Monkey
– Heretic Monkey

2019-06-11 13:37:18 +00:00
Commented Jun 11, 2019 at 13:37 — Heretic Monkey
– Heretic Monkey, Commented Jun 11, 2019 at 13:37

Naga Sai A · Accepted Answer · 2019-06-11 13:36:43Z

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, 2019 at 13:36

Naga Sai A

11k1 gold badge24 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Broken Mind Over a year ago

it doesn't quite seem to work for me, still errors saying by rounding the number down or up

Naga Sai A Over a year ago

@PaulWillo96, could you confirm the range of values which you are trying for input field, as you can set max and min values

Broken Mind Over a year ago

any value, however it can be a integer or float, min would be 0 as minus would not be accepted, max could be anything

Naga Sai A Over a year ago

@PaulWillo96, 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 Over a year ago

are you using regex/ function on that field which seems to rounding it off

|

Collectives™ on Stack Overflow

Accepting Decimal values within input

1 Answer 1

8 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related