TextInput keyboard type matches the expected input
Why it matters
A TextInput for email without keyboardType="email-address" hides the @ under a long-press, forcing users to tap-and-hold on every signup. A phone field with the default keyboard hides the numeric pad entirely. These mismatches slow data entry by several seconds per field and inflate typos, which show up as invalid-format errors and failed signup conversions. It also breaks autofill integration with autoComplete hints.
Severity rationale
Medium because users can still complete the task but friction and typo rates measurably degrade conversion.
Remediation
Set keyboardType on every specialized input and pair it with autoComplete hints so iOS and Android autofill work correctly:
<TextInput placeholder="Email" keyboardType="email-address" autoCapitalize="none" autoComplete="email" textContentType="emailAddress" />
<TextInput placeholder="Phone" keyboardType="phone-pad" autoComplete="tel" />
<TextInput placeholder="PIN" keyboardType="numeric" secureTextEntry />
<TextInput placeholder="Price" keyboardType="decimal-pad" />
Use decimal-pad for money and numeric for integer-only values.
Detection
-
ID:
keyboard-type -
Severity:
medium -
What to look for: Count every TextInput in the app. For each, classify the expected input type (email, phone, number, URL, text) and check whether the
keyboardTypeprop matches:email-addressfor emails,phone-padfor phone numbers,numericfor numbers,decimal-padfor decimals,urlfor URLs. Report: "X of Y TextInputs have correct keyboardType." -
Pass criteria: At least 100% of TextInput fields that accept specialized input (email, phone, number, URL) have the correct
keyboardTypeset. Only truly free-text inputs may use the default keyboard type. -
Fail criteria: Any TextInput for specialized input (email, phone, number) uses the default keyboard type, or incorrect keyboard types are set (e.g.,
numericon an email field). -
Skip (N/A) when: App has no text input fields or all inputs are free-text with no specialized format.
-
Detail on fail: Quote the actual prop (or lack thereof).
"Email input uses default keyboard instead of email-address — no @ symbol readily available."or"Phone number input uses default keyboard instead of phone-pad." -
Remediation: Set appropriate keyboardType on TextInput:
<TextInput placeholder="Email" keyboardType="email-address" autoCapitalize="none" autoComplete="email" /> <TextInput placeholder="Phone" keyboardType="phone-pad" autoComplete="tel" /> <TextInput placeholder="PIN" keyboardType="numeric" secureTextEntry /> <TextInput placeholder="Price" keyboardType="decimal-pad" />
Taxons
History
- 2026-04-18·v1.0.0·Initial import from mobile-ux-patterns·automated