How to set HMTL attribute to Material UI InputProps?

Question

I am using react-number-format with Material UI Textfield and I'm trying to add a max property of 100 on my field. e.g numbers above 100 are not allowed. How can I do this using HTML attribute: min?

import InputAdornment from "@material-ui/core/InputAdornment";
import TextField from "@material-ui/core/TextField";
import NumberFormat from "react-number-format";


interface IProps {
  endAdornment?:React.FC;
  error?: string;
  fixedDecimalScale?: boolean;
  fullWidth: boolean;
  label: string;
  numberLimit: number;
  onChange: () => void;
  placeholder: string;
  thousandSeparator: boolean;
  touched?: boolean;
  value: number;
  variant: string;
  inputComponent?: React.FC;
}



  return (
    <NumberFormat
      InputProps={
        props.inputComponent
          ? {
              endAdornment: (
                <InputAdornment position="start">
                  {props.inputComponent}
                </InputAdornment>
              ),
            }
          : null
      }
      inputProps={{ max: 100 }}
      customInput={TextField}
      decimalScale={0}
      error={Boolean(props.error) && props.touched ? true : false}
      fixedDecimalScale={props.fixedDecimalScale}
      fullWidth={props.fullWidth}
      helperText={
        Boolean(props.error) && props.touched ? props.error : undefined
      }
      id={id}
      label={props.label}
      margin="normal"
      onChange={props.onChange}
      placeholder={props.placeholder}
      thousandSeparator={props.thousandSeparator}
      value={props.value}
      variant={props.variant}
    />
  );
};

export default NumberField;

I've tried to add it inside InputProps as well but I can't seem to figure out the right format. I know NumberFormat comes with prop isAllowed but I'd like to try and set it with an HTML attribute.

NearHuscarl NearHuscarl · Accepted Answer · 2021-04-16T07:12:03

I've tried to add it inside InputProps

The correct props to pass attributes to the native input element is inputProps, not InputProps, notice the lowercase 'i'.

<TextField {{ type: "number", min: 0, max: 10 }} />

Result:

<input type="number" max="10" min="0">

How to set HMTL attribute to Material UI InputProps?

1 Answers