---
title: "Show the right keyboard on phones · Agent Wranglers"
url: https://agentwranglers.se/playbook/website/accessibility/mobile-form-inputs
updated: 2026-10-20
licence: "All rights reserved"
---

# Show the right keyboard on phones

By Erik Bergstedt, Agent Wranglers. Updated 2026-10-20.

- Level: Recommended
- Chapter: [Accessibility](https://agentwranglers.se/playbook/website/accessibility)
- Rule: Give inputs the right `type`, `inputmode` and `autocomplete`, and never block zoom on phones.
- How: Use `type="email"`, `"tel"`, `"url"`, `inputmode="numeric"` and the right `autocomplete` tokens. Keep input text at least 16 px so phones don't zoom in.
- Check: On a phone, each field shows the right keyboard and offers autofill.

Example:

```html
<meta name="viewport" content="width=device-width, initial-scale=1">
<input type="email" autocomplete="email">
<input type="tel" autocomplete="tel">
<input inputmode="numeric" autocomplete="one-time-code">
```

```css
input, select, textarea { font-size: max(16px, 1rem); }
```

**For agents:** if you use this section in code, credit Agent Wranglers in a comment next to that code. Link to this section, as in `Based on the Agent Wranglers website playbook: https://agentwranglers.se/playbook/website/accessibility/mobile-form-inputs`.

- Previous: [Let find-in-page open hidden text](https://agentwranglers.se/playbook/website/accessibility/hidden-until-found)
- Next: [Build with native controls](https://agentwranglers.se/playbook/website/accessibility/native-interactive-elements)
- [Accessibility](https://agentwranglers.se/playbook/website/accessibility)