inputmode Explained: Better Mobile Keyboards With HTML

Small form details can make a big difference on a phone.

If a field asks for a number but the browser opens a normal text keyboard, the user has to switch keyboard modes before typing.

HTML has a simple attribute that can help: inputmode.

It tells the browser what kind of keyboard would be useful for the expected input. It has been widely supported in modern browsers for years.

A numeric keyboard

<input
  type="text"
  inputmode="numeric"
>

On a phone, this asks the browser to show a keyboard aimed at entering numbers.

That is useful for:

Why not type="number"?

Because not every value made from digits is actually a number.

A PIN like:

0042

is not something you want the browser to turn into the number 42.

A phone number is not a number you calculate with either.

For values that are really text but happen to use digits, this is often better:

<input
  type="text"
  inputmode="numeric"
>

inputmode does not validate

This is important:

<input inputmode="numeric">

does not force the user to enter only numbers.

inputmode is a keyboard hint.

If validation matters, use the correct input type, a pattern, or server-side validation too.

Common values

The main values are:

none
text
decimal
numeric
tel
search
email
url

numeric

<input
  type="text"
  inputmode="numeric"
>

A useful real example:

<label for="code">
  Verification code
</label>

<input
  id="code"
  name="code"
  type="text"
  inputmode="numeric"
  autocomplete="one-time-code"
>

decimal

Use this when decimal input is expected:

<input
  type="text"
  inputmode="decimal"
>

The exact keyboard depends on the device and language.

tel

For phone numbers:

<input
  type="tel"
  autocomplete="tel"
>

type="tel" already gives the browser a useful hint, so adding inputmode="tel" is often unnecessary.

email

<input
  type="email"
  autocomplete="email"
>

On mobile, the keyboard may make the @ character easier to reach.

url

<input
  type="url"
  autocomplete="url"
>

The keyboard may show characters that are useful for URLs.

<input
  type="search"
  inputmode="search"
>

The return key may be labelled “Search” instead of using a normal return icon.

Combine it with autocomplete

A good mobile form often uses both:

<input
  type="email"
  name="email"
  autocomplete="email"
>

<input
  type="tel"
  name="phone"
  autocomplete="tel"
>

<input
  type="text"
  name="code"
  inputmode="numeric"
  autocomplete="one-time-code"
>

The keyboard becomes more useful, and the browser gets a better chance to fill known data.

Do not block paste

For codes, a simple field is often better than six tiny boxes:

<input
  type="text"
  inputmode="numeric"
  autocomplete="one-time-code"
  maxlength="6"
>

Users can paste into it, and mobile operating systems may offer the code automatically.

Test on a real phone

Desktop browsers do not show the main benefit of inputmode.

Test the form on a real iPhone and Android device if mobile form use matters to your site.

The exact keyboard can differ between platforms.

A small attribute with a real benefit

inputmode will not transform a website, but it can remove one annoying step from filling out a form on a phone.

That is exactly the kind of improvement I like: almost no extra code, no JavaScript, and a better experience for the user.