Error Summary

Headless Error Summary; covers WCAG 2.2 error identification, focusable validation summaries.

Minimal setup

Use a Vue 3.5+ project with Vue SFC compilation configured (see Vite+ integration).

vp install @vizejs/ui

Add the public import below to <script setup lang="ts">. Components provide behavior without styles; the preview uses optional Paper styles.

import { ErrorSummary } from "@vizejs/ui/error-summary";

Or copy the source into your project with vize lib pull error-summary (see Source Distribution).

Try it

This is the basic example maintained with the component source, using the public package imports. The preview adds the optional Paper styles.

Open the interactive example · Styling these components

Copy the example

<!-- Form that lists invalid fields as links above the form after a failed submit. -->
<script setup lang="ts">
import { ref, shallowRef, useId } from "vue";

import { ErrorSummary, type ErrorSummaryField } from "@vizejs/ui/error-summary";

const nameId = useId();
const emailId = useId();
const name = ref("");
const email = ref("");
const errors = shallowRef<readonly ErrorSummaryField[]>([]);

function submit(): void {
  const next: ErrorSummaryField[] = [];
  if (name.value.trim() === "")
    next.push({ id: nameId, label: "Full name", message: "Enter your name" });
  if (!email.value.includes("@")) {
    next.push({ id: emailId, label: "Email", message: "Enter a valid email address" });
  }
  errors.value = next;
}
</script>

<template>
  <form novalidate @submit.prevent="submit">
    <ErrorSummary :fields="errors" heading="There is a problem" />
    <label :for="nameId">Full name</label>
    <input
      :id="nameId"
      v-model="name"
      autocomplete="name"
      :aria-invalid="errors.some((field) => field.id === nameId)"
    />
    <label :for="emailId">Email</label>
    <input
      :id="emailId"
      v-model="email"
      type="email"
      autocomplete="email"
      :aria-invalid="errors.some((field) => field.id === emailId)"
    />
    <button type="submit">Create account</button>
  </form>
</template>

API

ErrorSummary

Source: src/families/form/error-summary/error-summary.vue

Props

Events

Slots

Exposed

Behavior

Normative state × input → outcome table for error-summary.vue (@vizejs/ui/error-summary). Every row is proven by the named test in src/families/form/error-summary/error-summary.test.ts or src/families/form/error-summary/error-summary-ssr.test.ts; compile-only assertions live in src/families/form/error-summary/error-summary.types.test-d.ts.