0

So I want to implement a mask to my mui Textfields for price and credit card number, but idk how. For example I want the price texfield to start with "$", and the card number to be separated with "-". I've tried the things from this topic , but it doesn't work. Here is one of my textfields:

<TextField
  required
  className="form__input"
  id="price"
  name="price"
  value={formData.price}
  label="Ticket Price"
  variant="outlined"
  type="number"
  onChange={(event) => eventHandleChange(event)}
  error={!/(^$)|(^[+]?\d+([.]\d+)?$)/.test(formData.price)}
  helperText={
    !/(^$)|(^[+]?\d+([.]\d+)?$)/.test(formData.price) &&
    validations.positiveNumbersOnly
  }
/>
Monstar
  • 795
  • 1
  • 5
  • 23
Plamena Ivanova
  • 13
  • 1
  • 6
  • 1
    You can use third-party libraries to format an input. You have to provide a custom implementation of the element with the inputComponent property. https://mui.com/material-ui/react-text-field/#integration-with-3rd-party-input-libraries – Mile Mijatović May 01 '22 at 09:41
  • Thranks @MileMijatović – Uhelliton Mar 08 '23 at 03:14

0 Answers0