Design Principle
Form labels should remain visible before and after input so users can confirm meaning and context.
Principle
Form labels should remain visible before and after input so users can confirm meaning and context.
Design action
Every field uses a persistent visible label; placeholders only show example format, and help/error text binds to the field.
Examples
Positive example: Signup, checkout, filters, admin configuration, and search forms have many fields or require review. Counterexample: Placeholder is the only field label.
Apply when
Signup, checkout, filters, admin configuration, and search forms have many fields or require review. 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
Every field uses a persistent visible label; placeholders only show example format, and help/error text binds to the field.