UX Tip #16: Trigger the right keyboard on mobile

Save your users time by triggering the right keyboard for the right type of field

Dec 06, 2023

Pro tip: Make sure you are using the right keyboard for your forms on mobile

Information input is one of the most crucial areas of any modern product. Yet there are so many things that go wrong with user input that may turn a an experience into a very frustrating one.

One of them is triggering the wrong keyboard on mobile (both web and native apps) when it comes to filling in forms.

Alphabetic vs. Numeric

The easiest choice you’ll need to make is whether to trigger the Alphabetic or the Numeric keyboard.

If your user is filling in a number, choose the Numeric keyboard.
If your user is filling in standard text, choose the Alphabetic keyboard.
If your user is filling in a combination of letters and numbers, choose Alphabetic.

Use the numeric keyboard for filling in numbers, e.g. phone or date of birth

Email

For filling in their emails, users can leverage a specialized email keyboard, which shows:

The @ symbol
Period
Space

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

Use the email keyboard for filling in email addresses

URL

If you are asking users to fill in a web address, make sure to use the URL input type, which shows:

Period
Forward Slash
The .com shortcut

<input type="url">

Address

Addresses use a regular text input type, but make sure to leverage autocomplete by using the right parameter in your code.

<input type="text" autocomplete="street-address">

Auto Capitalization

In many cases, for example filling in a name or address, your users may want to start with a capital letter.

But there are cases where auto capitalization is unwanted and may cause unnecessary taps, for example filling in an email address. In these cases it’s important to turn auto-capitalization off by default.

First & Last name: Default to caps.
Email: Default to no caps.

<input type="email" autocapitalize="off">

Leveraging Autocomplete

One of the easiest ways to save your users’ time is to enable autocomplete in your input fields. That way, your users can quickly add their saved personal information from their device and browser with a single tap.

Use the following reference with your engineering team to make sure you are using the right type of autocomplete attribute.

HTML Autocomplete Reference:
https://www.w3schools.com/tags/att_input_autocomplete.asp