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-step

Step 1 of 3

mobile 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: hsl(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