7

I have a material-ui Textfield which is amount field

I want to format it so that upon typing, the Textfield has thousands separator and decimal. And bonus, if the input is on the right side (just like in calculators)

e.g. user types 1000000 textfield should show 1,000,000.00

See code below:

<TextField
                        variant="outlined"
                        margin="normal"
                        required
                        fullWidth
                        type="text"
                        id="debitAmount"
                        label="Amount"
                        value={debitAmount}
                        onChange={(e) => setDebitAmount(e.target.value)}
                        InputProps={{
                          classes: { input: classes.textfield1 },
                        }}
                      />

I'm trying to use a library called react-number-format but I'm having a hard time to apply it onto my textfield since the documentation lacks samples

I also tried to use toLocaleString("en") which was effective however the textfield can only show up to 4 numbers and I'm not sure why

3 Answers 3

8

Ciao, here a working example. I have used exactly the same example reported in Material-ui docs (simplyfied) using react-number-format, and to show a fixed number of decimal I used toFixed(2).

3
  • I see. But how can I incorporate this with material-ui textfield? Since the design is kind of different when I use NumberFormat directly
    – iamjpcbau
    Jul 29, 2020 at 11:04
  • 1
    Sorry. I think I found what I need in material-ui Textfield documentation: material-ui.com/components/text-fields/#formatted-inputs
    – iamjpcbau
    Jul 29, 2020 at 11:12
  • Hi, @Giovanni im not too familiar with react sintax, so how can i send thousandSeparator as parameter since textfield element?. Dec 28, 2021 at 0:51
5

react-number-format can be integrated with MaterialUI TextField like this:

<NumberFormat
  customInput={TextField}
  onValueChange={(values) => setNumberFormatState(values.value)}
  value={numberFormatState}
  // you can define additional custom props that are all forwarded to the customInput e. g.
  variant="outlined"
/>

Be aware that I use onValueChange from react-number-format. Here you get the values object which has both the unformatted value and the formatted formattedValue. Most likely you want the bare value in state.

1
  • You can add your numberformat to Formcontrol. In this case you can use material ui styles. For more information about this please see my answer in stackoverflow.com/a/69722419/7387345
    – sajadab
    Oct 26, 2021 at 11:40
-1

If anyone is coming across this, IMO the @alexanderdavide solution is the simplest and can also be used with the react-currency-format library as well:

import { TextField } from '@mui/material';

 <CurrencyFormat
            customInput={TextField}
            thousandSeparator
            prefix="$"
            decimalScale={0}
            placeholder="Amount"
            label="Amount"
            onChange={handleNewAmount}
        />
1
  • 2
    Where to import CurrencyFormat? Jun 7, 2022 at 7:48

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.