# TextInput keyboard type matches the expected input

- **Pattern:** `ab-001973` (`mobile-ux-patterns.keyboard-input.keyboard-type`)
- **Severity:** medium
- **Lifecycle:** active
- **Last modified:** 2026-04-18
- **Canonical URL:** https://auditbuffet.com/patterns/ab-001973
- **License:** CC-BY-4.0 — attribute to AuditBuffet Pattern Catalog (https://auditbuffet.com/patterns/ab-001973)

## 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:

```tsx
<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 `keyboardType` prop matches: `email-address` for emails, `phone-pad` for phone numbers, `numeric` for numbers, `decimal-pad` for decimals, `url` for 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 `keyboardType` set. 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., `numeric` on 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:

  ```tsx
  <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: user-experience

HTML version: https://auditbuffet.com/patterns/ab-001973