If you want to prevent certain keys from being pressed, you can surpress the keydown event after the check is failed:

<Input

  onKeyPress={(e) => {

    if (e.key === "e" || e.key === "-") {

      e.preventDefault();

    }

  }}

/>

But if you allow all keys but validate it after being pressed, you can use the pattern option like this:

<Controller

  name="phone"

  control={control}

  rules={{ required: true, pattern: /^d+$/ }}

  render={(props) => {

    const { onChange, value, ref } = props.field; // v7. use props if you're using v6

    const { error } = props.meta;



    return (

      <Input

        ref={ref}

        type="number"

        label="phone"

        onChange={onChange}

        val={value}

      />

    );

  }}

/>