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 · Accepted Answer · 2021-04-16 07:12:03Z

0

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">

answered Apr 16, 2021 at 7:12

NearHuscarl

83k24 gold badges321 silver badges291 bronze badges

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

2 Comments

WonderDev Over a year ago

It still doesn't behave right. It let's me input numbers over 100

NearHuscarl Over a year ago

@WonderDev works as expected, you can type anything you want, if the value is invalid, you can use pseudo selector :invalid to style the error input. See max attribute. My answer only concerns about passing attributes to the input element, you can use isAllowed callback to restrict what the user can type as suggested in your question.

Collectives™ on Stack Overflow

How to set HMTL attribute to Material UI InputProps?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related