# input type — full keyboard reference

Every web-summonable keyboard configuration this dataset documents, every
attribute value, and the full gotcha glossary. The companion file to SKILL.md;
canonical source: https://inputtype.dev/ (updated 2026-07-24).

## Scope and verification

This reference describes exactly:

- iOS: iOS 26 · Safari · stock iOS keyboard · en-US
- Android: Android 16 · Chrome · Gboard · en-US

Deliberately not covered:

- Samsung Keyboard (≈¼ of Android devices) — Gboard only
- In-app webview browsers (Instagram, TikTok, Facebook, Gmail) — Safari and Chrome only
- Locales beyond en-US, except explicitly documented locale traps
- date/time/color/file picker internals — pickers, not keyboards
- Hardware keyboards and iPad floating/split keyboards

No configuration carries a real-device verification stamp yet: every claim is simulated from documented platform behavior. Stamps land per configuration as the device pass completes.

## Configurations by group

### Layouts

The keyboard arrangement itself, controlled by type and inputmode. Focus each preset and compare what comes up.

#### Default text

```html
<input type="text" />
```

The baseline QWERTY keyboard with autocorrect and the QuickType suggestion bar.

#### Email

```html
<form action="#">
  <input type="email" autocomplete="email" />
</form>
```

QWERTY with @ and . promoted onto the primary layer. No spacebar autocorrect surprises.

autocomplete="email" additionally offers your email address in the Assist Bar on both platforms.

#### URL

```html
<input type="url" />
```

QWERTY tuned for addresses: ., /, and .com replace the spacebar area on iOS.

Gboard shows / and .com but keeps the spacebar.

#### Telephone

```html
<form action="#">
  <input type="tel" autocomplete="tel" />
</form>
```

The phone pad: digits with ABC letter groups, plus + * # symbols. This is the keypad from a classic dialer.

autocomplete="tel" can also offer your own number in the Assist Bar.

#### Numeric (integer)

```html
<input type="text" inputmode="numeric" />
```

Pure digit pad for integers: PINs, quantities, years. No decimal point, no minus.

Prefer this over type="number" for codes and PINs, values keep leading zeros and never get spinner arrows.

Gotchas: No minus key on iOS digit pads

#### Decimal

```html
<input type="text" inputmode="decimal" />
```

Digit pad with a locale-aware decimal separator. The closest web equivalent of the screenshot that started this project.

The separator key follows the device locale: . in en-US, , in much of Europe.

Gotchas: The decimal separator follows the device locale · No minus key on iOS digit pads

#### type="number"

```html
<input type="number" />
```

The classic gotcha. On iOS this shows the full QWERTY number row layer, not the digit pad people expect.

Add inputmode="decimal" or use inputmode="numeric" on type="text" to get the real pad. type="number" also silently strips leading zeros and rejects non-numeric paste.

Gotchas: type="number" is a trap

#### Search

```html
<form action="#">
  <input type="search" />
</form>
```

Standard layout with the return key restyled as Search and, on iOS, a clear (×) button inside the field.

The Search return key only appears when the input is inside a form.

#### Password (secure entry)

```html
<form action="#">
  <input type="password" autocomplete="current-password" />
</form>
```

Secure text entry: autocorrect and QuickType suggestions are disabled, and the keyboard does not learn from what you type.

### Enter key hints

enterkeyhint relabels the return key. Most labels only render when the input sits inside a form.

#### enterkeyhint="enter"

```html
<form action="#">
  <input type="text" enterkeyhint="enter" />
</form>
```

The neutral Return label, explicit baseline for comparison.

#### enterkeyhint="go"

```html
<form action="#">
  <input type="text" enterkeyhint="go" />
</form>
```

Go, for inputs that navigate somewhere, like a URL bar.

iOS also shows Go automatically for any input inside a form with an action, even without enterkeyhint.

#### enterkeyhint="done"

```html
<form action="#">
  <input type="text" enterkeyhint="done" />
</form>
```

Done: closes the keyboard, signalling there is nothing more to fill.

#### enterkeyhint="next"

```html
<form action="#">
  <input type="text" enterkeyhint="next" />
</form>
```

Next: moves the user to the following field in a multi-step form.

The label changes, but you still wire the actual focus-advance yourself.

#### enterkeyhint="previous"

```html
<form action="#">
  <input type="text" enterkeyhint="previous" />
</form>
```

Previous, the rarely-seen backwards counterpart of Next.

Gboard support is inconsistent; some versions fall back to Return.

#### enterkeyhint="search"

```html
<form action="#">
  <input type="text" enterkeyhint="search" />
</form>
```

Search, without needing type="search" semantics on the field.

#### enterkeyhint="send"

```html
<form action="#">
  <input type="text" enterkeyhint="send" />
</form>
```

Send, for chat and messaging composers.

### Autofills

autocomplete-driven offers above the keyboard: saved contacts and cards, OTP codes from SMS, and password suggestions.

#### One-time code (SMS autofill)

```html
<form action="#">
  <input type="text" inputmode="numeric" autocomplete="one-time-code" />
</form>
```

When an SMS containing a code arrives, the system offers it in the Assist Bar, one tap fills it.

Requires HTTPS. To test: focus the field, then have someone text you "Your code is 123456".

Gotchas: OTP: one field, not six boxes · OTP autofill degrades in iOS WebViews · No minus key on iOS digit pads

#### Strong password suggestion

```html
<form action="#">
  <input type="password" autocomplete="new-password" />
</form>
```

autocomplete="new-password" makes the system offer to generate and store a strong password in the Assist Bar.

Requires HTTPS and a configured password manager (iCloud Keychain / Google).

#### Saved password fill

```html
<form action="#">
  <input type="password" autocomplete="current-password" />
</form>
```

autocomplete="current-password" surfaces saved credentials for this domain in the Assist Bar, gated by Face ID / fingerprint.

Requires HTTPS and a saved credential for the site.

#### Contact autofill (name)

```html
<form action="#">
  <input type="text" autocomplete="name" autocapitalize="words" />
</form>
```

autocomplete="name" offers your own contact card details in the Assist Bar.

#### Credit card autofill

```html
<form action="#">
  <input type="text" inputmode="numeric" autocomplete="cc-number" />
</form>
```

autocomplete="cc-number" pairs the numeric pad with saved-card offers (and camera card-scanning on iOS).

Requires HTTPS and a card saved in the browser / Wallet.

Gotchas: No minus key on iOS digit pads

### Inputs / selects

Inputs that summon native picker UI instead of a keyboard: dates, times, and selects. Since iOS 14 these float near the control rather than docking to the bottom.

#### Date (calendar)

```html
<input type="date" />
```

No keyboard, iOS opens the compact calendar, Android a material date picker dialog.

On iOS the calendar is mandatory: the wheel only appears after tapping the month-year label inside it, and the picker floats near the control, through iOS 13 it sat bottom-docked in the keyboard’s slot. See the Month Keyboard for the closest wheel the web gets.

#### Month (the wheel)

```html
<input type="month" />
```

type="month" is the only date-group input that still summons the classic iOS wheel, month and year columns, no day.

Support is patchy: desktop Safari and Firefox treat type="month" as a plain text field, so feature-detect before relying on it.

#### Full date wheel

_Native-app behavior — not web-summonable; documented for contrast._

```
// UIKit
datePicker.preferredDatePickerStyle = .wheels

// SwiftUI
DatePicker(...)
  .datePickerStyle(.wheel)
```

The three-column day / month / year wheel you know from native apps. No HTML input can summon it on modern iOS, type="date" always opens the calendar instead.

This applies to webviews too. If your product needs this exact control, it takes a native screen, or a custom JS widget imitating it.

#### Bottom-docked picker (inputView)

_Native-app behavior — not web-summonable; documented for contrast._

```
// UIKit
textField.inputView = pickerView        // docks in the keyboard’s slot
textField.inputAccessoryView = toolbar  // the Cancel / Done bar
```

Why native pickers feel like keyboards: a text field can replace its keyboard with any view, which then occupies the keyboard’s bottom-docked slot, with a Cancel/Done accessory bar above it. This is the pattern from the screenshot that started this project.

The web has no inputView equivalent, the closest a page gets is inputmode="none" plus a custom position:fixed sheet of its own.

#### Time

```html
<input type="time" />
```

The native time wheel (iOS) or clock dialog (Android).

The wheels float in a small panel on iOS; through iOS 13 they were bottom-docked in the keyboard’s slot.

#### Date + time

```html
<input type="datetime-local" />
```

datetime-local combines both pickers in one control.

Rendering differs noticeably between platforms, compare them.

#### Select

```html
<select>
  <option>Mercury</option>
  <option>Venus</option>
  <option>Earth</option>
  <option>Mars</option>
  <option>Jupiter</option>
</select>
```

A native select: iOS shows a bottom wheel/menu, Android a centered dialog or dropdown.

iOS floats a menu near the control (a bottom-docked wheel before iOS 14); modern Android Chrome goes the other way and docks selects to the bottom as a sheet, compare on both devices.

### Misc

Text-handling behaviors and non-standard editing surfaces: autocapitalization, autocorrect, textarea, contenteditable, and suppressed keyboards.

#### inputmode="none"

```html
<input type="text" inputmode="none" />
```

Focuses the field but suppresses the keyboard entirely, for custom in-page widgets like calculators or signature pads.

The caret still appears and hardware keyboards still work.

#### Textarea (multiline)

```html
<textarea></textarea>
```

Multiline editing: the return key inserts a newline instead of submitting, so it always reads Return.

enterkeyhint works here too if you want Send-style messaging UIs.

#### contenteditable

```html
<div contenteditable="true"></div>
```

A rich-text editing surface. Gets the default text keyboard; inputmode and enterkeyhint are honored on the element.

#### autocapitalize="words"

```html
<input type="text" autocapitalize="words" />
```

The shift key auto-engages at the start of every word, watch it light up as you type spaces.

#### autocapitalize="characters"

```html
<input type="text" autocapitalize="characters" />
```

Caps-lock behavior: every character capitalized. For flight codes, license plates, coupon codes.

#### Autocorrect off

```html
<input type="text" autocorrect="off" autocapitalize="off" spellcheck="false" />
```

autocorrect, autocapitalize, and spellcheck disabled, for usernames, slugs, and anything autocorrect mangles.

autocorrect is a Safari attribute; Gboard relies on autocapitalize and the field type.

## Attribute values

### `type`

- `text` — Default QWERTY with autocorrect and the suggestion bar.
- `email` — Promotes @ and . onto the primary layer; pair with autocomplete="email".
- `url` — Tunes the layout for addresses (./ and .com on iOS).
- `tel` — Summons the phone dial pad (digits with + * # keys).
- `number` — Gotcha: iOS shows a QWERTY number row, not a digit pad. Prefer inputmode.
- `search` — Relabels return to Search and adds a clear (×) button on iOS.
- `password` — Secure entry: disables autocorrect, suggestions, and keyboard learning.
- `date` — Opens the native date picker instead of a keyboard.
- `month` — The one date input that still summons the iOS wheel.
- `time` — Opens the native time wheel / clock dialog.
- `datetime-local` — Combines date and time pickers in one control.

### `inputmode`

- `numeric` — Pure digit pad, best for PINs and codes (keeps leading zeros).
- `decimal` — Digit pad with a locale-aware decimal separator.
- `tel` — Phone dial pad without type="tel" semantics.
- `none` — Suppresses the keyboard for custom in-page widgets.

### `enterkeyhint`

- `enter` — Neutral Return label.
- `go` — Go, for inputs that navigate somewhere.
- `done` — Done: closes the keyboard.
- `next` — Next: advance to the following field (wire the focus move yourself).
- `previous` — Previous, backwards counterpart of Next (patchy on Gboard).
- `search` — Search, without needing type="search".
- `send` — Send, for chat composers.

### `autocomplete`

- `email` — Offers the saved email address in the assist bar.
- `tel` — Offers the saved phone number.
- `name` — Offers contact-card details.
- `one-time-code` — Surfaces SMS codes for one-tap fill (HTTPS only).
- `cc-number` — Pairs the numeric pad with saved-card offers (HTTPS only).
- `current-password` — Surfaces saved credentials, gated by biometrics (HTTPS only).
- `new-password` — Offers to generate and store a strong password (HTTPS only).

### `autocapitalize`

- `words` — Shift auto-engages at the start of every word.
- `characters` — Caps-lock behavior, every character capitalized.
- `off` — No automatic capitalization.

### `autocorrect`

- `off` — Disables Safari autocorrect.

### `spellcheck`

- `false` — Disables red squiggles on desktop and some keyboards.

## Gotcha glossary

### type="number" is a trap

trap · ios, android

type="number" misbehaves in ways the keyboard alone can't show: desktop scroll and arrow keys silently change the value, leading zeros are stripped, and Dragon or NVDA users hit dictation and labeling failures. On iOS it also shows the QWERTY number row, not a digit pad.

**Do:** For codes, PINs, and other digit strings use type="text" inputmode="numeric" pattern="[0-9]*" (the GOV.UK pattern). Reserve type="number" for true quantities where spinner stepping helps.

[GOV.UK: why we changed the input type for numbers](https://technology.blog.gov.uk/2020/02/24/why-the-gov-uk-design-system-team-changed-the-input-type-for-numbers/)

### The decimal separator follows the device locale

trap · ios

The iOS decimal pad is locale-dependent: a German-locale iPhone shows a comma key and no period. Setting lang on the element or page does not change the key.

**Do:** Accept both "." and "," when parsing and validating; never assume which separator key the user saw.

[CSS-Tricks: Everything You Ever Wanted to Know About inputmode (comment thread)](https://css-tricks.com/everything-you-ever-wanted-to-know-about-inputmode/)

### OTP: one field, not six boxes

trap · ios

In multi-box OTP layouts, iOS 26.x SMS autofill pastes the entire code into the first box instead of distributing the digits.

**Do:** Use ONE input with autocomplete="one-time-code" plus inputmode="numeric", not one box per digit.

[Apple Developer Forums thread 807907](https://developer.apple.com/forums/thread/807907) · [WebKit bug 257804: one-time-code failures in iPhone Safari](https://bugs.webkit.org/show_bug.cgi?id=257804)

### OTP autofill degrades in iOS WebViews

quirk · ios

Inside iOS WebViews (in-app browsers), one-time-code suggestions can stop appearing after the first successful use.

[react-native-webview issue #2913](https://github.com/react-native-webview/react-native-webview/issues/2913)

### In-app browsers diverge from Safari and Chrome

note · ios, android

Webviews inside apps like Instagram, TikTok, Facebook, and Gmail don't always match Safari/Chrome keyboard behavior — autofill offers in particular. On iOS, a web page also cannot hide the keyboard accessory bar in browser or PWA contexts.

[Ionic: keyboard guide](https://ionicframework.com/docs/developing/keyboard)

### No minus key on iOS digit pads

quirk · ios

The iOS numeric and decimal pads have no minus key. Negative values need a different strategy: a full keyboard, a sign toggle in your UI, or a separate control.

### The keyboard is not validation

note · ios, android

Keyboard choice only shapes convenience. Paste, dictation, hardware keyboards, and autofill all bypass the layout, so the value still needs JS and server-side validation.

### When type and inputmode disagree, inputmode picks the keyboard

note · ios, android

inputmode controls which keyboard appears; type keeps its semantics. type="number" inputmode="decimal" summons the decimal pad while keeping number parsing and spinners; type="tel" inputmode="numeric" shows the plain digit pad instead of the phone pad.

[WHATWG HTML: input modalities](https://html.spec.whatwg.org/multipage/interaction.html)

### Most enter-key labels only render inside a form

quirk · ios, android

Several enterkeyhint labels fall back to plain Return when the input is not inside a form. iOS also shows Go automatically for any input in a form with an action, even without enterkeyhint; Gboard support for "previous" is inconsistent.