Code examples

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

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>
<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>

Pin number

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>
<input type="text"
       id="security-id"
       aria-describedby="security-id-hint"
       inputmode="numeric"
       pattern="[0-9]*"
       aria-disabled="true">
<div id="security-id-hint" class="hint">
  The Security ID number will expire after 1 hour
</div>

Security ID number

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>

Pin number

Telephone number input

• Setting type=”tel” changes the keyboard for mobile app users

<label for="phone">
  Phone number
</label>
<input type="tel"
       id="phone"
       inputmode="numeric"
       autocomplete="tel"
       aria-describedby="hint-phone">
<div class="hint" id="hint-phone">
  We’ll never sell or share your information
</div>

Phone number

We’ll never sell or share your information

Developer notes

• Why the GOV.UK Design System team changed the input type for numbers
• Stepper/counter input example

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