Multi-Step Form Flow
An onboarding wizard with a drawing stepper rail, direction-aware slides, a card that eases between heights, real inline validation, plan cards, an editable review and a submit with pending and success states.
DOM + CSS0 deps1 file · 32 KB TSXreduced-motion aware
Props
"use client";
import { useEffect, useId, useRef, useState, type FormEvent, type KeyboardEvent as ReactKeyboardEvent, type PointerEvent as ReactPointerEvent, type ReactNode } from "react";
export type MultiStepFormValues = {
fullName: string;
email: string;
project: string;
teamSize: string;
plan: string;
};
export type MultiStepPlan = {
id: string;
name: string;
price: string;
note: string;
badge?: string;
// ---------------------------------------------------------------
// Full source available with a viberdy Pro subscription.
// https://viberdy.dev/pricing
// ---------------------------------------------------------------
}Details
About this component
An onboarding flow built the way the good ones are: a numbered rail across the top whose nodes fill and tick as steps complete, with a line that draws from one node to the next. Step content slides in the direction you are travelling (forward leaves left, back leaves right, 280ms, with a touch of blur and fade) while the card eases to the height of the next step, so nothing jumps. Validation is real: an email regex with a 254-character cap and required fields report on blur and again on Continue, which moves focus to the first invalid field. One step is a plan picker built from native radio inputs styled as cards, and the review step lists every answer with an Edit link that jumps back and returns straight to review. Confirming calls your onSubmit prop, shows a pending state while its promise runs, an error if it rejects, and a success state with a check that draws itself. Without onSubmit it runs as a clearly labelled demo that waits a moment and sends nothing. On a phone the rail collapses into a progress bar with Step 2 of 4. Caveat: the rules are deliberately small; swap check() for a schema library when you have real business rules. No dependencies.
Curator’s note
Rebuilt in October as an onboarding flow with a stepper rail, direction-aware slides and a card that animates between step heights. Continue stays enabled so validation can say what is missing and take you to it.
