Ios Input Hints

---
name: ios-input-hints
description: 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.
---

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