CSS Showcase · Live Demo
Validation that guides you.
A sign-up form validated with a shared zod schema — inline errors, an error summary, a live password strength meter, and a mobile step-by-step flow.
Featured demo
mobile · step-by-stepmobile design patterns
form-validation-step-by-step.css
/* One field per step */
.step-wizard {
display: grid;
gap: 0.75rem;
}
.step-dots {
display: flex;
gap: 0.375rem;
}
.step-dot[data-active="true"] {
background: var(--primary);
width: 1.25rem;
}CSS features used
- • zod schema validation
- • aria-invalid / aria-describedby
- • Container queries
- • Live strength meter
- • Step-based wizard UI
- • Semantic tokens