Code examples

Use type="text"

Use type=text with inputmode="numeric" with an input pattern and JS to filter out non-numeric characters.

Don’t use type="number"

The type="number" input is intended for integers and includes features we don’t want (like stepper/scroll functionality) that is a nuisance to everyone

  • Phone, credit card, pin etc. are not integers
  • NVDA doesn’t fully support type="number" inputs at this time
<label for="pin">
  Pin number
</label>
<input type="text"
       id="pin"
       aria-describedby="hint"
       inputmode="numeric"
       pattern="[0-9]*">
<div id="hint" class="hint">
  The pin number will expire after 1 hour
</div>
The pin number will expire after 1 hour

Disabled number input

  • Disabled inputs should not be focusable
<label for="pin-disabled">
  Pin number
</label>
<input type="text"
       id="pin-disabled"
       inputmode="numeric"
       pattern="[0-9]*"
       disabled>

Developer notes

Name

  • Include for="input-id in each <label> label to associate it with the input
  • Use aria-label="Input name" as a last resort if a <label> can’t be used
  • Don’t hide the label on focus

Role

  • Identifies as a text input

Group

  • Include for="input-id in each <label> label to associate it with the input
  • Use <fieldset> and <legend> to name a group of inputs.

Focus

  • Focus must be visible