Design Principle
Placeholders are useful for examples, not as the only instruction or critical guidance.
Principle
Placeholders are useful for examples, not as the only instruction or critical guidance.
Design action
Use label for field name, help text for rules, and placeholder only for short examples; keep rules visible when errors appear.
Examples
Positive example: Fields need format examples, search hints, or short prompts but have high error risk. Counterexample: Placeholder contains the full rule.
Apply when
Fields need format examples, search hints, or short prompts but have high error risk. 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
Use label for field name, help text for rules, and placeholder only for short examples; keep rules visible when errors appear.