NotMessage
Renders the first validation error for a field. Renders nothing when there is no error.
<NotMessage> reads the first error for a field path from form.errorsMap and renders it inline. Nothing is added to the DOM when the field has no error.
Props
path
string required
Dot-separated path to the field whose error should be displayed.
as
string
The HTML element to render as. Defaults to
span.form
NotFormInstance<any>
Explicit instance override. Required when used outside of
<NotForm>.Slot props
Used when you want to fully control how the error renders. When the slot is used, <NotMessage> renders no element of its own.
message
string | undefined
The first active error message for the field.
undefined when there is no error.attributes
object
The attributes passed to
<NotMessage>, forwarded for use on your own root element.Usage
Default
Renders a <span> with the error text. Renders nothing when there is no error.
Change the element
<template>
<NotMessage
path="email"
as="p"
class="text-sm text-error mt-1"
/>
</template>
Any attribute you pass is forwarded to the rendered element.
Custom slot rendering
When you need an icon, wrapper, or different structure — use the default slot. The v-if on message is your responsibility.
<template>
<NotMessage
path="email"
v-slot="{ message }"
as="div"
class="flex items-center gap-1.5 text-sm text-error"
>
<UIcon
name="i-lucide-circle-alert"
class="size-4 shrink-0"
/>
<span>{{ message }}</span>
</NotMessage>
</template>
Singleton
<template>
<NotField
:form="form"
path="email"
v-slot="{ events }"
>
<input
v-model="form.values.email"
v-bind="events"
>
</NotField>
<NotMessage
:form="form"
path="email"
/>
</template>