What a rejected form says at the top of itself.
Import it from rei-kit:
import { ErrorSummary } from 'rei-kit'
Open ErrorSummary in the live documentation, where every prop below is a control you can change, in four materials and ten palettes.
<script setup lang="ts">
import { BaseButton, BaseInput, ErrorSummary, PasswordInput } from 'rei-kit'
import { ref } from 'vue'
const email = ref('')
const password = ref('')
const errors = ref<Record<string, string>>({})
const LABELS: Record<string, string> = { email: 'Email', password: 'Password' }
const fieldId = (field: string) => `signup-${field}`
function submit() {
const found: Record<string, string> = {}
if (!email.value.includes('@')) found['email'] = 'Enter a valid email address'
if (password.value.length < 12) found['password'] = 'Use at least 12 characters'
errors.value = found
}
</script>
<template>
<form class="flex flex-col gap-3" novalidate @submit.prevent="submit">
<!-- Takes focus itself the first time the form is rejected, so the
reader is not left on a button that appeared to do nothing. -->
<ErrorSummary
:errors="errors"
title="There are fields to fix"
:label-for="(field) => LABELS[field] ?? field"
:field-id="fieldId"
:fields="['email', 'password']"
/>
<!-- The same function on both sides: the summary builds the href from it
and each field takes its id from it, so the link lands on the field. -->
<BaseInput
v-model="email"
label="Email"
type="email"
autocomplete="email"
:error="errors['email']"
:field-id="fieldId('email')"
/>
<PasswordInput
v-model="password"
label="Password"
toggle-label="Show password"
autocomplete="new-password"
:error="errors['password']"
:field-id="fieldId('password')"
/>
<BaseButton type="submit" class="self-start">Sign up</BaseButton>
</form>
</template>
| Prop | Type | Required or default | What it is for |
|---|---|---|---|
errors | Readonly<Record<string, string>> | yes | Field name to message, as `fieldErrors` returns it. |
title | string | yes | Heads the summary, e.g. "Düzeltilmesi gereken 2 alan var". Already translated. |
labelFor | (field: string) => string | yes | A field's name as the reader knows it. The kit has no words of its own. |
fieldId | ((field: string) => string) | (field: string) | A field's `id`, to link to. Pass the same one to that `FormField`'s `fieldId`, or the link points at nothing and the reader is left at the top of a form they cannot navigate. |
fields | readonly string[] | undefined | The order to read them in, when the object's own order is not the form's. |
rei-kit is an accessible Vue 3 and Tailwind CSS 4 component library: 106 components, themed by role rather than by colour on three independent axes — ten WCAG-checked palettes, four materials and light or dark, each switched with one attribute. Typed, tested, SSR-safe, no runtime dependencies, MIT.