---
title: "FieldError"
description: "Display the first validation message from a field, an array field, or an issue list."
canonical_url: "https://notformdocs.vercel.app/docs/components/field-error"
---

> Index of every page on this site: [llms.txt](https://notformdocs.vercel.app/llms.txt)

`FieldError` displays the first message from an issue array, or from any object that has an `errors` array, such as a field, an array field, or an array item. It renders **no element** when there is no message.

## Usage

Pass a field directly:

```vue
<template>
  <Field
    v-slot="{ field }"
    :field="form.field('email')"
  >
    <label :for="field.path">Email</label>

    <input
      v-bind="field.events"
      :id="field.path"
      v-model="field.model"
      type="email"
    >

    <FieldError :errors="field" />
  </Field>
</template>
```

Or pass an issue array:

```vue
<template>
  <FieldError
    :errors="form.errors"
    as="p"
    role="alert"
  />
</template>
```

## Props

<field-group>
<field name="errors" type="ValidationIssue[] | { readonly errors: ValidationIssue[] }" :required="true">

An issue array, or an object with an `errors` array. Only the first message is displayed.

</field>

<field name="as" type="string | Component">

Element or component that renders the message. Defaults to `span`.

</field>
</field-group>

Attributes other than `errors` and `as` are forwarded to the rendered element or component. Use `class`, `id`, `role`, and `aria-*` to match your styling and accessibility needs.

## Slot

The default slot receives `message`. Use it to wrap or decorate the text.

```vue
<template>
  <FieldError
    :errors="field"
    as="p"
    role="alert"
  >
    <template #default="{ message }">
      <strong>Check this value:</strong> {{ message }}
    </template>
  </FieldError>
</template>
```

When `as` is a component, the message is passed as its default slot content. That component must render its default slot.

## Notes

- Which issues a field shows: exactly those at its own path. An issue on a parent path or without a path is not shown. See [Errors](https://notformdocs.vercel.app/docs/guides/errors).
- To display every message, render `field.errors` yourself.
- Pass `:errors="arrayField"` to show array-level issues such as a minimum item count.

## Related

- [Errors guide](https://notformdocs.vercel.app/docs/guides/errors)

## Sitemap

See the full [sitemap](https://notformdocs.vercel.app/sitemap.md) for all pages.