Resumen de validación.

<form class="ui-sample ui-form ui-validation-context" data-component-context="form-validation"><section class="ui-feedback ui-validation-summary" data-validation-summary="true" role="alert" aria-labelledby="validation-summary-0-title"><svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="9"></circle><path d="M12 7v6M12 17h.01"></path></svg><div><h3 id="validation-summary-0-title">Antes de continuar</h3><ul><li><a href="#validation-summary-0-email">Ingresa un correo válido</a></li><li><a href="#validation-summary-0-terms">Acepta los términos</a></li></ul></div></section><label for="validation-summary-0-email">Correo electrónico<input class="input" id="validation-summary-0-email" type="email" aria-invalid="true" aria-describedby="validation-summary-0-email-error" value=""/><small id="validation-summary-0-email-error">Ingresa un correo con nombre y dominio.</small></label><label class="ui-choice" for="validation-summary-0-terms"><input id="validation-summary-0-terms" type="checkbox" aria-invalid="true"/><span>Acepto los términos y la política de privacidad</span></label><div class="ui-actions"><button class="btn btn--primary" type="submit">Continuar</button><button class="btn btn--secondary" type="button">Guardar borrador</button></div></form>

<form class="ui-sample ui-form ui-validation-context border border-slate-300 bg-white p-4 text-slate-950 grid gap-3" data-component-context="form-validation"><section class="ui-feedback ui-validation-summary grid gap-3" data-validation-summary="true" role="alert" aria-labelledby="validation-summary-0-title"><svg class="h-auto w-full" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="9"></circle><path d="M12 7v6M12 17h.01"></path></svg><div><h3 id="validation-summary-0-title">Antes de continuar</h3><ul class="grid gap-2"><li><a class="underline underline-offset-4" href="#validation-summary-0-email">Ingresa un correo válido</a></li><li><a class="underline underline-offset-4" href="#validation-summary-0-terms">Acepta los términos</a></li></ul></div></section><label for="validation-summary-0-email">Correo electrónico<input class="input border border-slate-400 bg-white px-3 py-2 focus-visible:outline-2 focus-visible:outline-offset-2" id="validation-summary-0-email" type="email" aria-invalid="true" aria-describedby="validation-summary-0-email-error" value=""/><small class="text-sm text-slate-600" id="validation-summary-0-email-error">Ingresa un correo con nombre y dominio.</small></label><label class="ui-choice" for="validation-summary-0-terms"><input class="border border-slate-400 bg-white px-3 py-2 focus-visible:outline-2 focus-visible:outline-offset-2" id="validation-summary-0-terms" type="checkbox" aria-invalid="true"/><span>Acepto los términos y la política de privacidad</span></label><div class="ui-actions"><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><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">Guardar borrador</button></div></form>

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

export interface ValidationSummaryError {
  /** Texto del error, como instrucción («Ingresa un correo válido»). */
  label: string;
  /** Id del campo con el error; el enlace lleva a `#${fieldId}` y el campo queda con `aria-invalid`. */
  fieldId: string;
}

export interface ValidationSummaryProps {
  /** Prefijo de los ids: `${id}-title` y, en los campos por defecto, `${id}-email`, `${id}-email-error` y `${id}-terms`. Usa uno distinto por formulario en la página. */
  id?: string;
  /** Título del resumen; puede decir cuántos campos revisar. */
  title?: string;
  /** Errores del formulario, en el orden de los campos; sin errores no se muestra el resumen. Por defecto, el correo y los términos. */
  errors?: ValidationSummaryError[];
  /** Campos propios del formulario; reemplazan el correo y los términos. Quien lo usa marca con `aria-invalid` cada campo nombrado en `errors`. */
  children?: ReactNode;
  /** Etiqueta visible del campo de correo (campos por defecto, sin `children`). */
  emailLabel?: string;
  /** Nombre del campo en el envío; sin él, un formulario con `action` no manda el correo. */
  emailName?: string;
  /** Correo inicial de un campo no controlado. */
  defaultEmail?: string;
  /** Correo de un campo controlado; va junto con `onEmailChange`. */
  email?: string;
  onEmailChange?: ChangeEventHandler<HTMLInputElement>;
  /** Mensaje bajo el correo cuando `errors` lo incluye. */
  emailError?: string;
  /** Texto de la casilla de aceptación (campos por defecto, sin `children`). */
  termsLabel?: string;
  /** Nombre de la casilla en el envío; sin él, un formulario con `action` no manda la aceptación. */
  termsName?: string;
  /** Estado inicial de una casilla no controlada. */
  defaultTermsChecked?: boolean;
  /** Estado de una casilla controlada; va junto con `onTermsChange`. */
  termsChecked?: boolean;
  onTermsChange?: ChangeEventHandler<HTMLInputElement>;
  /** Texto del botón que envía el formulario. */
  submitLabel?: string;
  /** Texto del botón secundario para guardar sin enviar; vacío lo oculta. */
  saveDraftLabel?: string;
  onSaveDraft?: MouseEventHandler<HTMLButtonElement>;
  /** Desactiva la validación nativa del navegador para que los errores los muestre el resumen. */
  noValidate?: boolean;
  /** Destino del formulario; sin JavaScript, el envío va ahí. */
  action?: string;
  method?: "get" | "post";
  onSubmit?: FormEventHandler<HTMLFormElement>;
  className?: string;
}

/**
 * Resumen de errores al inicio de un formulario, con un enlace a cada campo por corregir; se muestra tras un envío que no pasó la validación.
 *
 * El resumen es una región `role="alert"`. Sin `children` muestra un correo y una casilla de términos: cada uno nombrado en `errors` queda con `aria-invalid`, y el correo muestra su mensaje de error. Con `children`, quien lo usa pone los campos y su `aria-invalid`.
 *
 * @example <ValidationSummary id="registro" title="Revisa 2 campos" defaultEmail="martin@" onSubmit={enviar} />
 * @example <ValidationSummary id="pago" title="Revisa 1 campo" errors={[{ label: "Ingresa el RUT", fieldId: "pago-rut" }]}><label htmlFor="pago-rut">RUT<input className="input" id="pago-rut" aria-invalid="true" /></label></ValidationSummary>
 */
export function ValidationSummary({
  id = "validation-summary-0",
  title = "Antes de continuar",
  errors = [
    { label: "Ingresa un correo válido", fieldId: `${id}-email` },
    { label: "Acepta los términos", fieldId: `${id}-terms` },
  ],
  children,
  emailLabel = "Correo electrónico",
  emailName,
  defaultEmail = "",
  email,
  onEmailChange,
  emailError = "Ingresa un correo con nombre y dominio.",
  termsLabel = "Acepto los términos y la política de privacidad",
  termsName,
  defaultTermsChecked = false,
  termsChecked,
  onTermsChange,
  submitLabel = "Continuar",
  saveDraftLabel = "Guardar borrador",
  onSaveDraft,
  noValidate,
  action,
  method,
  onSubmit,
  className,
}: ValidationSummaryProps) {
  const tituloId = `${id}-title`;
  const correoId = `${id}-email`;
  const terminosId = `${id}-terms`;
  const correoInvalido = errors.some((e) => e.fieldId === correoId);
  const terminosInvalidos = errors.some((e) => e.fieldId === terminosId);
  const errorId = correoInvalido && emailError ? `${correoId}-error` : undefined;
  const correoControlado = email !== undefined && onEmailChange !== undefined;
  const terminosControlados = termsChecked !== undefined && onTermsChange !== undefined;
  return (
    <form
      className={["ui-form ui-validation-context", className].filter(Boolean).join(" ")}
      data-component-context="form-validation"
      noValidate={noValidate}
      action={action}
      method={method}
      onSubmit={onSubmit}
    >
      {errors.length ? (
        <section className="ui-feedback ui-validation-summary" data-validation-summary role="alert" aria-labelledby={title ? tituloId : undefined}>
          <svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="9"></circle><path d="M12 7v6M12 17h.01"></path></svg>
          <div>
            {title ? <h3 id={tituloId}>{title}</h3> : null}
            <ul>
              {errors.map((error, i) => (
                <li key={`${i}-${error.fieldId}`}><a href={`#${error.fieldId}`}>{error.label}</a></li>
              ))}
            </ul>
          </div>
        </section>
      ) : null}
      {children ?? (
        <>
          <label htmlFor={correoId}>
            {emailLabel}
            <input
              className="input"
              id={correoId}
              name={emailName}
              type="email"
              aria-invalid={correoInvalido ? "true" : undefined}
              aria-describedby={errorId}
              {...(correoControlado ? { value: email, onChange: onEmailChange } : { defaultValue: email ?? defaultEmail })}
            />
            {errorId ? <small id={errorId}>{emailError}</small> : null}
          </label>
          <label className="ui-choice" htmlFor={terminosId}>
            <input
              id={terminosId}
              name={termsName}
              type="checkbox"
              aria-invalid={terminosInvalidos ? "true" : undefined}
              {...(terminosControlados ? { checked: termsChecked, onChange: onTermsChange } : { defaultChecked: termsChecked ?? defaultTermsChecked })}
            />
            <span>{termsLabel}</span>
          </label>
        </>
      )}
      <div className="ui-actions">
        <button className="btn btn--primary" type="submit">{submitLabel}</button>
        {saveDraftLabel ? <button className="btn btn--secondary" type="button" onClick={onSaveDraft}>{saveDraftLabel}</button> : null}
      </div>
    </form>
  );
}