inputmode

Controls which virtual keyboard appears on mobile devices. Critical for fields where the input type doesn't match the keyboard you need.

Overview

The inputmode attribute controls which virtual keyboard appears on mobile devices. It is essential for fields where the type attribute doesn't match the keyboard you want.

The key distinction: type controls validation and behavior (spinners, step arrows, format enforcement), while inputmode controls only the keyboard. You can combine them independently.

Applies to: <input>, <textarea>, and any element with contenteditable

Values

Value	Keyboard	Use When
`text`	Standard text keyboard	Default. General text input.
`numeric`	Number keys only (0-9)	PINs, ZIP codes, OTPs, credit card numbers — numeric data that isn't a "number" you'd increment.
`decimal`	Numbers with a decimal point key	Prices, measurements, percentages — numbers that may contain a decimal.
`tel`	Telephone keypad (0-9, *, #, +)	Phone numbers. Similar to `numeric` but includes phone-specific characters.
`email`	Text keyboard with `@` and `.` easily accessible	Email addresses. Usually paired with `type="email"`.
`url`	Text keyboard with `/` and `.` easily accessible	URLs. Usually paired with `type="url"`.
`search`	Text keyboard with a search/submit key	Search fields. Pairs well with `type="search"`.
`none`	No virtual keyboard	Custom input UIs (datepickers, color pickers) where you provide your own input mechanism.

inputmode vs type

This is the most important concept to understand. Consider a PIN field:

type="number" gives you a numeric keyboard but also adds spinner arrows, allows scientific notation (1e5), and strips leading zeros.
type="text" inputmode="numeric" gives you the same numeric keyboard with none of those side effects.

Use type="number" when the value is a quantity that can be incremented (age, item count). Use type="text" inputmode="numeric" when the value is a code or identifier that happens to be digits (PIN, ZIP, credit card number).

<input type="text" inputmode="numeric" pattern="[0-9]*" />  <input type="text" inputmode="decimal" />  <input type="number" min="1" max="99" />

Practical Examples

PIN Entry

A 4-digit PIN needs a numeric keyboard but should preserve leading zeros and avoid spinner arrows.

PIN code

Price Input

Prices need a decimal point but shouldn't have spinner arrows or allow scientific notation.

<label for="price">Price</label> <input type="text" id="price" inputmode="decimal" pattern="[0-9]*\.?[0-9]{0,2}" placeholder="0.00" />

Price

ZIP Code

US ZIP codes are five digits. Leading zeros matter (01234), so type="number" would break them.

ZIP code

Search Field

The search value ensures the virtual keyboard shows a search action key.

<label for="site-search">Search</label> <input type="search" id="site-search" inputmode="search" placeholder="Search articles..." />

Contenteditable Element

The inputmode attribute also works on contenteditable elements, giving you keyboard control outside of form fields.

<div contenteditable="true" inputmode="numeric"> Tap to enter a number... </div>

Suppressing the Keyboard

Use inputmode="none" when your UI provides its own input mechanism. The field can still receive focus and programmatic input, but the virtual keyboard will not appear.

Common use cases include custom datepickers, emoji pickers, or calculator UIs where tapping buttons fills the field.

Browser Support

The inputmode attribute is supported in all modern browsers. On desktop, it has no visible effect since there is no virtual keyboard — it is purely a mobile optimization. This means you can add it to any field without affecting the desktop experience.