【TypeScript/React.js】0から始まる数値の扱い方【電話番号とか！】

結論

0から始まるような電話番号、クレジットカード番号用のinputフォームを作成する際は
type="text"、inputmode="numeric"を使用すべき

OK：

0から始まる数値の入力ができる
inputmodeを使用することでuserのデバイスで数値入力をするUIが表示されるようになる
maxLengthが適用される

<input text="text" inputmode="numeric" maxLength="11">

text="text"のため、このままだと数値以外の文字列の入力ができてしまうので、制御する処理が必要

export const AppInputNumber = ({
  placeholder,
  defaultValue = '',
  maxLength,
}: Props) => {
 const [value, setValue] = useState(defaultValue)
 const onChange = (event: ChangeEvent<HTMLInputElement>) => {
    const value = event.target.value
    const regex = /^[0-9\b]+$/ // 0-9までの文字列
    if (value === '' || regex.test(value)) {
      setValue(value)
    }
  }
  return (
    <Input
      onChange={(e) => {
        onChange(e)
      }}
      placeholder={placeholder}
      value={value}
      maxLength={maxLength}
      type='text'
      inputMode='numeric'
    />
  )
}

• RegExp.prototype.test()について

正規表現と指定された文字列の一致を調べるための検索を実行します。 true または false を返します。

NG：

numberだと、0から始まる数値の実装ができない
maxLengthが適用されない

<input text="number" maxLength="11">