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