How to apply a pattern to material ui input?

Question

How do I apply a regex pattern to Input to validate without using onChange?

For example if I want it to accept exactly 13 digits number ^(\d{13})?$ having type="text"

<Input id="number" type="text" />

Answer 1

material ui, has a property for its input called: inputProps, its an object that you can pass the attributes you want to assign to the input element itself, so you can give it {pattern: 'your pattern'} and it will get applied to the input, as a second way, you can try maskedInputs like this:

      function TextMaskCustom(props) {
        const { inputRef, ...other } = props;

        return (
          <MaskedInput
            {...other}
            ref={inputRef}
            mask={[
              /\d/,
              /\d/,
              /\d/,
              /\d/,
              /\d/,
              /\d/,
              /\d/,
              /\d/,
              /\d/,
              /\d/,
              /\d/,
              /\d/,
              /\d/
            ]}
            placeholderChar={"\u0000"}
            showMask
          />
        );
      }

and then pass this to the material input as a prop and tell it to use this masked input instead of its default input component:

      <Input
        value={textmask}
        onChange={this.handleChange("textmask")}
        id="formatted-text-mask-input"
        inputComponent={TextMaskCustom}
      />