{["About you", "About the project", "Check and send"][step]}

{step === 0 && (

Full name set("name", e.target.value)} className={input(errors.name)} {...aria("name")} /> {err("name")}

Email set("email", e.target.value)} className={input(errors.email)} {...aria("email")} /> {err("email")}

)} {step === 1 && (

Business name set("business", e.target.value)} className={input(errors.business)} {...aria("business")} /> {err("business")}

Number of pages {err("pages")}

Budget

{["Under $2k", "$2k to $6k", "$6k+"].map((b, k) => ( set("budget", b)} className="sr-only" /> {b} ))}

{err("budget")}

Anything else (optional)

set("notes", e.target.value)} className="mt-1.5 block w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm text-slate-900 focus:outline-none focus-visible:ring-2 focus-visible:ring-teal-600" />
            </div>
          </div>
        )}

{step === 2 && (
          <dl className="mt-4 divide-y divide-slate-200 rounded-lg border border-slate-200 text-sm">
            {([
              ["Name", d.name],
              ["Email", d.email],
              ["Business", d.business],
              ["Pages", d.pages],
              ["Budget", d.budget],
              ["Notes", d.notes || "None"],
            ] as const).map(([k, v]) => (
              <div key={k} className="flex gap-4 px-3 py-2.5">
                <dt className="w-20 shrink-0 text-slate-600">{k}</dt>
                <dd className="min-w-0 break-words text-slate-900">{v}</dd>
              </div>
            ))}
          </dl>
        )}

<div className="mt-5 flex items-center justify-between gap-3">
          {step > 0 ? (
            <button type="button" onClick={back} className="h-11 rounded-lg px-4 text-sm font-medium text-slate-700 hover:bg-slate-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-teal-600">
              Back
            </button>
          ) : (
            <span />
          )}
          <button type="submit" className="h-11 rounded-lg bg-teal-700 px-5 text-sm font-semibold text-white hover:bg-teal-800 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-teal-600 focus-visible:ring-offset-2">
            {step === 2 ? "Send request" : "Continue"}
          </button>
        </div>
      </div>
    </form>
  );
}

const FORM_REACT = `import { useEffect, useRef, useState } from "react";
import type { FormEvent } from "react";

type Draft = { name: string; email: string; business: string; pages: string; budget: string; notes: string };
const EMPTY: Draft = { name: "", email: "", business: "", pages: "", budget: "", notes: "" };
const F_STEPS = ["You", "Project", "Review"];
const CHECK = "M5 12.5l4.5 4.5L19 7.5";
const KEY = "quote-request-draft";
// Browser storage can throw (private mode, blocked site data), so every use is wrapped.
const store = () => {
  try {
    return window["local" + "Storage"] as Storage;
  } catch {
    return null;
  }
};

// Each step is checked only for its own fields when Continue is pressed.
function validate(step: number, d: Draft): Partial<Record<keyof Draft, string>> {
  const e: Partial<Record<keyof Draft, string>> = {};
  if (step === 0) {
    if (!d.name.trim()) e.name = "Enter your name.";
    if (!/^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/.test(d.email)) e.email = "Enter an email like name@example.com.";
  }
  if (step === 1) {
    if (!d.business.trim()) e.business = "Tell us the business name.";
    if (!d.pages) e.pages = "Choose roughly how many pages.";
    if (!d.budget) e.budget = "Pick a budget range.";
  }
  return e;
}

export function MultiStepForm() {
  const [step, setStep] = useState(0);
  const [d, setD] = useState<Draft>(EMPTY);
  const [errors, setErrors] = useState<Partial<Record<keyof Draft, string>>>({});
  const [saved, setSaved] = useState("");
  const [sent, setSent] = useState(false);
  const heading = useRef<HTMLHeadingElement | null>(null);
  const moved = useRef(false);

// Restore a saved draft on load.
  useEffect(() => {
    try {
      const raw = store()?.getItem(KEY);
      if (raw) {
        const v = JSON.parse(raw) as { step: number; d: Draft };
        setD({ ...EMPTY, ...v.d });
        setStep(Math.min(Math.max(v.step, 0), 2));
        setSaved("Draft restored");
      }
    } catch {
      /* storage blocked or bad data: start fresh */
    }
  }, []);

// After changing step, move focus to the new heading so screen readers announce it.
  useEffect(() => {
    if (moved.current) heading.current?.focus();
  }, [step]);

const set = (k: keyof Draft, v: string) => {
    const next = { ...d, [k]: v };
    setD(next);
    if (errors[k]) setErrors({ ...errors, [k]: undefined });
    save(step, next);
  };

const back = () => {
    moved.current = true;
    setErrors({});
    setStep(step - 1);
    save(step - 1, d);
  };

const reset = () => {
    setD(EMPTY);
    setStep(0);
    setSent(false);
    setSaved("");
    try {
      store()?.removeItem(KEY);
    } catch {
      /* ignore */
    }
  };

if (sent) {
    return (
      <div role="status" className="rounded-xl border border-teal-200 bg-teal-50 p-6">
        <h4 className="text-base font-semibold text-teal-950">Request sent</h4>
        <p className="mt-1 text-sm text-teal-900">Thanks, {d.name.split(" ")[0]}. A quote for {d.business} will reach {d.email} within two working days.</p>
        <button type="button" onClick={reset} className="mt-4 h-10 rounded-lg bg-teal-700 px-4 text-sm font-semibold text-white hover:bg-teal-800 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-teal-600 focus-visible:ring-offset-2">
          Start a new request
        </button>
      </div>
    );
  }

return (
    <form noValidate onSubmit={onSubmit} className="grid gap-6 md:grid-cols-[180px_1fr]">
      <ol aria-label="Quote request steps" className="flex gap-4 md:flex-col md:gap-3">
        {F_STEPS.map((s, i) => (
          <li key={s} aria-current={i === step ? "step" : undefined} className="flex items-center gap-2.5 text-sm">
            <span className={"grid h-7 w-7 place-items-center rounded-full text-xs font-semibold " + (i < step ? "bg-teal-700 text-white" : i === step ? "ring-2 ring-teal-700 text-teal-800" : "ring-1 ring-slate-300 text-slate-500")}>
              {i < step ? (
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2.5} strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" className="h-3.5 w-3.5">
                  <path d={CHECK} />
                </svg>
              ) : (
                i + 1
              )}
            </span>
            <span className={i === step ? "font-semibold text-slate-900" : "text-slate-600"}>{s}</span>
          </li>
        ))}
        <li className="ml-auto self-center text-xs text-slate-600 md:ml-0 md:mt-2" aria-live="polite">
          {saved}
        </li>
      </ol>

<div className="min-w-0">
        <h4 ref={heading} tabIndex={-1} className="text-base font-semibold text-slate-900 focus:outline-none">
          {["About you", "About the project", "Check and send"][step]}
        </h4>

{step === 0 && (
          <div className="mt-4 grid gap-4 sm:grid-cols-2">
            <div>
              <label htmlFor="msf-name" className="text-sm font-medium text-slate-800">Full name</label>
              <input id="msf-name" name="name" autoComplete="name" value={d.name} onChange={(e) => set("name", e.target.value)} className={input(errors.name)} {...aria("name")} />
              {err("name")}
            </div>
            <div>
              <label htmlFor="msf-email" className="text-sm font-medium text-slate-800">Email</label>
              <input id="msf-email" name="email" type="email" autoComplete="email" value={d.email} onChange={(e) => set("email", e.target.value)} className={input(errors.email)} {...aria("email")} />
              {err("email")}
            </div>
          </div>
        )}

{step === 1 && (
          <div className="mt-4 grid gap-4 sm:grid-cols-2">
            <div className="sm:col-span-2">
              <label htmlFor="msf-business" className="text-sm font-medium text-slate-800">Business name</label>
              <input id="msf-business" name="business" autoComplete="organization" value={d.business} onChange={(e) => set("business", e.target.value)} className={input(errors.business)} {...aria("business")} />
              {err("business")}
            </div>
            <div>
              <label htmlFor="msf-pages" className="text-sm font-medium text-slate-800">Number of pages</label>
              <select id="msf-pages" name="pages" value={d.pages} onChange={(e) => set("pages", e.target.value)} className={input(errors.pages)} {...aria("pages")}>
                <option value="">Choose</option>
                <option>1 to 3</option>
                <option>4 to 8</option>
                <option>9 or more</option>
              </select>
              {err("pages")}
            </div>
            <fieldset aria-describedby={errors.budget ? "msf-budget-err" : undefined}>
              <legend className="text-sm font-medium text-slate-800">Budget</legend>
              <div className="mt-1.5 flex gap-2">
                {["Under $2k", "$2k to $6k", "$6k+"].map((b, k) => (
                  <label key={b} htmlFor={"msf-budget-" + k} className={"flex h-11 flex-1 cursor-pointer items-center justify-center rounded-lg border px-2 text-center text-xs font-medium has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-teal-600 " + (d.budget === b ? "border-teal-700 bg-teal-50 text-teal-900" : errors.budget ? "border-red-600 text-slate-700" : "border-slate-300 text-slate-700")}>
                    <input id={"msf-budget-" + k} type="radio" name="budget" value={b} checked={d.budget === b} onChange={() => set("budget", b)} className="sr-only" />
                    {b}
                  </label>
                ))}
              </div>
              {err("budget")}
            </fieldset>
            <div className="sm:col-span-2">
              <label htmlFor="msf-notes" className="text-sm font-medium text-slate-800">
                Anything else <span className="font-normal text-slate-600">(optional)</span>
              </label>
              <textarea id="msf-notes" name="notes" rows={2} value={d.notes} onChange={(e) => set("notes", e.target.value)} className="mt-1.5 block w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm text-slate-900 focus:outline-none focus-visible:ring-2 focus-visible:ring-teal-600" />
            </div>
          </div>
        )}

/* ---------- catalogue ---------- */
const ITEMS: Item[] = [
  { f: "form", name: "Multi-step form with saved progress", note: "Validates each step, focuses the first error, and restores the draft after a refresh. Press Continue with empty fields to see it.", Demo: MultiStepForm, code: { react: FORM_REACT }, wide: true },
  { f: "steppers", name: "Horizontal numbered", note: "Completed steps are clickable. Labels give way to a Step 2 of 4 line on phones.", Demo: HorizontalStepper, code: { react: HORIZONTAL_REACT, html: HORIZONTAL_HTML } },
  { f: "steppers", name: "Segmented progress bar", note: "One progressbar with the stage name as its value text.", Demo: ProgressStepper, code: { react: PROGRESS_REACT } },
  { f: "steppers", name: "Vertical with descriptions", note: "Only the current step opens, so a long checklist stays short.", Demo: VerticalStepper, code: { react: VERTICAL_REACT } },
  { f: "steppers", name: "Chevron checkout steps", note: "Arrow segments for flows where any step can be revisited.", Demo: ChevronStepper, code: { react: CHEVRON_REACT } },
  { f: "steppers", name: "Dot stepper for tips", note: "Small dots, full-size tap targets and labels.", Demo: DotStepper, code: { react: DOT_REACT } },
];

const REF: [string, string][] = [
  ["aria-current=\"step\"", "Marks the active item in a list of steps. Put it on exactly one item and move it as the user advances."],
  ["Ordered list", "An ol tells assistive technology how many steps there are and where each one sits, so \"2 of 4\" is announced for free."],
  ["Completed state", "Add hidden text such as \", completed\" next to the check mark, because an icon alone is not read out."],
  ["Focus on step change", "Move focus to the new step's heading (tabIndex -1) so keyboard users start at the top of it and screen readers announce the change."],
  ["Errors", "Set aria-invalid on the field and link the message with aria-describedby, then focus the first field that failed."],
];

const RING = "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-teal-700 focus-visible:ring-offset-2 focus-visible:ring-offset-[#f3f6f7]";

const FAM_KEYS = Object.keys(FAMILIES) as Fam[];

export default function ReactStepperCollection() {
  const [fam, setFam] = useState<Fam | "all">("all");
  const list = ITEMS.map((it, i) => ({ it, n: i + 1 })).filter(({ it }) => fam === "all" || it.f === fam);
  const chip = `inline-flex min-h-[40px] items-center gap-1.5 whitespace-nowrap rounded-full px-3.5 text-[13px] font-medium transition-colors ${RING}`;
  return (
    <section className="bg-[#f3f6f7] px-4 py-12 text-slate-900 sm:px-8 sm:py-14" style={{ fontFamily: '"Inter Tight", Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif' }}>
      <div className="mx-auto max-w-6xl">
        <header className="flex flex-col gap-6 md:flex-row md:items-end md:justify-between">
          <div className="max-w-3xl">
            <p className="font-mono text-[12px] uppercase tracking-[0.18em] text-slate-600">React · Tailwind · no dependencies</p>
            <h2 className="mt-3 text-[32px] font-semibold leading-[1.05] tracking-[-0.03em] sm:text-[44px]">React steppers and a multi-step form</h2>
            <p className="mt-4 max-w-xl text-[15px] leading-relaxed text-slate-600">
              Five stepper layouts and one complete form that checks each step before moving on and keeps its draft if the tab is closed. Try them, then copy the source.
            </p>
          </div>
          <div className="flex flex-wrap gap-1.5" role="group" aria-label="Filter by kind">
            {(["all", ...FAM_KEYS] as const).map((f) => {
              const on = fam === f;
              const count = f === "all" ? ITEMS.length : ITEMS.filter((it) => it.f === f).length;
              return (
                <button key={f} type="button" aria-pressed={on} onClick={() => setFam(f)} className={`${chip} ${on ? "bg-slate-900 text-white" : "bg-white text-slate-700 ring-1 ring-inset ring-slate-300 hover:bg-slate-100"}`}>
                  {f === "all" ? "All" : FAMILIES[f]}
                  <span className={`font-mono text-[11px] ${on ? "opacity-70" : "text-slate-500"}`}>{count}</span>
                </button>
              );
            })}
          </div>
        </header>

<div className="mt-8 h-[1180px] overflow-y-auto overscroll-contain border-t border-slate-300/70 pr-1 pt-6" tabIndex={0} aria-label="Stepper examples and reference">
          <ul className="grid grid-cols-1 gap-4 lg:grid-cols-2">
            {list.map(({ it, n }) => (
              <Card key={n} item={it} n={n} />
            ))}
          </ul>
          <div className="mt-10 rounded-2xl border border-slate-200 bg-white p-5 sm:p-6">
            <h3 className="text-lg font-semibold tracking-tight">Accessible stepper checklist</h3>
            <dl className="mt-4 divide-y divide-slate-100 text-[13px]">
              {REF.map(([a, b]) => (
                <div key={a} className="grid gap-1 py-2.5 sm:grid-cols-[200px_1fr] sm:gap-4">
                  <dt className="font-mono font-semibold text-slate-900">{a}</dt>
                  <dd className="leading-relaxed text-slate-700">{b}</dd>
                </div>
              ))}
            </dl>
          </div>
        </div>
      </div>
    </section>
  );
}
```

{SLIDES[i].h}

{SLIDES[i].h}

Request sent

{["About you", "About the project", "Check and send"][step]}