Thousand separtor in React Mui TextField

Question

I'm trying to add Thousand separator to my mui-textField value,knowing that i already made digit separation.my code looks like this:

<TextField
                    size='small'
                    label='Total Cotisations Encaissées'
                    value={
                        totalEncaissement
                         ?.toFixed(modeMO)
                        ?.replace(/\d(?=(\d{3})+\.)/g, "$& ") || 0
                    }
                    variant='outlined'
                    fullWidth
                    type={"number"}
                />
            </Grid>

The field doesn't dispay anything when i add replace, but works totally fine with toFixed only. Please could somebody help

Feel free to add an answer that answers your own question, and accept that answer here — Mark Schultheiss, Dec 08 '21 at 17:21

Mohammad Reza Ghasemi · Answer 1 · 2022-03-09T18:13:44.783

4

According to MUI documentation you can use react-number-format package to add a thousand separators to the TextField component.

edited Mar 09 '22 at 18:13

answered Mar 09 '22 at 18:03

Mohammad Reza Ghasemi

188
2
11

thanks for pointing out the documentation – Kicap Karan Apr 26 '22 at 09:19
I am trying a price input. How to allow decimal input along with masking? – asifsaho Jan 20 '23 at 13:55
https://stackoverflow.com/questions/45758998/how-can-i-mask-my-material-ui-textfield @asifsaho – Mohammad Reza Ghasemi Jan 21 '23 at 14:49

Thousand separtor in React Mui TextField

1 Answers1