Code examples

Don’t use type="number" for non-integers

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
  • Screen readers do not call a type="number" input a number input, they call it:
    • Spinner
    • Spin button
    • Stepper
    • Incrementable edit text number field

Use type="text" for number inputs

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

<label for="pin">
  Pin number
</label>
<div id="hint" class="hint">
  The pin number will expire after 1 hour
</div>
<input type="text"
       id="pin"
       maxlength="6"
       aria-describedby="hint"
       inputmode="numeric"
       pattern="[0-9]*">
The pin number will expire after 1 hour

Disabled and focusable number input (preferred)

  • Using the aria-disabled attribute will allow the input to be focusable and more discoverable
<label for="security-id">
  Security ID number
</label>
<div id="security-id-hint" class="hint">
  The Security ID number will expire after 1 hour
</div>
<input type="text"
       id="security-id"
       aria-describedby="security-id-hint"
       inputmode="numeric"
       pattern="[0-9]*"
       aria-disabled="true">
The Security ID number will expire after 1 hour

Fully disabled number input (avoid)

  • Fully disabled inputs are not focusable so may not be as discoverable in a form
<label for="pin-disabled">
  Pin number
</label>
<input type="text"
       id="pin-disabled"
       inputmode="numeric"
       pattern="[0-9]*"
       disabled>

Telephone number input

  • Setting type=”tel” changes the keyboard for mobile app users
<label for="phone">
  Phone number
</label>
<div class="hint" id="hint-phone">
  We’ll never sell or share your information
</div>
<input type="tel"
       id="phone"
       inputmode="numeric"
       autocomplete="tel"
       aria-describedby="hint-phone">
We’ll never sell or share your information

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

Related number input entries