17 July 2020

inputmode

When surfing on your smartphone you may have noticed that sometimes the layout of the virtual keyboard changes for some inputs. There are two ways to adapt the keyboard layout, first is using the type attribute and second is the inputmode attribute.

In this article you will learn what's the difference between inputmode and type, what values are available and how to use inputmode today.

Difference to type #

By using the type attribute you can not only change the type (checkbox, text, radio), the validation and the default styling and behavior which comes with it, but for some types also the default virtual keyboard will adapt.

Let's say you want to have an input which should always be a number. If you use type="number" for an input some browser will show arrows in the field, to increase and decrease the number.

native styling of input with type="number" in Firefox

Furthermore, if one enters anything other than a number, e.g. "test", the input will be invalid and can't be submitted. On some browsers and OS you will also get a different virtual keyboard, showing the numbers visible by default.

native styling of input with inputmode="numeric" in Chrome

While this may be often the perfect choice, you sometimes want the default validation of type="text" and also don't want a different styling. This is where the inputmode attribute comes in handy. By using inputmode you will only get the different virtual keyboard in supported browsers. So, instead of using type="number" you can use inputmode="numeric".

Values #

The following values are available at the moment.

`none` #

No virtual keyboard. For when the page implements its own keyboard input control. If you use this value the default virtual keyboard will not be shown.

text #

The standard input keyboard

tel #

A keypad showing the digits 0–9, the asterisk (*), and the pound (#) key.

url #

A keypad optimized for entering URLs. This may have the / key more prominent, for example.

email #

A virtual keyboard optimized for entering email addresses. Typically includes the @ character.

numeric #

Keyboard showing digits 0–9 and may also show the minus key.

decimal #

Fractional numeric input keyboard containing the digits and decimal separator for the user's locale (typically . or ,) may also show the minus key.

search #

A virtual keyboard optimized for search input. The return/submit key may be labelled as "Search".

You can test all values by yourself in this JS Bin.

Browser support #

Current browser support doesn't look that good at a first glance, as it is only supported in chromium-based browsers and Safari on iOS. It is currently behind a feature flag in Firefox and I don't know about any plans to get it implement it in Safari. Nevertheless, It is still a great enhancement and can be used right now with no issues. Use it.