Forms

Flow

Trigger: A user must create or update structured product data.

1. Orient the user with a visible form title and purpose.Orient the user with a visible form title and purpose.
2. Group related fields in a reading order that still works at small widths.Group related fields in a reading order that still works at small widths.
3. Collect with persistent labels; placeholders may supplement but never replace labels.Collect with persistent labels; placeholders may supplement but never replace labels.
4. Validate at the right moment and associate errors with the field that needs attention.Validate at the right moment and associate errors with the field that needs attention.
5. Recover without discarding valid input or forcing the user to rediscover the error.Recover without discarding valid input or forcing the user to rediscover the error.
6. Submit with a product verb that describes the outcome, then make success or remaining work explicit.Submit with a product verb that describes the outcome, then make success or remaining work explicit.

Typical Building Blocks composition

Composition below is baseline guidance for the pattern; it does not rename or add source checklist rows.

Flow rules

• Visible labels remain labels at every viewport.
• Errors are associated with the field and explain recovery.
• Submit uses a product verb rather than generic “Submit.”

Responsive behavior

sm: stack by reading order; keep touch-operable targets. md/lg: grouping may change, but label/error relationships do not.

Accessibility is tested across the sequence.

Keyboard order, focus movement, state announcements, touch targets, cancellation, and recovery must be verified for the whole flow—not only for each participating component in isolation.

Recovery is part of the pattern.

A complete pattern defines what the user sees when the happy path breaks, what is preserved, where focus goes, and how the user safely resumes or exits.

Catalog connection

A product Catalog can show this pattern only when the product actually implements the flow. If it is absent, keep the section honestly Not yet rather than mounting a fictional working pattern.