ios-input-hints

nickabeelee's avatarfrom nickabeelee

Ensure iOS/iPadOS-friendly form inputs (keyboard type, inputmode, autocomplete, autocapitalize/autocorrect, enterkeyhint) when editing or reviewing UI forms in web apps. Use when adding or modifying form fields (Svelte/HTML/TSX/etc.), auditing form UX, or fixing mobile Safari keyboard issues.

⭐0stars🔀0forks📁View on GitHub🕐Updated Jan 4, 2026
[Code Review]

When & Why to Use This Skill

The iOS Input Hints skill is designed to optimize web form accessibility and user experience on iOS and iPadOS devices. It assists developers in auditing and implementing critical HTML attributes—including inputmode, autocomplete, autocapitalize, and enterkeyhint—to ensure that mobile Safari triggers the most appropriate keyboard layout and behavior, thereby reducing input friction and improving mobile conversion rates.

Use Cases

  • Scenario 1: Optimizing checkout and registration forms by ensuring numeric or decimal keypads appear automatically for phone numbers, zip codes, and currency inputs.
  • Scenario 2: Auditing legacy web applications to identify and fix mobile Safari keyboard issues, ensuring a modern and seamless mobile UX.
  • Scenario 3: Enhancing security and convenience by correctly mapping autocomplete tokens (e.g., current-password, one-time-code) to leverage native iOS Keychain and autofill features.
  • Scenario 4: Improving form navigation and task completion by configuring the 'Enter' key hint to match user intent, such as 'Search', 'Send', or 'Next'.
nameios-input-hints
descriptionEnsure iOS/iPadOS-friendly form inputs (keyboard type, inputmode, autocomplete, autocapitalize/autocorrect, enterkeyhint) when editing or reviewing UI forms in web apps. Use when adding or modifying form fields (Svelte/HTML/TSX/etc.), auditing form UX, or fixing mobile Safari keyboard issues.

iOS Input Hints

Overview

Use this skill when working on UI forms to make input fields trigger the correct iOS/iPadOS keyboard and behavior without changing layout.

Workflow

  1. Identify every input/textarea/select in the target form(s).
  2. For each field, choose the correct semantic type and inputmode based on expected data.
  3. Add or validate autocomplete, autocapitalize, autocorrect, and enterkeyhint where helpful and safe.
  4. Keep visual structure untouched; only adjust attributes.

Keyboard Mapping (quick rules)

  • Numbers (integer): type="number" + inputmode="numeric".
  • Numbers (decimal): type="number" + inputmode="decimal".
  • Free text: type="text" (no inputmode unless a specialized keyboard is desired).
  • Email: type="email" (email keyboard) + autocomplete="email".
  • URL: type="url" + autocomplete="url".
  • Phone: type="tel" + autocomplete="tel".
  • Search: type="search" + enterkeyhint="search".

Meta Behaviors

  • Autocomplete: Use the most specific token possible (e.g., given-name, family-name, current-password, new-password, username).
  • Autocapitalize/autocorrect: Disable for codes, IDs, URLs, emails, and handles; allow for freeform text.
  • Enter key: Use enterkeyhint to match intent (next, done, search, send).
  • Do not reshape UI: Only adjust attributes; no styling or layout changes.

References

  • See references/ios-input-hints.md for detailed attribute guidance and examples.