Decimal increase with arrows - Textfield Material UI

user_9837259 0
Viewed 805

I am using the OutlinedInput of Material UI in order to allow the user to input a number.

When the type is number, the browser automatically adds two small arrows to the input field. This is fine. HOVEWER the arrows increases or decreases the input by "1". I would like them to increase or decrease the input by "0.01".

  <OutlinedInput
    type="number"
    placeholder="0"
    value={value}
    onChange={onChange}
    classes={{
      root: classNames(classes.myStyle)
    }}
  />

MyStyle

myStyle: {
  color: "blue"
  width: "90px,
  step: '0.01'
},
material-ui reactjs
1 Answers

just add inputProps={{ step: ".01" }}

<OutlinedInput
 inputProps={{ step: ".01" }}
    type="number"
    placeholder="0"
    value={value}
    onChange={onChange}
    classes={{
      root: classNames(classes.myStyle)
    }}
  />
user_106111880
Related