Html Input Type for Phone Number

Using tel you can just add some validation to allow only numbers (you can also add a + beforehand and include whatever country code you need).

<form>
  <input type="tel" id="phone" name="phone" pattern="[+]{1}[0-9]{11,14}" required>
  <button>Submit</button>
</form>

This will bring up an error when you submit

Or you can restrict to numbers and hide the arrow by doing this:

.no-arrow {
  -moz-appearance: textfield;
}
.no-arrow::-webkit-inner-spin-button {
  display: none;
}
.no-arrow::-webkit-outer-spin-button,
.no-arrow::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

<form>
  <input id="phone" name="phone" class="no-arrow" value="" type="number">
  <button>Submit</button>
</form>

All of the above solutions do not avoid the user adding non-number in your input, for example, when you set pattern attribute on <input /> tag, the user can enter non-number char, but when the user submit the form then browser error appear

if you want limit your input just in number , you have to do this with js

Pure Js

const inputValidation = (e) => {
 
    // get value form event
     const value = e.target.value

    // validate value
    const validatedValue = value.replace(/[^0-9]/g, '');

    return validatedValue;


}

React JS

// Implement your input state
const [mobile, setMobile] = React.useState("");


// validate value
const numberHandler = val => {
        const validatedValue = val.replace(/[^0-9]/g, "");
        setMobile(validatedValue);
 };

your input tag

 return (
    <div>
     <input type="tel" value={mobile} onChange={e => numberHandler(e)} />
    </div>

  )

Also, you can show an alert to the user if they enter invalid data

const numberHandler = val => {
        const validatedValue = val.replace(/[^0-9]/g, "");
          
      + // implement alert
      +  if (validatedValue === "" && val !== "") {
      +    alert('you must enter number only')
      +    return
      +  }
        setMobile(validatedValue);
 };

If just by removing the arrows solves your problem then you can try including css to disable it:

#phone::-webkit-inner-spin-button, 
#phone::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}

I would suggest using this js library for formatting input fields:

tel input js