Step 1 · Schema
Schema contract
- Evidence
- Names the serializable shape before UI wiring starts.
- Failure mode
- Field names drift from the server-action payload.
Workflow Pattern — Forms
Progression ladder for form process.
This study shows how schema shape, action handoff, FormShell, named controls, client validation, pending state, and result feedback compose into a durable form workflow.
Promotable form patterns need stable field names, typed values, validation evidence, pending affordances, and visible outcomes.
§01
Interactive study
The dominant metaphor is a progression ladder: every stage makes one failure mode visible before the chain can earn reusable guidance or component promotion.
Required gates
3
Standard gates
2
Enhancement gates
1
Progression ladder
One form chain, visible from schema to receipt.
This study keeps the useful process guidance visible while exercising canonical form primitives. The interactive surface tests the shape before any form-process component is promoted.
Required
Step 2 · Action
Server action
- Evidence
- Owns the mutation boundary and returns a typed result.
- Failure mode
- The form turns into a client-only demo.
Step 3 · Shell
FormShell
- Evidence
- Provides POST, noValidate, and progressive action support.
- Failure mode
- Browser validation blocks TanStack validation evidence.
Step 4 · Names
Named controls
- Evidence
- Every field has a stable name for FormData and hydration.
- Failure mode
- Pre-hydration submit cannot reconstruct intent.
Step 5 · Validate
Client validation
- Evidence
- TanStack fields show local feedback before submission.
- Failure mode
- Users discover errors only after mutation attempt.
Step 6 · States
Pending and result states
- Evidence
- The UI exposes processing, success, and retry states.
- Failure mode
- Users cannot tell whether the action is working.