Formulario por etapas.

<form class="ui-sample ui-form" data-multi-step-form><p>Paso 1 de 3</p><ol><li aria-current="step"><b>1</b><span>Cuenta</span></li><li aria-current="false"><b>2</b><span>Organización</span></li><li><b>3</b><span>Confirmación</span></li></ol><label for="multi-step-form-0">Correo electrónico</label><input class="input" id="multi-step-form-0" type="email"><div><button class="btn btn--secondary" type="button" disabled>Anterior</button><button class="btn btn--primary" type="submit">Continuar</button></div></form>

<form class="ui-sample ui-form border border-slate-300 bg-white p-4 text-slate-950 grid gap-3" data-multi-step-form><p>Paso 1 de 3</p><ol class="grid gap-2"><li aria-current="step"><b>1</b><span>Cuenta</span></li><li aria-current="false"><b>2</b><span>Organización</span></li><li><b>3</b><span>Confirmación</span></li></ol><label for="multi-step-form-0">Correo electrónico</label><input class="input border border-slate-400 bg-white px-3 py-2 focus-visible:outline-2 focus-visible:outline-offset-2" id="multi-step-form-0" type="email"><div><button class="btn btn--secondary border border-slate-950 px-3 py-2 focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed" type="button" disabled>Anterior</button><button class="btn btn--primary border border-slate-950 px-3 py-2 focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed" type="submit">Continuar</button></div></form>

import type { ChangeEventHandler, FormEventHandler, MouseEventHandler, ReactNode } from "react";

export interface MultiStepFormStep {
  /** Nombre corto de la etapa. */
  label: string;
  /** `true` marca la etapa actual (`aria-current="step"`); `false` emite `aria-current="false"`; sin valor no emite el atributo. */
  current?: boolean;
}

export interface MultiStepFormProps {
  /** Etapas del formulario, en orden; una lleva `current: true`. */
  steps?: MultiStepFormStep[];
  /** Texto de avance sobre las etapas; por defecto «Paso N de M» según la etapa actual. */
  progressLabel?: string;
  /** Campos propios de la etapa actual; reemplazan el campo único que arman `label`, `type`, `id` y el valor. */
  children?: ReactNode;
  /** Etiqueta visible del campo de la etapa (campo por defecto, sin `children`). */
  label?: string;
  type?: "email" | "text" | "tel" | "url" | "number" | "password";
  /** Id del campo de la etapa. Usa uno distinto por etapa en la página. */
  id?: string;
  /** Nombre del campo en el envío; sin él, un formulario con `action` no manda el valor. */
  name?: string;
  /** Valor inicial de un campo no controlado. */
  defaultValue?: string;
  /** Valor de un campo controlado; va junto con `onChange`. */
  value?: string;
  onChange?: ChangeEventHandler<HTMLInputElement>;
  /** Texto del botón para volver a la etapa anterior. */
  previousLabel?: string;
  /** Deshabilita el botón «Anterior»; por defecto, sólo en la primera etapa. */
  previousDisabled?: boolean;
  onPrevious?: MouseEventHandler<HTMLButtonElement>;
  /** Texto del botón que envía la etapa. */
  submitLabel?: string;
  /** Destino del formulario; sin JavaScript, cada etapa se envía ahí. */
  action?: string;
  method?: "get" | "post";
  onSubmit?: FormEventHandler<HTMLFormElement>;
  className?: string;
}

/**
 * Formulario dividido en etapas numeradas, con el avance, los campos de la etapa actual y botones para volver o continuar; se usa cuando un trámite pide más datos de los que caben en una pantalla.
 *
 * La etapa actual llega por `steps` (`current: true`); el texto de avance y el estado de «Anterior» se derivan de ella. Una etapa con varios campos los pasa en `children`.
 *
 * @example <MultiStepForm steps={[{ label: "Cuenta", current: true }, { label: "Organización" }, { label: "Confirmación" }]} id="correo" label="Correo electrónico" type="email" />
 * @example <MultiStepForm steps={[{ label: "Cuenta" }, { label: "Organización", current: true }, { label: "Confirmación" }]} id="rut" label="RUT de la organización" type="text" onPrevious={volver} />
 */
export function MultiStepForm({
  steps = [{ label: "Cuenta", current: true }, { label: "Organización", current: false }, { label: "Confirmación" }],
  progressLabel,
  children,
  label = "Correo electrónico",
  type = "email",
  id = "multi-step-form-0",
  name,
  defaultValue,
  value,
  onChange,
  previousLabel = "Anterior",
  previousDisabled,
  onPrevious,
  submitLabel = "Continuar",
  action,
  method,
  onSubmit,
  className,
}: MultiStepFormProps) {
  const actual = steps.findIndex((etapa) => etapa.current === true);
  const avance = progressLabel ?? (actual >= 0 ? `Paso ${actual + 1} de ${steps.length}` : undefined);
  const controlado = value !== undefined && onChange !== undefined;
  return (
    <form className={["ui-form", className].filter(Boolean).join(" ")} data-multi-step-form action={action} method={method} onSubmit={onSubmit}>
      {avance ? <p>{avance}</p> : null}
      {steps.length ? (
        <ol>
          {steps.map((etapa, i) => (
            <li key={`${i}-${etapa.label}`} aria-current={etapa.current === undefined ? undefined : etapa.current ? "step" : "false"}>
              <b>{i + 1}</b>
              <span>{etapa.label}</span>
            </li>
          ))}
        </ol>
      ) : null}
      {children ?? (
        <>
          <label htmlFor={id}>{label}</label>
          <input className="input" id={id} name={name} type={type} {...(controlado ? { value, onChange } : { defaultValue: value ?? defaultValue })} />
        </>
      )}
      <div>
        <button className="btn btn--secondary" type="button" disabled={previousDisabled ?? actual <= 0} onClick={onPrevious}>{previousLabel}</button>
        <button className="btn btn--primary" type="submit">{submitLabel}</button>
      </div>
    </form>
  );
}