UI DESIGN LAB
  • Home
  • Community
  • Library
  • Knowledge
  • Docs
ZHLogin
Back to knowledge
Typography Color Accessibility

Touch Keyboard and Input Purpose

Touch Keyboard and Input Purpose turns a frequent interface judgment into an executable constraint before generation.

formsinputmobile

Design Principle

Mobile input fields should use the right keyboard, autocomplete, and input purpose to reduce errors and effort.

Principle Mobile input fields should use the right keyboard, autocomplete, and input purpose to reduce errors and effort.

Design action Set suitable inputmode, autocomplete, and label; numeric-like strings use text plus inputmode to avoid silent data loss.

Examples Positive example: Phone, email, amount, code, address, search, and date input are completed mostly on mobile. Counterexample: IDs or postal codes use number input and lose leading zeros.

Apply when Phone, email, amount, code, address, search, and date input are completed mostly on mobile. Users need to judge state, scope, risk, or next action quickly.

Source notes Source note: Synthesized from W3C WCAG 2.2, Apple Accessibility, IBM Carbon Accessibility, and accessibility practices in major design systems.

Agent Directive

Set suitable inputmode, autocomplete, and label; numeric-like strings use text plus inputmode to avoid silent data loss.

Apply When

  • Phone, email, amount, code, address, search, and date input are completed mostly on mobile.
  • Users need to judge state, scope, risk, or next action quickly.

Avoid

  • IDs or postal codes use number input and lose leading zeros.
  • Irrelevant structure, copy, or decoration is added only to make the UI feel richer.

Knowledge Metadata

Category
Typography Color Accessibility
Quality
86%
Version
v1
Published
6/6/2026