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. WCAG 2.2: https://www.w3.org/TR/WCAG22/ WCAG Contrast Minimum: https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html WCAG Non-text Contrast: https://www.w3.org/WAI/WCAG22/Understanding/non-text-contrast.html Apple HIG Accessibility: https://developer.apple.com/design/human-interface-guidelines/accessibility Carbon Accessibility Overview: https://carbondesignsystem.com/guidelines/accessibility/overview/
Agent Directive
Set suitable inputmode, autocomplete, and label; numeric-like strings use text plus inputmode to avoid silent data loss.