18 / 20Product UX
Smart Forms
A multi-step form with schema validation, autosave, conditional logic and great errors.
- Form UX
- Schema validation
- Autosave
- Error design
- Accessibility
stirling.lab/smart-forms Live demo
Loading demo…
What to notice
- Schema-driven validation with field-level and cross-field rules
- Errors announced to screen readers and linked with aria-describedby
- Conditional steps, progress, and resume-where-you-left-off autosave
- Address autocomplete, input masking, and a review-and-edit summary
How it's built
- A tiny Zod-like validator: schemas are data, so the same rules drive UI hints and validation.
- Validation runs on blur, then live after the first error, which feels much less naggy.
Hand-built in React 19 + TypeScript, with no UI or chart libraries.