<p>
  <a href="https://css-tricks.com/what-to-use-instead-of-number-inputs/">
    Reference:
    https://css-tricks.com/what-to-use-instead-of-number-inputs/
  </a>
</p>
<main>
  <p>
    (copied from article)
  </p>
  <input type="text" name="token" id="token" inputmode="numeric" pattern="[0-9]*" autocomplete="one-time-code" />
  
  <p>
    Text & inputmode="numeric" only
  </p>
  <input type="text" inputmode="numeric" />
  
  <p>
    Text, inputmode="numeric" and [0-9]*
  </p>
  <input type="text" inputmode="numeric" pattern="[0-9]*" />

  <p>
    Text, inputmode="numeric" and [0-9]
  </p>
  <input type="text" inputmode="numeric" pattern="[0-9]" />
  
  <p>
    Type = number
  </p>
  <input type="number" name="token" id="token" inputmode="numeric" pattern="[0-9]*" autocomplete="one-time-code" />
  
  <p>
    Auto-complete = "some-other-value"
  </p>
  <input type="text" name="token" id="token" inputmode="numeric" pattern="[0-9]*" autocomplete="some-other-value" />
  
  <p>
    No Inputmode
  </p>
  <input type="text" name="token" id="token" inputmode="" pattern="[0-9]*" autocomplete="one-time-code" />
  
  <p>
    No autocomplete
  </p>
  <input type="text" name="token" id="token" inputmode="numeric" pattern="[0-9]*" />
</main>

main {
  display:grid;
  grid-gap:1rem;
}

input {
  font-size:2rem;
}