Welcome to Vanilla Breeze
This bell pulls live notifications from /go/notify/messages — the same contract documented at /docs/concepts/service-contracts/. Static articles like this one are the no-JS / no-backend fallback.
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).
type vs inputmode
<!-- PIN: numeric keyboard, no spinner arrows, no validation quirks --><input type="text" inputmode="numeric" pattern="[0-9]*" /> <!-- Price: decimal keyboard with period key --><input type="text" inputmode="decimal" /> <!-- Quantity: use type="number" when you WANT the number behavior --><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 input
<label for="pin">PIN code</label><input type="text" id="pin" inputmode="numeric" pattern="[0-9]{4}" maxlength="4" autocomplete="off" />Price Input
Prices need a decimal point but shouldn't have spinner arrows or allow scientific notation.
Price input
<label for="price">Price</label><input type="text" id="price" inputmode="decimal" pattern="[0-9]*\.?[0-9]{0,2}" placeholder="0.00" />ZIP Code
US ZIP codes are five digits. Leading zeros matter (01234), so type="number" would break them.
ZIP code
<label for="zip">ZIP code</label><input type="text" id="zip" inputmode="numeric" pattern="[0-9]{5}" maxlength="5" autocomplete="postal-code" />Search Field
The search value ensures the virtual keyboard shows a search action key.
Search field
<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.
Contenteditable with inputmode
<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.
See Also
enterkeyhintto control the Enter key label on virtual keyboardsautocompletefor browser autofill hints<input>element reference<textarea>element reference