Add Suffix Follow By User Input Material Ui Textfield

I want to create TextField element that has value when user key in followed by Input Adornment. Is it possible to add % sign after value instead of end of input ? Currently percent

Solution 1:

I think adornments are not the best approach for this problem. Instead you should look at the Integration with 3rd party input libraries example in the documentation.

Here is a modified version of the TypeScript code for the demo using the "react-number-format" package to add a % suffix:

import * asReactfrom"react";
importNumberFormatfrom"react-number-format";
importTextFieldfrom"@mui/material/TextField";

interfaceCustomProps {
  onChange: (event: { target: { name: string; value: string } }) =>void;
  name: string;
}

constNumberFormatCustom = React.forwardRef<NumberFormat, CustomProps>(
  functionNumberFormatCustom(props, ref) {
    const { onChange, ...other } = props;

    return (
      <NumberFormat
        {...other}
        getInputRef={ref}onValueChange={(values) => {
          onChange({
            target: {
              name: props.name,
              value: values.value
            }
          });
        }}
        thousandSeparator
        isNumericString
        suffix="%"
      />
    );
  }
);

interfaceState {
  numberformat: string;
}

exportdefaultfunctionFormattedInputs() {
  const [values, setValues] = React.useState<State>({
    numberformat: "90"
  });

  consthandleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    setValues({
      ...values,
      [event.target.name]: event.target.value
    });
  };

  return (
    <TextFieldsx={{maxWidth:120 }}
      label="Percentage"value={values.numberformat}onChange={handleChange}name="numberformat"id="formatted-numberformat-input"InputProps={{inputComponent:NumberFormatCustomasany
      }}
      variant="standard"
    />
  );
}