[{"data":1,"prerenderedAt":2073},["ShallowReactive",2],{"navigation":3,"search":75,"$f12k3lmnboe3wd":333,"i-custom:logo":334,"i-tabler:book-2":338,"i-tabler:search":340,"i-tabler:moon":342,"i-tabler:sun":344,"i-simple-icons:github":346,"i-tabler:menu":348,"i-tabler:rocket":350,"i-tabler:package":352,"i-tabler:bolt":354,"i-simple-icons:nuxtdotjs":356,"i-tabler:player-play":358,"i-tabler:robot":360,"i-tabler:code":362,"i-tabler:chevron-down":364,"i-tabler:function":366,"i-tabler:external-link":368,"\u002Fdocs\u002Fcomponents\u002Fnot-message":370,"\u002Fdocs\u002Fcomponents\u002Fnot-message-surround":2050,"i-tabler:copy":2055,"i-tabler:edit":2057,"i-tabler:star":2059,"i-tabler:history":2061,"i-tabler:heart":2063,"i-tabler:alert-square-rounded":2065,"i-tabler:bulb":2067,"i-tabler:info-square-rounded":2069,"i-tabler:hash":2071},[4],{"title":5,"path":6,"stem":7,"children":8,"page":42},"Docs","\u002Fdocs","docs",[9,43,65],{"title":10,"path":11,"stem":12,"children":13,"icon":42},"Getting Started","\u002Fdocs\u002Fgetting-started","docs\u002F1.getting-started\u002F1.index",[14,17,22,27,32,37],{"title":15,"path":11,"stem":12,"icon":16},"Introduction","tabler:rocket",{"title":18,"path":19,"stem":20,"icon":21},"Installation","\u002Fdocs\u002Fgetting-started\u002Finstallation","docs\u002F1.getting-started\u002F2.installation","tabler:package",{"title":23,"path":24,"stem":25,"icon":26},"Quickstart","\u002Fdocs\u002Fgetting-started\u002Fquickstart","docs\u002F1.getting-started\u002F3.quickstart","tabler:bolt",{"title":28,"path":29,"stem":30,"icon":31},"Nuxt Module","\u002Fdocs\u002Fgetting-started\u002Fnuxt-module","docs\u002F1.getting-started\u002F4.nuxt-module","simple-icons:nuxtdotjs",{"title":33,"path":34,"stem":35,"icon":36},"Playground","\u002Fdocs\u002Fgetting-started\u002Fplayground","docs\u002F1.getting-started\u002F5.playground","tabler:player-play",{"title":38,"path":39,"stem":40,"icon":41},"Working with AI","\u002Fdocs\u002Fgetting-started\u002Fworking-with-ai","docs\u002F1.getting-started\u002F6.working-with-ai","tabler:robot",false,{"title":44,"icon":42,"path":45,"stem":46,"children":47,"page":42},"Components","\u002Fdocs\u002Fcomponents","docs\u002F2.components",[48,53,57,61],{"title":49,"path":50,"stem":51,"icon":52},"NotForm","\u002Fdocs\u002Fcomponents\u002Fnot-form","docs\u002F2.components\u002F1.not-form","tabler:code",{"title":54,"path":55,"stem":56,"icon":52},"NotField","\u002Fdocs\u002Fcomponents\u002Fnot-field","docs\u002F2.components\u002F2.not-field",{"title":58,"path":59,"stem":60,"icon":52},"NotMessage","\u002Fdocs\u002Fcomponents\u002Fnot-message","docs\u002F2.components\u002F3.not-message",{"title":62,"path":63,"stem":64,"icon":52},"NotArrayField","\u002Fdocs\u002Fcomponents\u002Fnot-array-field","docs\u002F2.components\u002F4.not-array-field",{"title":66,"icon":42,"path":67,"stem":68,"children":69,"page":42},"Composables","\u002Fdocs\u002Fcomposables","docs\u002F3.composables",[70],{"title":71,"path":72,"stem":73,"icon":74},"useNotForm","\u002Fdocs\u002Fcomposables\u002Fuse-not-form","docs\u002F3.composables\u002F1.use-not-form","tabler:function",[76,80,86,91,96,99,104,109,114,118,121,126,131,136,139,143,148,153,159,164,169,173,176,181,186,191,196,199,204,209,214,218,221,225,229,234,238,244,247,251,254,258,261,265,268,272,277,280,284,287,291,294,298,301,305,308,312,315,318,323,328],{"id":11,"title":15,"titles":77,"content":78,"level":79},[],"Headless, schema-agnostic form management for Vue 3 and Nuxt. NotForm is a lightweight form state and validation library built specifically for the Vue 3 Composition API. NotForm handles the parts of a form that are tedious to build by hand — validation, dirty and touched tracking, per-field triggers, and array manipulation — while staying out of the way of your markup and styling. Most of what NotForm does happens without opinions about your markup. \u003CNotField> and \u003CNotArrayField> are fully renderless — they render nothing of their own, only exposing reactive state and event handlers through their default slot, so you decide entirely what markup represents a field. \u003CNotForm> and \u003CNotMessage> do render something — a native \u003Cform> element and a small error-message element, respectively — but neither ships any styling, and both let you substitute your own markup: \u003CNotForm> accepts native form attributes directly, and \u003CNotMessage>'s as prop lets you swap in your own element or component.",1,{"id":81,"title":82,"titles":83,"content":84,"level":85},"\u002Fdocs\u002Fgetting-started#why-notform","Why NotForm?",[15],"Building forms in Vue usually means choosing between: A UI library that dictates your markup and styling, orA validation library that requires a lot of boilerplate to wire into your components NotForm tries to avoid both trade-offs. It only owns form state — values, errors, touched\u002Fdirty flags, and validation triggers — and leaves rendering entirely up to you. Drop in any Standard Schema compliant validator — Zod, Valibot, ArkType, and more. Swap libraries without touching your form logic.Fields are compared against initial values on every keystroke. Touched and dirty states are managed automatically.Append, prepend, insert, remove, swap, and move array items with stable keys that survive reorders.Field paths and their value types are strictly inferred from your schema. Invalid paths trigger compile-time errors.",2,{"id":87,"title":88,"titles":89,"content":90,"level":85},"\u002Fdocs\u002Fgetting-started#why-standard-schema","Why Standard Schema?",[15],"NotForm doesn't implement its own validation language. Rather than inventing another set of validation rules, it validates against any schema that implements the Standard Schema interface. A form library needs a consistent way to: validate valuesreceive validation issues in a predictable shapesupport asynchronous validation, such as checking username availability against an APIunderstand a schema's input and output types, since a schema can transform data on the way out (e.g. z.coerce.number()) Standard Schema provides exactly that contract, so NotForm only ever talks to your validator through it. That means: The rest of the NotForm API — form.values, form.errors, validate(), submit(), field paths, and so on — stays identical no matter which validator you choose.You can swap validators later without rewriting your forms.Your schema is never mutated or wrapped, so it stays reusable outside of NotForm too. NotForm works with any Standard Schema-compatible validator, including: import { z } from 'zod'\n\nconst schema = z.object({\n  age: z.number().min(18, 'Must be 18 or older'),\n  email: z.email('Invalid email'),\n})\nimport {\n  email,\n  minValue,\n  number,\n  object,\n  string,\n} from 'valibot'\n\nconst schema = object({\n  age: number([minValue(18, 'Must be 18 or older')]),\n  email: string([email('Invalid email')]),\n})\nimport { type } from 'arktype'\n\nconst schema = type({\n  age: 'number>=18',\n  email: 'email',\n}) Pass your schema straight to useNotForm and the rest of the NotForm API — values, errors, submission, and field-level typing — is derived from it automatically.",{"id":92,"title":93,"titles":94,"content":95,"level":85},"\u002Fdocs\u002Fgetting-started#next-steps","Next steps",[15],"Ready to dive in? Try the Playground for a browser-based example.Or continue to Installation to add NotForm to your project. html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}",{"id":19,"title":18,"titles":97,"content":98,"level":79},[],"Add NotForm to your Vue 3 or Vite project. NotForm is distributed as a single npm package, notform, and can be used directly in any Vue 3 application — no build plugin, compiler macro, or bundler configuration required. If you are using Nuxt, skip ahead to the Nuxt section below and use the official Nuxt Module instead of the manual steps here. It handles imports and setup for you.",{"id":100,"title":101,"titles":102,"content":103,"level":85},"\u002Fdocs\u002Fgetting-started\u002Finstallation#install-the-package","Install the package",[18],"NotForm validates values using Standard Schema rather than a validation language of its own. This means NotForm doesn't ship a validator — you bring your own compatible library alongside it. Popular options include Zod, Valibot, and ArkType. Pick one of these (this guide uses zod in its examples) and install it together with notform using your preferred package manager: pnpm add notform zod\nyarn add notform zod\nnpm install notform zod\nbun add notform zod You can replace zod with another Standard Schema-compatible validation library if you prefer. Every code example in these docs uses zod, but nothing about NotForm's API changes based on which validator you choose.",{"id":105,"title":106,"titles":107,"content":108,"level":85},"\u002Fdocs\u002Fgetting-started\u002Finstallation#vue-and-vite","Vue and Vite",[18],"NotForm is designed for Vue 3 and works with standard Vue applications out of the box — there is no application-level setup step, plugin installation, or provider component to configure before you can use it. Once installed, import the components and composables you need directly from notform: \u003Cscript setup lang=\"ts\">\nimport { NotField, NotForm, NotMessage, useNotForm } from 'notform'\nimport { z } from 'zod'\n\nconst schema = z.object({\n  email: z.email('Invalid email'),\n})\n\nconst form = useNotForm({\n  onSubmit(values) {\n    console.log('Form submitted:', values)\n  },\n  schema,\n})\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CNotForm\n    :form=\"form\"\n    @submit=\"form.submit\"\n  >\n    \u003C!-- form fields go here -->\n  \u003C\u002FNotForm>\n\u003C\u002Ftemplate> NotForm follows the normal Vue component model: there is no global registration step, and nothing is installed as a Vue plugin. Import only the pieces you actually use — useNotForm to create the form instance, \u003CNotForm> to provide it to your fields, and \u003CNotField> \u002F \u003CNotArrayField> \u002F \u003CNotMessage> for the fields themselves. The full breakdown of this example — defining a schema, wiring up individual fields, and displaying validation messages — is covered step by step in Quickstart.",{"id":110,"title":111,"titles":112,"content":113,"level":85},"\u002Fdocs\u002Fgetting-started\u002Finstallation#nuxt","Nuxt",[18],"For Nuxt applications, use the Nuxt Module rather than manually installing and importing notform as shown above. The module installs the package for you, registers every component and composable as a Nuxt auto-import, and wires up type support — so you can start writing \u003CNotForm> and useNotForm directly in your .vue files without an import statement.",{"id":115,"title":93,"titles":116,"content":117,"level":85},"\u002Fdocs\u002Fgetting-started\u002Finstallation#next-steps",[18],"NotForm is now installed and ready to use in your project. Continue to Quickstart to build your first form end-to-end: defining a schema, initializing the form, rendering fields, and displaying validation errors. html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}",{"id":24,"title":23,"titles":119,"content":120,"level":79},[],"Build a fully typed login form with validation in minutes. This guide walks you through building a simple login form using the useNotForm composable and NotForm's headless components. Prefer experimenting in your browser with zero setup? You can test ideas directly in the interactive Playground. Here is the login form we will be building. Try submitting the form empty, or typing an invalid email, to see the validation in action.",{"id":122,"title":123,"titles":124,"content":125,"level":85},"\u002Fdocs\u002Fgetting-started\u002Fquickstart#step-by-step","Step-by-step",[23],"Define the SchemaFirst, define your validation schema using a Standard Schema compliant library (this guide uses zod). The schema describes both fields the login form needs — email and password — along with the rules each must satisfy.import { z } from 'zod'\n\nconst schema = z.object({\n  email: z.email('Enter a valid email'),\n  password: z.string('Invalid input').min(8, 'At least 8 characters'),\n})\nThis schema is the single source of truth for the form: it decides the shape of form.values, drives which field paths are valid to use with \u003CNotField>, and produces the validation messages you'll render later with \u003CNotMessage>.Initialize the FormUse the useNotForm composable to create your form instance. Pass in the schema you just defined and an onSubmit handler that runs once validation succeeds.const form = useNotForm({\n  async onSubmit(data) {\n    \u002F\u002F `data` is fully typed as { email: string, password: string }\n    console.log('Form submitted:', data)\n  },\n  schema,\n})\nform is the reactive object every other piece of this guide plugs into — \u003CNotForm> reads it for context, \u003CNotField> reads and writes to form.values, and \u003CNotMessage> reads validation errors from it.Render the FormUse the \u003CNotForm> component to wrap your form and pass it the form instance via the form prop. \u003CNotForm> renders a native \u003Cform> element and automatically prevents the browser's default submit and reset behavior, so binding @submit=\"form.submit\" and @reset=\"form.reset()\" is all you need — no event.preventDefault() required.\u003Ctemplate>\n  \u003CNotForm\n    :form=\"form\"\n    @submit=\"form.submit\"\n    @reset=\"form.reset()\"\n  >\n    \u003C!-- Fields will go here -->\n\n    \u003Cbutton\n      type=\"submit\"\n      :disabled=\"form.isSubmitting\"\n    >\n      Submit\n    \u003C\u002Fbutton>\n  \u003C\u002FNotForm>\n\u003C\u002Ftemplate>\nConnect the FieldsWrap each input in a \u003CNotField> component. Its default slot exposes two things you'll use on every field: path, a stable string ID for that field (handy for \u003Clabel for>, the input's id, and \u003CNotMessage>), and events, a set of handlers that track interaction and trigger validation. Spread events onto the input with v-bind — by default this wires up validation on blur and on change, so errors appear once the user leaves the field or edits it, not on every keystroke.Add both fields from the schema — email and password — the same way:\u003Ctemplate>\n  \u003CNotField\n    v-slot=\"{ events, path }\"\n    path=\"email\"\n  >\n    \u003Cdiv>\n      \u003Clabel :for=\"path\">Email\u003C\u002Flabel>\n\n      \u003Cinput\n        :id=\"path\"\n        v-model=\"form.values.email\"\n        v-bind=\"events\"\n        type=\"email\"\n      >\n\n      \u003CNotMessage :path=\"path\" \u002F>\n    \u003C\u002Fdiv>\n  \u003C\u002FNotField>\n\n  \u003CNotField\n    v-slot=\"{ events, path }\"\n    path=\"password\"\n  >\n    \u003Cdiv>\n      \u003Clabel :for=\"path\">Password\u003C\u002Flabel>\n\n      \u003Cinput\n        :id=\"path\"\n        v-model=\"form.values.password\"\n        v-bind=\"events\"\n        type=\"password\"\n      >\n\n      \u003CNotMessage :path=\"path\" \u002F>\n    \u003C\u002Fdiv>\n  \u003C\u002FNotField>\n\u003C\u002Ftemplate>\n\u003CNotMessage> automatically displays the first active validation error for the given path, and renders nothing when that field has no errors — there's no need to write your own v-if around it.",{"id":127,"title":128,"titles":129,"content":130,"level":85},"\u002Fdocs\u002Fgetting-started\u002Fquickstart#putting-it-together","Putting it together",[23],"With both fields wired in place of the comment from the \"Render the Form\" step, you have a complete, fully typed, validating login form: submitting with empty or invalid values shows inline errors, and submitting with valid values calls onSubmit with typed, validated data.",{"id":132,"title":133,"titles":134,"content":135,"level":85},"\u002Fdocs\u002Fgetting-started\u002Fquickstart#next-steps","Next Steps",[23],"To learn more about how NotForm integrates into your Vue applications, check out the Components guide for the full API of \u003CNotForm>, \u003CNotField>, \u003CNotArrayField>, and \u003CNotMessage>, or deep dive into Composables to see everything form exposes beyond submit and reset. html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}",{"id":29,"title":28,"titles":137,"content":138,"level":79},[],"Seamless integration with Nuxt 4, featuring auto-imports and zero configuration. notform-nuxt is the official Nuxt module for NotForm. It wraps the manual installation steps covered in Installation into a single Nuxt module: instead of importing useNotForm, \u003CNotForm>, \u003CNotField>, \u003CNotArrayField>, and \u003CNotMessage> yourself in every file, the module registers them as Nuxt auto-imports, injects their types globally, and confirms they work correctly with Nuxt's SSR rendering — all with no extra configuration on your part. This page assumes you're building a Nuxt application. If you're using plain Vue or Vite instead, follow Installation — notform-nuxt is Nuxt-only.",{"id":140,"title":18,"titles":141,"content":142,"level":85},"\u002Fdocs\u002Fgetting-started\u002Fnuxt-module#installation",[28],"The module is published to the official Nuxt Modules Registry, so it can be added with a single Nuxt CLI command rather than installing the package and editing nuxt.config.ts by hand: npx nuxi module add notform\npnpm dlx nuxi module add notform\nbunx nuxi module add notform\nyarn dlx nuxi module add notform This command installs notform-nuxt and adds it to the modules array in your nuxt.config.ts automatically. It does not install a validation library for you — NotForm still validates through Standard Schema, so you need to add one yourself (e.g. zod), the same as in the manual Installation guide. npm install zod\npnpm add zod\nbun add zod\nyarn add zod",{"id":144,"title":145,"titles":146,"content":147,"level":85},"\u002Fdocs\u002Fgetting-started\u002Fnuxt-module#manual-setup","Manual Setup",[28],"If you'd rather not use the Nuxt CLI — for example, in a monorepo where you manage nuxt.config.ts by hand, or in a restricted environment where nuxi module add can't reach the registry — you can install and register the module yourself. Add the dependency: npm add notform-nuxt\npnpm add notform-nuxt\nbun add notform-nuxt\nyarn add notform-nuxt Then add it to your nuxt.config.ts: export default defineNuxtConfig({\n  modules: ['notform-nuxt'],\n}) This has the exact same effect as running the CLI command above — the module doesn't behave any differently depending on how it was registered.",{"id":149,"title":150,"titles":151,"content":152,"level":85},"\u002Fdocs\u002Fgetting-started\u002Fnuxt-module#features","Features",[28],"",{"id":154,"title":155,"titles":156,"content":157,"level":158},"\u002Fdocs\u002Fgetting-started\u002Fnuxt-module#auto-imports","Auto-imports",[28,150],"Once the module is registered, every core component and composable is available globally in your .vue files, without an import statement. Compare the manual setup from Installation: \u003Cscript setup lang=\"ts\">\nimport { NotField, NotForm, NotMessage, useNotForm } from 'notform'\nimport { z } from 'zod'\n\nconst form = useNotForm({ \u002F* ... *\u002F })\n\u003C\u002Fscript> to the same file with notform-nuxt installed: \u003Cscript setup lang=\"ts\">\nimport { z } from 'zod'\n\nconst form = useNotForm({ \u002F* ... *\u002F })\n\u003C\u002Fscript> useNotForm, \u003CNotForm>, \u003CNotField>, \u003CNotArrayField>, and \u003CNotMessage> are all resolved automatically — only your validation library still needs a manual import, since that's a separate package the module doesn't own.",3,{"id":160,"title":161,"titles":162,"content":163,"level":158},"\u002Fdocs\u002Fgetting-started\u002Fnuxt-module#type-safety","Type Safety",[28,150],"Auto-imported components and composables still carry their full generic types. useNotForm\u003CTSchema> infers TSchema from the schema you pass it exactly as it would with a manual import, so form.values is typed to your schema's shape, and field path props are checked against it — all without a types array entry or a manual reference to the notform package in your project.",{"id":165,"title":166,"titles":167,"content":168,"level":158},"\u002Fdocs\u002Fgetting-started\u002Fnuxt-module#server-side-rendering-ssr","Server-side Rendering (SSR)",[28,150],"NotForm works with Nuxt's SSR rendering: the form's initial state is computed consistently on both the server-rendered HTML and the client-side Vue instance that takes over from it, so values and validation state don't flash, reset, or mismatch during hydration.",{"id":170,"title":93,"titles":171,"content":172,"level":85},"\u002Fdocs\u002Fgetting-started\u002Fnuxt-module#next-steps",[28],"The Nuxt module changes how NotForm's pieces are imported, but not how they're used. Continue to Quickstart to build your first form — every example there works identically whether you installed NotForm manually or through this module, just without the import line for NotForm itself. html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}",{"id":34,"title":33,"titles":174,"content":175,"level":79},[],"Interactive Vue 3 form playground for NotForm. Edit forms, test schema validation and dynamic fields, and share reproducible examples in your browser. Ready to try it right away? Open the interactive Playground. The NotForm Playground is a browser-based Vue 3 REPL for building small forms, experimenting with NotForm, and sharing reproducible examples without creating a local project.",{"id":177,"title":178,"titles":179,"content":180,"level":85},"\u002Fdocs\u002Fgetting-started\u002Fplayground#whats-included","What's included",[33],"The default environment includes: Vue 3 with the Vue REPL's Monaco editor and TypeScript supportNotForm core and Zod through the built-in import mapThe NotForm, NotField, NotArrayField, NotMessage, and useNotForm APIsTailwind CSS and shadcn-vue color tokens for quick styling in the live previewAn editable import map for replacing browser-resolved dependenciesShareable state encoded in the URL, with the last local session restored when no shared state is present The playground starts from a working form example with field validation, submission state, and a dynamic array field.",{"id":182,"title":183,"titles":184,"content":185,"level":85},"\u002Fdocs\u002Fgetting-started\u002Fplayground#reproduce-an-issue","Reproduce an issue",[33],"Use the playground when an issue can be reduced to a small Vue example: Open the Playground.Reduce the example until only the behavior needed to demonstrate the issue remains.Click Share to copy the current playground URL.Include that URL in the issue or pull request. Because the editor state is part of the URL, the shared link opens the same files and configuration instead of relying on a separate repository or local setup. A playground link should be a minimal reproduction. Keep secrets, private API keys, and production data out of examples you share.",{"id":187,"title":188,"titles":189,"content":190,"level":85},"\u002Fdocs\u002Fgetting-started\u002Fplayground#test-a-pull-request","Test a pull request",[33],"NotForm publishes preview packages for pull requests through pkg.pr.new. That makes it possible to test a change in the browser before it is merged. After the preview job finishes, copy the pkg.pr.new package URL from the pull request comment. For example: https:\u002F\u002Fpkg.pr.new\u002Fnotform@[pr-number] The browser playground resolves packages through esm.sh, which supports pkg.pr.new packages through its \u002Fpr\u002F URL form. Replace the playground's notform import-map entry with: https:\u002F\u002Fesm.sh\u002Fpr\u002Fnotform@[pr-number]?external=vue Keep the playground's existing vue import-map entry unchanged. The external=vue query leaves Vue as a bare import so the preview package uses the same Vue runtime as the playground. Then exercise the changed behavior, and share the resulting playground URL with the PR so the exact browser example can be reviewed. The playground is a manual\u002Fbrowser verification tool. It does not replace the project's Vitest suite, typecheck, lint, build, or other CI checks.",{"id":192,"title":193,"titles":194,"content":195,"level":85},"\u002Fdocs\u002Fgetting-started\u002Fplayground#what-the-playground-does-not-provide","What the playground does not provide",[33],"The REPL does not provide a full Node.js or Nuxt environment. Dependencies are resolved through the import map and browser-compatible CDNs, so server-only APIs, filesystem access, and package-manager workflows are outside its scope. For repository-level changes, keep the source tests and local validation as the source of truth, and use the playground or the Vue 3 and Nuxt Module stackblitz templates when a visual or browser reproduction makes the behavior easier to verify. html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}",{"id":39,"title":38,"titles":197,"content":198,"level":79},[],"How to feed NotForm documentation to LLMs and AI coding assistants. Most AI coding assistants were trained before NotForm existed, so left to their own knowledge, they're likely to guess at an API that doesn't match this library — inventing prop names, mixing up which component owns which slot prop, or reaching for patterns from other form libraries entirely. The fix is to point the assistant at NotForm's actual documentation before it writes any code, rather than letting it rely on memory. This documentation site is built with nuxt-llms, which automatically generates plain-text versions of these docs, stripped of navigation, styling, and page chrome, following the emerging llms.txt convention that AI tools are increasingly able to consume directly.",{"id":200,"title":201,"titles":202,"content":203,"level":85},"\u002Fdocs\u002Fgetting-started\u002Fworking-with-ai#usage","Usage",[38],"For most requests, point the assistant at llms.txt. It's an index of every page in this documentation, organized the same way as the sidebar — Getting Started, Components, Composables — with a link to each page's raw content: https:\u002F\u002Fnotformdocs.vercel.app\u002Fllms.txt An assistant that can follow links will read the index, pick out the pages relevant to the task (for example, not-array-field.md for a dynamic list of fields), and fetch only those — rather than needing the entire documentation set in context for every request.",{"id":205,"title":206,"titles":207,"content":208,"level":158},"\u002Fdocs\u002Fgetting-started\u002Fworking-with-ai#full-documentation","Full Documentation",[38,201],"Some assistants and workflows can't follow links from a fetched file, or the task genuinely spans enough of NotForm that fetching pages one at a time is slower than just providing everything up front. For those cases, use the full documentation file instead — every page's content, already concatenated into one file: https:\u002F\u002Fnotformdocs.vercel.app\u002Fllms-full.txt llms-full.txt is a large file. It's the right choice when the assistant can't follow links, or when a task genuinely spans multiple components or composables — but for a single straightforward field or form, llms.txt plus a link-following assistant is usually enough, and keeps its context focused.",{"id":210,"title":211,"titles":212,"content":213,"level":158},"\u002Fdocs\u002Fgetting-started\u002Fworking-with-ai#example-prompt","Example Prompt",[38,201],"You can use a prompt like this in your AI editor: \"I need to build a user settings form with a dynamic array of email addresses. Please read the documentation at https:\u002F\u002Fnotformdocs.vercel.app\u002Fllms.txt to understand how to use NotForm's \u003CNotArrayField> and useNotForm API before writing the Vue component.\" Naming the specific components you expect to need — here, \u003CNotArrayField> and useNotForm — helps the assistant focus on the relevant parts of the documentation rather than summarizing the whole library back to you.",{"id":215,"title":93,"titles":216,"content":217,"level":85},"\u002Fdocs\u002Fgetting-started\u002Fworking-with-ai#next-steps",[38],"This is the last stop in Getting Started. From here, the Components guide covers the full API of every component referenced throughout these guides, and Composables covers everything the form instance from useNotForm exposes. html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}",{"id":50,"title":49,"titles":219,"content":220,"level":79},[],"The root form component that provides context and handles submit\u002Freset events. \u003CNotForm> is the root component that wraps your form. It provides the form instance to all descendant field components via Vue's provide\u002Finject, so you don't need to pass a form prop to every \u003CNotField> and \u003CNotArrayField> individually, and it wires up the native submit and reset events on your behalf. \u003CNotForm> is a convenience, not a requirement. Every field component also accepts an explicit form prop, which takes priority over \u003CNotForm>'s context and is required if you render fields without a \u003CNotForm> ancestor at all. Under the hood, \u003CNotForm> renders a native \u003Cform> element, and it automatically: Prevents the browser's default full-page navigation on submit and default field-clearing on reset — both would otherwise happen before any of your own logic runs, so this hands control back to you.Provides the form instance to descendant \u003CNotField> and \u003CNotArrayField> components. Because the underlying element is native, it does not clear validation errors or restore values by itself — that's what form.reset() does. \u003CNotForm> only stops the browser from doing its own, separate reset first. This is why the usage example below still binds @submit=\"form.submit\" and @reset=\"form.reset()\" explicitly: \u003CNotForm> clears the way for those calls to run, but doesn't make them for you. Because it's still a real \u003Cform> element, other native behavior keeps working as expected: Native form attributes like action, method, and enctype can be set directly on \u003CNotForm> and pass through.Submitting with the keyboard (pressing Enter in a text field) and assistive technology both work the same as with a plain \u003Cform>.Native HTML validation attributes (required, pattern, minlength, and so on) still trigger the browser's built-in validation UI alongside NotForm's own. If you only want NotForm's validation messages to show, add novalidate to suppress the browser's.",{"id":222,"title":201,"titles":223,"content":224,"level":85},"\u002Fdocs\u002Fcomponents\u002Fnot-form#usage",[49],"A typical form setup involves passing a form instance to \u003CNotForm> via the form prop, then wrapping your fields in its default slot. \u003Cscript setup lang=\"ts\">\nimport { NotForm, useNotForm } from 'notform'\nimport { z } from 'zod'\n\nconst schema = z.object({\n  email: z.email('Invalid email'),\n  password: z.string().min(8, 'Password must be at least 8 characters'),\n})\n\nconst form = useNotForm({\n  onSubmit(values) {\n    console.log('Form submitted:', values)\n  },\n  schema,\n})\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CNotForm\n    :form=\"form\"\n    @submit=\"form.submit\"\n    @reset=\"form.reset()\"\n  >\n    \u003C!-- Form fields go here -->\n    \u003Cbutton\n      type=\"submit\"\n      :disabled=\"form.isSubmitting\"\n    >\n      Submit\n    \u003C\u002Fbutton>\n\n    \u003Cbutton type=\"reset\">\n      Reset\n    \u003C\u002Fbutton>\n  \u003C\u002FNotForm>\n\u003C\u002Ftemplate>",{"id":226,"title":227,"titles":228,"content":152,"level":85},"\u002Fdocs\u002Fcomponents\u002Fnot-form#api","API",[49],{"id":230,"title":231,"titles":232,"content":233,"level":158},"\u002Fdocs\u002Fcomponents\u002Fnot-form#props","Props",[49,227],"Form instance provided to descendant field components.This is the same instance returned by useNotForm. \u003CNotForm> makes it available to every \u003CNotField> and \u003CNotArrayField> beneath it, without needing to repeat it as a prop on each one.",{"id":235,"title":236,"titles":237,"content":152,"level":158},"\u002Fdocs\u002Fcomponents\u002Fnot-form#slots","Slots",[49,227],{"id":239,"title":240,"titles":241,"content":242,"level":243},"\u002Fdocs\u002Fcomponents\u002Fnot-form#default","default",[49,227,236],"The default slot for housing your form fields. \u003Ctemplate>\n  \u003CNotForm\n    :form=\"form\"\n    @submit=\"form.submit\"\n    @reset=\"form.reset()\"\n  >\n    \u003C!-- Form fields go here -->\n  \u003C\u002FNotForm>\n\u003C\u002Ftemplate> Unlike \u003CNotField> and \u003CNotArrayField>, this slot receives no slot props — there's no v-slot to bind here. \u003CNotForm> only provides the form instance to descendants via context; to read form-level state like form.isSubmitting or form.isValid inside the slot, reference the form instance directly, as shown in the Usage example above. html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}",4,{"id":55,"title":54,"titles":245,"content":246,"level":79},[],"Renderless component for individual form fields with validation state and event handlers. \u003CNotField> is a renderless component that connects an individual field to NotForm's validation and state management. It provides the field's current state, validation errors, and event handlers that can be bound to native inputs or custom form components.",{"id":248,"title":201,"titles":249,"content":250,"level":85},"\u002Fdocs\u002Fcomponents\u002Fnot-field#usage",[54],"A typical field combines the slot props with a form input and \u003CNotMessage>.",{"id":252,"title":227,"titles":253,"content":152,"level":85},"\u002Fdocs\u002Fcomponents\u002Fnot-field#api",[54],{"id":255,"title":231,"titles":256,"content":257,"level":158},"\u002Fdocs\u002Fcomponents\u002Fnot-field#props",[54,227],"Dot path of this field. It identifies the value managed by the field.Fields on a top-level property use a single property name:\u003Ctemplate>\n  \u003CNotField path=\"email\">\n    ...\n  \u003C\u002FNotField>\n\u003C\u002Ftemplate>\nNested fields use dot notation:\u003Ctemplate>\n  \u003CNotField path=\"user.email\">\n    ...\n  \u003C\u002FNotField>\n\u003C\u002Ftemplate>\nThe same path is exposed through the default slot and can be used for labels, IDs, messages, and other field-specific elements.Form instance. Overrides \u003CNotForm> inject.By default, \u003CNotField> uses the form instance provided by a surrounding \u003CNotForm>.You can explicitly provide a form instance when needed:\u003Ctemplate>\n  \u003CNotField\n    v-slot=\"{ events }\"\n    :form=\"form\"\n    path=\"email\"\n  >\n    \u003Cinput v-bind=\"events\">\n  \u003C\u002FNotField>\n\u003C\u002Ftemplate>\nAn explicit form takes priority over the form provided by a \u003CNotForm> ancestor.This is also required when using \u003CNotField> as a standalone field outside of a \u003CNotForm>.Validation triggers merged over defaults: { onBlur: true, onChange: true }.This allows individual validation triggers to be overridden for a field.Only the triggers you specify are overridden; all other trigger settings remain unchanged.\u003Ctemplate>\n  \u003CNotField\n    path=\"username\"\n    :validate-on=\"{ onInput: true }\"\n  \u002F>\n\u003C\u002Ftemplate>\nFor example, in addition to the defaults, the field above will additionally validate on input.onMount is also a valid trigger, even though it has no corresponding entry in events below — there's no DOM event to bind for \"the field just appeared,\" so instead it's opted into here and runs automatically once, when the field is created. This is useful for surfacing validation issues on a prefilled value without waiting for the user to interact with the field:\u003Ctemplate>\n  \u003CNotField\n    path=\"promoCode\"\n    :validate-on=\"{ onMount: true }\"\n  \u002F>\n\u003C\u002Ftemplate>\nControls how aggressively a field revalidates after it's been touched: lazy waits for the next blur or submit, eager also revalidates as the user types.Defaults to eager.In eager mode, once a field has an issue, it revalidates on every change\u002Finput event (subject to validateOn and debounce) so the error can clear as soon as the user fixes it. Until a field is invalid, change\u002Finput events are ignored — validation only starts once blur or submit produces the first issue.In lazy mode, validation only runs on blur and submit, no matter how many issues are present. This produces less noise for fields where feedback on every keystroke isn't wanted.validateOn and validationMode control different things: validateOn decides which interactions are allowed to trigger validation at all, while validationMode decides how often those allowed triggers actually fire once the field already has an issue. Setting validateOn: { onInput: true } with validationMode=\"lazy\", for instance, still won't revalidate on every keystroke — lazy only revalidates on blur or submit regardless of which triggers validateOn allows.Delays input- and change-triggered validation until the user stops interacting with the field for the specified number of milliseconds.Omit or set to 0 to disable.This is particularly useful for asynchronous validation, where validating on every keystroke could result in excessive requests.\u003Ctemplate>\n  \u003CNotField\n    v-slot=\"{ events }\"\n    path=\"username\"\n    :debounce=\"400\"\n  >\n    \u003Cinput\n      v-model=\"form.values.username\"\n      v-bind=\"events\"\n    >\n  \u003C\u002FNotField>\n\u003C\u002Ftemplate>\nBlur and submit-triggered validation are always run immediately and are never delayed by debounce.",{"id":259,"title":236,"titles":260,"content":152,"level":158},"\u002Fdocs\u002Fcomponents\u002Fnot-field#slots",[54,227],{"id":262,"title":240,"titles":263,"content":264,"level":243},"\u002Fdocs\u002Fcomponents\u002Fnot-field#default",[54,227,236],"The default slot receives the complete field state and event handlers. \u003Ctemplate>\n  \u003CNotField\n    v-slot=\"slotProps\"\n    path=\"email\"\n  >\n    ...\n  \u003C\u002FNotField>\n\u003C\u002Ftemplate> Dot path of this field.Useful for labels, inputs, IDs, messages, and other field-specific elements.\u003Ctemplate>\n  \u003CNotField\n    v-slot=\"{ path }\"\n    path=\"email\"\n  >\n    \u003Clabel :for=\"path\">Email\u003C\u002Flabel>\n    \u003Cinput :id=\"path\">\n  \u003C\u002FNotField>\n\u003C\u002Ftemplate>\nValidation issues for this field path.It contains all validation issues reported for the field during the most recent validation run.\u003Ctemplate>\n  \u003CNotField\n    v-slot=\"{ errors }\"\n    path=\"email\"\n  >\n    \u003Cinput v-model=\"form.values.email\">\n\n    \u003Cul v-if=\"errors.length > 0\">\n      \u003Cli\n        v-for=\"error in errors\"\n        :key=\"error.message\"\n      >\n        {{ error.message }}\n      \u003C\u002Fli>\n    \u003C\u002Ful>\n  \u003C\u002FNotField>\n\u003C\u002Ftemplate>\nWhether this field has no issues.It is true if the field has no issues and false otherwise.\u003Ctemplate>\n  \u003CNotField\n    v-slot=\"{ isValid }\"\n    path=\"email\"\n  >\n    \u003Cspan v-if=\"isValid\">Valid\u003C\u002Fspan>\n  \u003C\u002FNotField>\n\u003C\u002Ftemplate>\nWhether the user has interacted with this field.This can be useful for displaying validation feedback only after the user has interacted with the field:\u003Ctemplate>\n  \u003CNotField\n    v-slot=\"{ isTouched, isValid, events }\"\n    path=\"email\"\n  >\n    \u003Cinput\n      v-model=\"form.values.email\"\n      v-bind=\"events\"\n    >\n\n    \u003Cp v-if=\"isTouched && !isValid\">\n      Please enter a valid email address.\n    \u003C\u002Fp>\n  \u003C\u002FNotField>\n\u003C\u002Ftemplate>\nWhether the value differs from the baseline.\u003Ctemplate>\n  \u003CNotField\n    v-slot=\"{ isDirty }\"\n    path=\"email\"\n  >\n    \u003Cspan v-if=\"isDirty\">Unsaved changes\u003C\u002Fspan>\n  \u003C\u002FNotField>\n\u003C\u002Ftemplate>\nWhether this field is currently validating.\u003Ctemplate>\n  \u003CNotField\n    v-slot=\"{ isValidating }\"\n    path=\"username\"\n  >\n    \u003Cspan v-if=\"isValidating\">\n      Checking username...\n    \u003C\u002Fspan>\n  \u003C\u002FNotField>\n\u003C\u002Ftemplate>\nHandlers to bind to the input.These handlers are used to track field interaction and trigger validation.onMount is excluded here even though it's a valid validateOn trigger — see the note on validateOn above for why.Binding all events:For native inputs, the simplest approach is to spread the handlers:\u003Ctemplate>\n  \u003CNotField\n    v-slot=\"{ events, path }\"\n    path=\"email\"\n  >\n    \u003Clabel :for=\"path\">Email\u003C\u002Flabel>\n\n    input\n    :id=\"path\"\n    v-model=\"form.values.email\"\n    v-bind=\"events\"\n    type=\"email\"\n    >\n  \u003C\u002FNotField>\n\u003C\u002Ftemplate>\nBinding individual events:For custom components, bind the relevant handlers individually:\u003Ctemplate>\n  \u003CNotField\n    v-slot=\"{ events }\"\n    path=\"country\"\n  >\n    \u003CCustomCombobox\n      @focusout=\"events.onBlur\"\n      @pick=\"events.onChange\"\n    \u002F>\n  \u003C\u002FNotField>\n\u003C\u002Ftemplate>\nThe handlers don't require the original DOM event as an argument. They simply notify \u003CNotField> that the corresponding interaction occurred. html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}",{"id":59,"title":58,"titles":266,"content":267,"level":79},[],"Component for displaying validation errors for a specific field. \u003CNotMessage> is a component for displaying the validation error message for a specific field. It automatically displays the first active validation error for the field and renders nothing when the field has no validation errors. Unlike \u003CNotField> and \u003CNotArrayField>, \u003CNotMessage> is not renderless — by default it renders a \u003Cspan> element containing the error text, and it can be swapped for a different element or component with the as prop, covered below.\"Renders nothing when there are no errors\" is literal here: the wrapping element itself is not rendered at all while the field has no active error, rather than being rendered empty. There's nothing in the DOM to select or style until there's a message to show.",{"id":269,"title":201,"titles":270,"content":271,"level":85},"\u002Fdocs\u002Fcomponents\u002Fnot-message#usage",[58],"The most common usage is alongside a \u003CNotField>: \u003Ctemplate>\n  \u003CNotField\n    v-slot=\"{ events, path }\"\n    path=\"email\"\n  >\n    \u003Clabel :for=\"path\">Email\u003C\u002Flabel>\n\n    \u003Cinput\n      :id=\"path\"\n      v-model=\"form.values.email\"\n      v-bind=\"events\"\n      type=\"email\"\n    >\n\n    \u003CNotMessage :path=\"path\" \u002F>\n  \u003C\u002FNotField>\n\u003C\u002Ftemplate> When validation fails, \u003CNotMessage> displays the first validation error associated with the email field, and nothing when there are no active validation errors.",{"id":273,"title":274,"titles":275,"content":276,"level":158},"\u002Fdocs\u002Fcomponents\u002Fnot-message#displaying-multiple-errors","Displaying Multiple Errors",[58,201],"\u003CNotMessage> intentionally displays only the first active validation error. If you need to display every validation issue for a field, use the field's errors slot prop instead: \u003Ctemplate>\n  \u003CNotField\n    v-slot=\"{ events, path, errors }\"\n    path=\"email\"\n  >\n    \u003Cinput\n      :id=\"path\"\n      v-model=\"form.values.email\"\n      v-bind=\"events\"\n      type=\"email\"\n    >\n\n    \u003Cdiv v-if=\"errors.length > 0\">\n      \u003Cp\n        v-for=\"(error, index) in errors\"\n        :key=\"index\"\n      >\n        {{ error.message }}\n      \u003C\u002Fp>\n    \u003C\u002Fdiv>\n  \u003C\u002FNotField>\n\u003C\u002Ftemplate> This gives you the complete list of validation issues instead of only the first message.",{"id":278,"title":227,"titles":279,"content":152,"level":85},"\u002Fdocs\u002Fcomponents\u002Fnot-message#api",[58],{"id":281,"title":231,"titles":282,"content":283,"level":158},"\u002Fdocs\u002Fcomponents\u002Fnot-message#props",[58,227],"Field path whose first error message is shown.It supports the same dot-separated paths used by \u003CNotField>:\u003Ctemplate>\n  \u003CNotMessage path=\"email\" \u002F>\n\u003C\u002Ftemplate>\nFor nested fields:\u003Ctemplate>\n  \u003CNotMessage path=\"user.email\" \u002F>\n\u003C\u002Ftemplate>\nForm instance. Overrides \u003CNotForm> inject.By default, \u003CNotMessage> uses the form instance provided by a surrounding \u003CNotForm>.You can explicitly provide a form instance when needed:\u003Ctemplate>\n  \u003CNotMessage\n    :form=\"form\"\n    path=\"email\"\n  \u002F>\n\u003C\u002Ftemplate>\nAn explicit form takes priority over the form provided by a \u003CNotForm> ancestor.This is also required when using \u003CNotMessage> as a standalone component outside of a \u003CNotForm>.Root element or component used to render the message. Defaults to 'span'.Pass a string tag name to change the rendered element:\u003Ctemplate>\n  \u003CNotMessage\n    path=\"email\"\n    as=\"p\"\n  \u002F>\n\u003C\u002Ftemplate>\nOr pass a component — useful when your application already has a shared component for validation messages:\u003Ctemplate>\n  \u003CNotMessage\n    path=\"email\"\n    :as=\"ErrorMessage\"\n  \u002F>\n\u003C\u002Ftemplate>\nWhen as is a component, the message is passed as default slot content, not as a prop. ErrorMessage in the example above must render its own default \u003Cslot \u002F> for the message text to appear — a component that instead expects something like a message prop will render with no visible text. If you need to reshape the message before it reaches a component like that, use the default slot documented below instead of as directly. Any attribute passed to \u003CNotMessage> that isn't path, form, or as is forwarded to the rendered element — the same way native HTML attributes fall through on any Vue component. This is how you'd attach a class, an id, or a data-* attribute for styling:\u003Ctemplate>\n  \u003CNotMessage\n    path=\"email\"\n    class=\"text-sm text-red-500\"\n  \u002F>\n\u003C\u002Ftemplate>",{"id":285,"title":236,"titles":286,"content":152,"level":158},"\u002Fdocs\u002Fcomponents\u002Fnot-message#slots",[58,227],{"id":288,"title":240,"titles":289,"content":290,"level":243},"\u002Fdocs\u002Fcomponents\u002Fnot-message#default",[58,227,236],"The default slot receives the current error message. \u003Ctemplate>\n  \u003CNotMessage\n    v-slot=\"slotProps\"\n    path=\"email\"\n  >\n    ...\n  \u003C\u002FNotMessage>\n\u003C\u002Ftemplate> The first active error message for the specified field.If no error is present for the field, this value is undefined.\u003Ctemplate>\n  \u003CNotMessage\n    v-slot=\"{ message }\"\n    path=\"email\"\n  >\n    \u003Cspan>{{ message }}\u003C\u002Fspan>\n  \u003C\u002FNotMessage>\n\u003C\u002Ftemplate>\nBecause \u003CNotMessage> already renders nothing when there's no error, you don't need to guard against message being undefined yourself — the slot's content only ever renders while there's a message to show.Even so, using the slot is useful when you want control over the surrounding markup — for example, adding an icon or custom classes, rather than the plain text \u003CNotMessage> renders by default:\u003Ctemplate>\n  \u003CNotField\n    v-slot=\"{ events, path }\"\n    path=\"email\"\n  >\n    \u003Cinput\n      :id=\"path\"\n      v-model=\"form.values.email\"\n      v-bind=\"events\"\n      type=\"email\"\n    >\n\n    \u003CNotMessage\n      v-slot=\"{ message }\"\n      :path=\"path\"\n      as=\"p\"\n    >\n      \u003Cspan class=\"flex items-center gap-2\">\n        \u003CIcon name=\"tabler:alert-circle\" \u002F>\n        {{ message }}\n      \u003C\u002Fspan>\n    \u003C\u002FNotMessage>\n  \u003C\u002FNotField>\n  \u002Ftemplate>\n\u003C\u002Ftemplate> html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}",{"id":63,"title":62,"titles":292,"content":293,"level":79},[],"Renderless component for managing dynamic array fields with typed items, stable keys, validation state, and array operations. \u003CNotArrayField> is a renderless component for working with array fields in a form. It provides the current array items, stable keys and field paths for rendering nested fields, validation state, and methods for adding, removing, updating, inserting, swapping, and moving items.",{"id":295,"title":201,"titles":296,"content":297,"level":85},"\u002Fdocs\u002Fcomponents\u002Fnot-array-field#usage",[62],"Do not use the array index as the key for managing array items:\u003Ctemplate>\n  \u003CNotArrayField\n    v-slot=\"{ items }\"\n    path=\"todos\"\n  >\n    \u003C!-- Correct -->\n    \u003CNotField\n      v-for=\"item in items\"\n      :key=\"item.key\"\n    >\n      ...\n    \u003C\u002FNotField>\n\n    \u003C!-- Avoid -->\n    \u003CNotField\n      v-for=\"item, index in items\"\n      :key=\"index\"\n    >\n      ...\n    \u003C\u002FNotField>\n  \u003C\u002FNotArrayField>\n\u003C\u002Ftemplate> Always change the array through the slot's mutation methods (append, prepend, insert, remove, swap, move), rather than mutating form.values directly with methods like .push() or .splice(). Each item's stable key is tracked separately from the array's values, and only the mutation methods keep that tracking in sync with structural changes like inserting or removing an item in the middle of the array. A direct mutation still updates the values, but can leave items with the wrong identity, which defeats the purpose of using item.key in the first place.",{"id":299,"title":227,"titles":300,"content":152,"level":85},"\u002Fdocs\u002Fcomponents\u002Fnot-array-field#api",[62],{"id":302,"title":231,"titles":303,"content":304,"level":158},"\u002Fdocs\u002Fcomponents\u002Fnot-array-field#props",[62,227],"Dot path of the array field. It identifies the value managed by \u003CNotArrayField>.\u003Ctemplate>\n  \u003CNotArrayField path=\"todos\">\n    ...\n  \u003C\u002FNotArrayField>\n\u003C\u002Ftemplate>\nFor nested arrays use dot notation:\u003Ctemplate>\n  \u003CNotArrayField path=\"user.todos\">\n    ...\n  \u003C\u002FNotArrayField>\n\u003C\u002Ftemplate>\nThe same path is exposed through the default slot and can be used for labels, IDs, messages, and other field-specific elements.Form instance. Overrides \u003CNotForm> inject.By default, \u003CNotArrayField> uses the form instance provided by a surrounding \u003CNotForm>.You can explicitly provide a form instance when needed:\u003Ctemplate>\n  \u003CNotArrayField\n    :form=\"form\"\n    path=\"todos\"\n  >\n    ...\n  \u003C\u002FNotArrayField>\n\u003C\u002Ftemplate>\nAn explicit form takes priority over the form provided by a \u003CNotForm> ancestor.This is also required when using \u003CNotArrayField> as a standalone component outside of a \u003CNotForm>.The schema for an array item.It is used for type inference only — it is never read at runtime — so that array mutation methods such as append, prepend, insert, and update receive the correct types for the values you pass them. It does not itself validate items; validation of array items still happens through the form's main schema, the same as any other field.",{"id":306,"title":236,"titles":307,"content":152,"level":158},"\u002Fdocs\u002Fcomponents\u002Fnot-array-field#slots",[62,227],{"id":309,"title":240,"titles":310,"content":311,"level":243},"\u002Fdocs\u002Fcomponents\u002Fnot-array-field#default",[62,227,236],"The default slot receives the full array state and all available array operations. \u003Ctemplate>\n  \u003CNotArrayField\n    v-slot=\"slotProps\"\n    path=\"todos\"\n  >\n    ...\n  \u003C\u002FNotArrayField>\n\u003C\u002Ftemplate> Dot path of this array field.Useful for labels, inputs, IDs, messages, and other field-specific elements.\u003Ctemplate>\n  \u003CNotArrayField\n    v-slot=\"{ path }\"\n    path=\"todos\"\n  >\n    \u003CNotMessage :path=\"path\" \u002F>\n  \u003C\u002FNotArrayField>\n\u003C\u002Ftemplate>\nValidation issues reported directly against the array field's own path.It contains all validation issues reported for the array field itself during the most recent validation run — for example, from a .min() or .max() rule on the array as a whole.\u003Ctemplate>\n  \u003CNotArrayField\n    v-slot=\"{ errors }\"\n    path=\"todos\"\n  >\n    \u003Cinput v-model=\"form.values.todos\">\n\n    \u003Cul v-if=\"errors.length > 0\">\n      \u003Cli\n        v-for=\"error in errors\"\n        :key=\"error.message\"\n      >\n        {{ error.message }}\n      \u003C\u002Fli>\n    \u003C\u002Ful>\n  \u003C\u002FNotArrayField>\n\u003C\u002Ftemplate>\nerrors does not include issues from individual items — only issues attached to the array field's own path. An item that fails validation (for example, an empty required tag) makes isValid false, but does not add anything to this array. To show an individual item's own issues, read errors from a \u003CNotField> or nested \u003CNotArrayField> scoped to that item's path, as shown in the demo.Whether the array field's own path, and every path nested underneath it, have no issues.It is true if the array field's own errors are empty and no issue exists anywhere nested inside the array — an item's own value, a field inside an object item, or an item inside a nested array of its own, at any depth. Unlike errors above, this fully recurses.\u003Ctemplate>\n  \u003CNotArrayField\n    v-slot=\"{ isValid }\"\n    path=\"todos\"\n  >\n    \u003Cspan v-if=\"isValid\">Valid\u003C\u002Fspan>\n  \u003C\u002FNotArrayField>\n\u003C\u002Ftemplate>\nThis recursion is genuinely unlimited depth, not just one level. For a groups array where each group has its own nested name and tags array — the pattern from Nested Arrays below — an issue on groups.0.name or groups.0.tags.1 both make the outer groups field's isValid false, and both also make an inner \u003CNotArrayField path=\"groups.0.tags\">'s own isValid false where applicable. errors on either field, however, always stays empty for a nested issue — only isValid (and isTouched\u002FisDirty\u002FisValidating below) roll up.Whether the array field's own path, or any path nested underneath it, has been touched.Recurses to any depth, the same way as isValid above.\u003Ctemplate>\n  \u003CNotArrayField\n    v-slot=\"{ isTouched, isValid }\"\n    path=\"tags\"\n  >\n    \u003Cp v-if=\"isTouched && !isValid\">\n      Please enter valid tags.\n    \u003C\u002Fp>\n  \u003C\u002FNotArrayField>\n\u003C\u002Ftemplate>\nWhether the array field's own path, or any path nested underneath it, differs from the baseline. Recurses to any depth, the same way as isValid above.\u003Ctemplate>\n  \u003CNotArrayField\n    v-slot=\"{ isDirty }\"\n    path=\"todos\"\n  >\n    \u003Cspan v-if=\"isDirty\">Unsaved changes\u003C\u002Fspan>\n  \u003C\u002FNotArrayField>\n\u003C\u002Ftemplate>\nWhether the array field's own path, or any path nested underneath it, is currently validating. Recurses to any depth, the same way as isValid above.\u003Ctemplate>\n  \u003CNotArrayField\n    v-slot=\"{ isValidating }\"\n    path=\"skills\"\n  >\n    \u003Cspan v-if=\"isValidating\">\n      Checking skills...\n    \u003C\u002Fspan>\n  \u003C\u002FNotArrayField>\n\u003C\u002Ftemplate>\nContains metadata for every item in the array.Each item has:A stable identity for v-for :key that remains the same even if the item's position changes.The dot path of this item at its current index.The item's current position in the array.The key remains stable when items are reordered, while index and path change with the item's current position — as long as the array is only changed through the slot's mutation methods. See the caution above.Appends a value to the end of the array.\u003Ctemplate>\n  \u003CNotArrayField\n    v-slot=\"{ append }\"\n    path=\"items\"\n  >\n    \u003Cbutton\n      type=\"button\"\n      @click=\"append({ name: 'New Item' })\"\n    >\n      Add Item\n    \u003C\u002Fbutton>\n  \u003C\u002FNotArrayField>\n\u003C\u002Ftemplate>\nInserts a value at the beginning of the array, shifting every existing item's touched, dirty, and error state — at any depth underneath that item — forward by one position along with it.\u003Ctemplate>\n  \u003CNotArrayField\n    v-slot=\"{ prepend }\"\n    path=\"items\"\n  >\n    \u003Cbutton\n      type=\"button\"\n      @click=\"prepend({ name: 'New Item' })\"\n    >\n      Add to Start\n    \u003C\u002Fbutton>\n  \u003C\u002FNotArrayField>\n\u003C\u002Ftemplate>\nInserts a value at the specified index, shifting later items — and their touched, dirty, and error state, at any depth underneath them — back by one position.\u003Ctemplate>\n  \u003CNotArrayField\n    v-slot=\"{ insert }\"\n    path=\"items\"\n  >\n    \u003Cbutton\n      type=\"button\"\n      @click=\"insert(2, { name: 'Inserted Item' })\"\n    >\n      Insert at index 2\n    \u003C\u002Fbutton>\n  \u003C\u002FNotArrayField>\n\u003C\u002Ftemplate>\nRemoves the item at the specified index from the array.Its touched, dirty, and error state — at any depth underneath that item — is discarded along with it, rather than passed to whichever item ends up at that index afterward. Every later item's own state shifts back by one position to follow it to its new index.\u003Ctemplate>\n  \u003CNotArrayField\n    v-slot=\"{ remove }\"\n    path=\"items\"\n  >\n    \u003Cbutton\n      type=\"button\"\n      @click=\"remove(1)\"\n    >\n      Remove item at index 1\n    \u003C\u002Fbutton>\n  \u003C\u002FNotArrayField>\n\u003C\u002Ftemplate>\nReplaces the item at the specified index with a new value without changing its key.\u003Ctemplate>\n  \u003CNotArrayField\n    v-slot=\"{ update }\"\n    path=\"items\"\n  >\n    \u003Cbutton\n      type=\"button\"\n      @click=\"update(1, { name: 'Updated Item' })\"\n    >\n      Update item at index 1\n    \u003C\u002Fbutton>\n  \u003C\u002FNotArrayField>\n\u003C\u002Ftemplate>\nSwaps the positions of two items in the array, moving keys and form state — at any depth underneath each item — with them.\u003Ctemplate>\n  \u003CNotArrayField\n    v-slot=\"{ swap }\"\n    path=\"items\"\n  >\n    \u003Cbutton\n      type=\"button\"\n      @click=\"swap(0, 1)\"\n    >\n      Swap items at index 0 and 1\n    \u003C\u002Fbutton>\n  \u003C\u002FNotArrayField>\n\u003C\u002Ftemplate>\nMoves an item from one index to another, shifting the items in between and moving keys and form state — at any depth underneath each item — with them.\u003Ctemplate>\n  \u003CNotArrayField\n    v-slot=\"{ move }\"\n    path=\"items\"\n  >\n    \u003Cbutton\n      type=\"button\"\n      @click=\"move(0, 2)\"\n    >\n      Move item from index 0 to 2\n    \u003C\u002Fbutton>\n  \u003C\u002FNotArrayField>\n\u003C\u002Ftemplate> html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}",{"id":72,"title":71,"titles":313,"content":314,"level":79},[],"Create a type-safe form instance with schema validation, reactive state, field tracking, and submission handling. useNotForm is the core composable for creating and managing a NotForm instance. It connects a Standard Schema-compatible validator to a deeply reactive form state and provides everything needed to manage values, validation, field interaction, errors, submission, and reset behavior. The returned form instance can be used directly or provided to \u003CNotForm> for use by descendant field components.",{"id":316,"title":227,"titles":317,"content":152,"level":85},"\u002Fdocs\u002Fcomposables\u002Fuse-not-form#api",[71],{"id":319,"title":320,"titles":321,"content":322,"level":158},"\u002Fdocs\u002Fcomposables\u002Fuse-not-form#signature","Signature",[71,227],"function useNotForm\u003CTSchema extends ObjectSchema>(\n  config: UseNotFormConfig\u003CTSchema>\n): NotFormAPI\u003CTSchema>",{"id":324,"title":325,"titles":326,"content":327,"level":158},"\u002Fdocs\u002Fcomposables\u002Fuse-not-form#parameters","Parameters",[71,227],"Schema, initial values\u002Ferrors, and submit handler configuration.\nThe configuration options are:Schema used to parse and validate values.It can be provided directly, as a ref to a schema or as a function that returns a schema.import { z } from 'zod'\n\nconst schema = z.object({\n  email: z.email(),\n})\n\nconst form = useNotForm({\n  schema,\n})\nThe schema must be Standard Schema compatible whose input is an object.Starting or initial values for the form.The supplied values become the form's initial baseline for form values and are used for:populating form.valuesdirty state comparisonsform.reset()const form = useNotForm({\n  schema,\n  initialValues: {\n    email: 'user@example.com',\n    profile: {\n      name: 'Jane',\n    },\n  },\n})\nWhen initialValues is omitted, the form starts from an empty object.Issues shown before the first validation run.This is useful when a form needs to start with errors returned from another source, such as previously persisted validation state.The supplied values become the form's initial baseline for validation errors and are used for:populating form.errorsdirty state comparisonsform.reset()const form = useNotForm({\n  schema,\n  initialValues: {\n    email: 'user@example.com',\n  },\n  initialErrors: [{ message: 'Email already taken', path: 'email' }],\n})\nWhen initialErrors is omitted, the form starts with no issues.Callback function that is called after a successful submit validation.const form = useNotForm({\n  schema,\n  initialValues: {\n    email: 'user@example.com',\n  },\n  onSubmit(values) {\n    console.log(values)\n  },\n})",{"id":329,"title":330,"titles":331,"content":332,"level":158},"\u002Fdocs\u002Fcomposables\u002Fuse-not-form#return-value","Return Value",[71,227],"useNotForm returns a NotFormAPI\u003CTSchema> object, which is a reactive form instance with the following properties: Issues from the last validation that wrote errors.Each issue contains the path and message supplied by the validation schema.Returns all active validation issues whose path exactly equals path — not issues nested underneath it. getFieldErrors('groups.0') won't include an issue reported at groups.0.name. See NotArrayField for how isValid accounts for that instead, by aggregating recursively rather than doing an exact match.Indicates if the form values have been changed since the form was initialized.\u003Ctemplate>\n  \u003Cdiv>\n    \u003Cp v-if=\"form.isDirty\">\n      You have unsaved changes.\n    \u003C\u002Fp>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\nIndicates if the form is currently submitting.\u003Ctemplate>\n  \u003Cbutton\n    type=\"submit\"\n    :disabled=\"form.isSubmitting\"\n  >\n    {{ form.isSubmitting ? 'Submitting...' : 'Submit' }}\n  \u003C\u002Fbutton>\n\u003C\u002Ftemplate>\nIndicates if any form field has been touched.\u003Ctemplate>\n  \u003Cdiv>\n    \u003Cp v-if=\"form.isTouched\">\n      You have interacted with at least one field.\n    \u003C\u002Fp>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\nIndicates if the form currently has no active validation errors.\u003Ctemplate>\n  \u003Cbutton\n    type=\"submit\"\n    :disabled=\"!form.isValid\"\n  >\n    Submit\n  \u003C\u002Fbutton>\n\u003C\u002Ftemplate>\nisValid is based on the current errors collection. It does not independently execute validation.Indicates if the form is currently being validated.\u003Ctemplate>\n  \u003Cdiv>\n    \u003Cp v-if=\"form.isValidating\">\n      Validating...\n    \u003C\u002Fp>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\nRestores values\u002Ferrors to the baseline. Optional arguments become the new baseline.This also resets the dirty, validation, and touch states.Reset with new values:form.reset({\n  email: 'jane@example.com',\n  name: 'Jane',\n})\nReset with new errors:form.reset(\n  undefined,\n  [\n    {\n      message: 'Email requires verification.',\n      path: ['email'],\n    },\n  ]\n)\nReset with both new values and errors:form.reset(\n  {\n    email: 'jane@example.com',\n    name: 'Jane',\n  },\n  [\n    {\n      message: 'Email requires verification.',\n      path: ['email'],\n    },\n  ]\n)\nReset without new values and errors:form.reset()\nCalling form.reset() restores the form to its current baseline. If that baseline has since been updated, reset() restores to the updated values and errors. Otherwise, it falls back to the original initialValues and initialErrors, or to an empty state if neither was provided.Passing values\u002Ferrors fully replaces the previous baseline — it isn't merged with it. Any key present in the old baseline but missing from the new values is simply gone afterward, the same way initialValues passed to useNotForm becomes the literal starting shape rather than a set of defaults layered under something else.Upserts an issue at the same path, or appends it.Use this when you need to manually manage validation issues for a field, for example, after a server-side validation.Sets a field value by path.Use this when you need to manually set the value of a field, for example, after a server-side update or custom inputs.form.setValue('email', 'jane@example.com')\nCalling setValue() updates the field's value and recomputes isDirty by comparing the new value against the current baseline.setValue() does not trigger validation on its own. Validation still runs only through the field's configured interaction handlers (e.g. onChange, onBlur), so call validate() manually if you need to validate right after a programmatic setValue() call.Marks all fields as touched and dirty, validates the complete form, then runs onSubmit when valid.Bind it directly to \u003CNotForm>:\u003Ctemplate>\n  \u003CNotForm\n    :form=\"form\"\n    @submit=\"form.submit\"\n  >\n    \u003Cinput v-model=\"form.values.email\">\n\n    \u003Cbutton\n      type=\"submit\"\n      :disabled=\"form.isSubmitting\"\n    >\n      {{ form.isSubmitting ? 'Submitting...' : 'Submit' }}\n    \u003C\u002Fbutton>\n  \u003C\u002FNotForm>\n\u003C\u002Ftemplate>\nOr call programmatically:form.submit()\nWhen called with an event, event.preventDefault() is called immediately — before checking whether a submission is already in flight, and before validation runs. This is why binding @submit=\"form.submit\" is enough on its own to stop the browser's default full-page submission; see NotForm for the full distinction between how submit and reset are each prevented.If no onSubmit callback was provided, the form still runs validation on submit but has no callback to execute when it succeeds.Validates the entire form against the current schema.On success, the form's errors are cleared and the schema's validated (typed) output is returned. On failure, the returned result contains the validation issues, and those same issues replace the form's current errors.Concurrent calls are last-write-wins: each call still resolves with its own result, but only the most recently started call gets to write its issues to form.errors — an older call that resolves later has its result silently discarded from shared state.Validates a specific field against the current schema.On success, the field's validated (typed) output is returned. On failure, the returned result contains the validation issues, and those same issues are added to the form's current errors.path can be any granularity — a leaf field, an entire array field, or a specific item inside one. This is useful when building custom inputs that need to validate themselves without validating the entire form; \u003CNotField> and \u003CNotArrayField> both call this internally with their own path.Deeply reactive object containing the live form values.It can be accessed directly:console.log(form.values.email)\nOr used for two-way binding with v-model:\u003Ctemplate>\n  \u003Cinput v-model=\"form.values.email\">\n\u003C\u002Ftemplate>\n\u003Ctemplate>\n  \u003Cinput v-model=\"form.values.address.city\">\n\u003C\u002Ftemplate> html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}",21,{"left":335,"top":335,"width":336,"height":336,"rotate":335,"vFlip":42,"hFlip":42,"body":337},0,24,"\u003Cg fill=\"none\">\u003C!--field 1-->\n  \u003Crect x=\"0.5\" y=\"0.5\" width=\"23\" height=\"3\" rx=\"0.3\" stroke=\"currentColor\" stroke-opacity=\"0.5\" stroke-width=\"0.3\"\u002F>\n\u003C!--field 2 — active-->\n  \u003Crect x=\"0.5\" y=\"4.3\" width=\"23\" height=\"3\" rx=\"0.3\" fill=\"currentColor\" fill-opacity=\"0.12\" stroke=\"currentColor\" stroke-opacity=\"0.75\" stroke-width=\"0.3\"\u002F>\n  \u003Crect x=\"1\" y=\"5.7\" width=\"8\" height=\"0.3\" rx=\"0.2\" fill=\"currentColor\" fill-opacity=\"0.5\"\u002F>\n\u003C!--field 3-->\n  \u003Crect x=\"0.5\" y=\"8.6\" width=\"23\" height=\"3\" rx=\"0.3\" stroke=\"currentColor\" stroke-opacity=\"0.5\" stroke-width=\"0.3\"\u002F>\n\u003C!--button-->\n  \u003Crect x=\"0.5\" y=\"12.9\" width=\"9.9\" height=\"3\" rx=\"0.3\" fill=\"currentColor\" fill-opacity=\"0.2\" stroke=\"currentColor\" stroke-width=\"0.2\"\u002F>\n  \u003Crect x=\"2.2\" y=\"14.3\" width=\"5.5\" height=\"0.4\" rx=\"0.2\" fill=\"currentColor\" fill-opacity=\"0.85\"\u002F>\u003C\u002Fg>",{"left":335,"top":335,"width":336,"height":336,"rotate":335,"vFlip":42,"hFlip":42,"body":339},"\u003Cg fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\u003Cpath d=\"M19 4v16H7a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2z\"\u002F>\u003Cpath d=\"M19 16H7a2 2 0 0 0-2 2M9 8h6\"\u002F>\u003C\u002Fg>",{"left":335,"top":335,"width":336,"height":336,"rotate":335,"vFlip":42,"hFlip":42,"body":341},"\u003Cpath fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M3 10a7 7 0 1 0 14 0a7 7 0 1 0-14 0m18 11l-6-6\"\u002F>",{"left":335,"top":335,"width":336,"height":336,"rotate":335,"vFlip":42,"hFlip":42,"body":343},"\u003Cpath fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M12 3h.393a7.5 7.5 0 0 0 7.92 12.446A9 9 0 1 1 12 2.992z\"\u002F>",{"left":335,"top":335,"width":336,"height":336,"rotate":335,"vFlip":42,"hFlip":42,"body":345},"\u003Cpath fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M8 12a4 4 0 1 0 8 0a4 4 0 1 0-8 0m-5 0h1m8-9v1m8 8h1m-9 8v1M5.6 5.6l.7.7m12.1-.7l-.7.7m0 11.4l.7.7m-12.1-.7l-.7.7\"\u002F>",{"left":335,"top":335,"width":336,"height":336,"rotate":335,"vFlip":42,"hFlip":42,"body":347},"\u003Cpath fill=\"currentColor\" d=\"M12 .297c-6.63 0-12 5.373-12 12c0 5.303 3.438 9.8 8.205 11.385c.6.113.82-.258.82-.577c0-.285-.01-1.04-.015-2.04c-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729c1.205.084 1.838 1.236 1.838 1.236c1.07 1.835 2.809 1.305 3.495.998c.108-.776.417-1.305.76-1.605c-2.665-.3-5.466-1.332-5.466-5.93c0-1.31.465-2.38 1.235-3.22c-.135-.303-.54-1.523.105-3.176c0 0 1.005-.322 3.3 1.23c.96-.267 1.98-.399 3-.405c1.02.006 2.04.138 3 .405c2.28-1.552 3.285-1.23 3.285-1.23c.645 1.653.24 2.873.12 3.176c.765.84 1.23 1.91 1.23 3.22c0 4.61-2.805 5.625-5.475 5.92c.42.36.81 1.096.81 2.22c0 1.606-.015 2.896-.015 3.286c0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12\"\u002F>",{"left":335,"top":335,"width":336,"height":336,"rotate":335,"vFlip":42,"hFlip":42,"body":349},"\u003Cpath fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M4 8h16M4 16h16\"\u002F>",{"left":335,"top":335,"width":336,"height":336,"rotate":335,"vFlip":42,"hFlip":42,"body":351},"\u003Cg fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\u003Cpath d=\"M4 13a8 8 0 0 1 7 7a6 6 0 0 0 3-5a9 9 0 0 0 6-8a3 3 0 0 0-3-3a9 9 0 0 0-8 6a6 6 0 0 0-5 3\"\u002F>\u003Cpath d=\"M7 14a6 6 0 0 0-3 6a6 6 0 0 0 6-3m4-8a1 1 0 1 0 2 0a1 1 0 1 0-2 0\"\u002F>\u003C\u002Fg>",{"left":335,"top":335,"width":336,"height":336,"rotate":335,"vFlip":42,"hFlip":42,"body":353},"\u003Cpath fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"m12 3l8 4.5v9L12 21l-8-4.5v-9zm0 9l8-4.5M12 12v9m0-9L4 7.5m12-2.25l-8 4.5\"\u002F>",{"left":335,"top":335,"width":336,"height":336,"rotate":335,"vFlip":42,"hFlip":42,"body":355},"\u003Cpath fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M13 3v7h6l-8 11v-7H5z\"\u002F>",{"left":335,"top":335,"width":336,"height":336,"rotate":335,"vFlip":42,"hFlip":42,"body":357},"\u003Cpath fill=\"currentColor\" d=\"M13.464 19.83h8.922c.283 0 .562-.073.807-.21a1.6 1.6 0 0 0 .591-.574a1.53 1.53 0 0 0 .216-.783a1.53 1.53 0 0 0-.217-.782L17.792 7.414a1.6 1.6 0 0 0-.591-.573a1.65 1.65 0 0 0-.807-.21c-.283 0-.562.073-.807.21a1.6 1.6 0 0 0-.59.573L13.463 9.99L10.47 4.953a1.6 1.6 0 0 0-.591-.573a1.65 1.65 0 0 0-.807-.21c-.284 0-.562.073-.807.21a1.6 1.6 0 0 0-.591.573L.216 17.481a1.53 1.53 0 0 0-.217.782c0 .275.074.545.216.783a1.6 1.6 0 0 0 .59.574c.246.137.525.21.808.21h5.6c2.22 0 3.856-.946 4.982-2.79l2.733-4.593l1.464-2.457l4.395 7.382h-5.859Zm-6.341-2.46l-3.908-.002l5.858-9.842l2.923 4.921l-1.957 3.29c-.748 1.196-1.597 1.632-2.916 1.632\"\u002F>",{"left":335,"top":335,"width":336,"height":336,"rotate":335,"vFlip":42,"hFlip":42,"body":359},"\u003Cpath fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M7 4v16l13-8z\"\u002F>",{"left":335,"top":335,"width":336,"height":336,"rotate":335,"vFlip":42,"hFlip":42,"body":361},"\u003Cpath fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M6 6a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2zm6-4v2m-3 8v9m6-9v9M5 16l4-2m6 0l4 2M9 18h6M10 8v.01M14 8v.01\"\u002F>",{"left":335,"top":335,"width":336,"height":336,"rotate":335,"vFlip":42,"hFlip":42,"body":363},"\u003Cpath fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"m7 8l-4 4l4 4m10-8l4 4l-4 4M14 4l-4 16\"\u002F>",{"left":335,"top":335,"width":336,"height":336,"rotate":335,"vFlip":42,"hFlip":42,"body":365},"\u003Cpath fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"m6 9l6 6l6-6\"\u002F>",{"left":335,"top":335,"width":336,"height":336,"rotate":335,"vFlip":42,"hFlip":42,"body":367},"\u003Cg fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\u003Cpath d=\"M4 6.667A2.667 2.667 0 0 1 6.667 4h10.666A2.667 2.667 0 0 1 20 6.667v10.666A2.667 2.667 0 0 1 17.333 20H6.667A2.667 2.667 0 0 1 4 17.333z\"\u002F>\u003Cpath d=\"M9 15.5v.25c0 .69.56 1.25 1.25 1.25a1.38 1.38 0 0 0 1.374-1.244l.752-7.512A1.38 1.38 0 0 1 13.75 7c.69 0 1.25.56 1.25 1.25v.25M9 12h6\"\u002F>\u003C\u002Fg>",{"left":335,"top":335,"width":336,"height":336,"rotate":335,"vFlip":42,"hFlip":42,"body":369},"\u003Cpath fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M12 6H6a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-6m-7 1l9-9m-5 0h5v5\"\u002F>",{"id":371,"title":58,"body":372,"description":2044,"extension":2045,"meta":2046,"navigation":2047,"path":59,"seo":2048,"stem":60,"__hash__":2049},"docs\u002Fdocs\u002F2.components\u002F3.not-message.md",{"type":373,"value":374,"toc":2035},"minimark",[375,395,398,463,467,479,712,732,736,747,756,982,985,988,991,1445,1549,1552,1559,1562,1631,2031],[376,377,378,394],"p",{},[379,380,383,388,391],"code",{"className":381,"language":382,"style":152},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","vue",[384,385,387],"span",{"class":386},"sMK4o","\u003C",[384,389,58],{"class":390},"swJcz",[384,392,393],{"class":386},">"," is a component for displaying the validation error message for a specific field.",[376,396,397],{},"It automatically displays the first active validation error for the field and renders nothing when the field has no validation errors.",[399,400,401,449,456],"note",{},[376,402,403,404,412,413,421,422,430,431,439,440,448],{},"Unlike ",[379,405,406,408,410],{"className":381,"language":382,"style":152},[384,407,387],{"class":386},[384,409,54],{"class":390},[384,411,393],{"class":386}," and ",[379,414,415,417,419],{"className":381,"language":382,"style":152},[384,416,387],{"class":386},[384,418,62],{"class":390},[384,420,393],{"class":386},", ",[379,423,424,426,428],{"className":381,"language":382,"style":152},[384,425,387],{"class":386},[384,427,58],{"class":390},[384,429,393],{"class":386}," is not renderless — by default it renders a ",[379,432,433,435,437],{"className":381,"language":382,"style":152},[384,434,387],{"class":386},[384,436,384],{"class":390},[384,438,393],{"class":386}," element containing the error text, and it can be swapped for a different element or component with the ",[379,441,444],{"className":442,"language":443,"style":152},"language-ts-type shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","ts-type",[384,445,447],{"class":446},"sBMFI","as"," prop, covered below.",[376,450,451,454],{},[452,453],"br",{},[452,455],{},[376,457,458,462],{},[459,460,461],"strong",{},"\"Renders nothing when there are no errors\""," is literal here: the wrapping element itself is not rendered at all while the field has no active error, rather than being rendered empty. There's nothing in the DOM to select or style until there's a message to show.",[464,465,201],"h2",{"id":466},"usage",[376,468,469,470,478],{},"The most common usage is alongside a ",[379,471,472,474,476],{"className":381,"language":382,"style":152},[384,473,387],{"class":386},[384,475,54],{"class":390},[384,477,393],{"class":386},":",[480,481,483],"pre",{"className":381,"code":482,"language":382,"meta":152,"style":152},"\u003Ctemplate>\n  \u003CNotField\n    v-slot=\"{ events, path }\"\n    path=\"email\"\n  >\n    \u003Clabel :for=\"path\">Email\u003C\u002Flabel>\n\n    \u003Cinput\n      :id=\"path\"\n      v-model=\"form.values.email\"\n      v-bind=\"events\"\n      type=\"email\"\n    >\n\n    \u003CNotMessage :path=\"path\" \u002F>\n  \u003C\u002FNotField>\n\u003C\u002Ftemplate>\n",[379,484,485,496,504,534,549,555,587,594,602,616,631,645,659,665,670,693,703],{"__ignoreMap":152},[384,486,488,490,493],{"class":487,"line":79},"line",[384,489,387],{"class":386},[384,491,492],{"class":390},"template",[384,494,495],{"class":386},">\n",[384,497,498,501],{"class":487,"line":85},[384,499,500],{"class":386},"  \u003C",[384,502,503],{"class":390},"NotField\n",[384,505,506,510,513,516,519,523,525,528,531],{"class":487,"line":158},[384,507,509],{"class":508},"spNyl","    v-slot",[384,511,512],{"class":386},"=",[384,514,515],{"class":386},"\"",[384,517,518],{"class":386},"{ ",[384,520,522],{"class":521},"sTEyZ","events",[384,524,421],{"class":386},[384,526,527],{"class":521},"path",[384,529,530],{"class":386}," }",[384,532,533],{"class":386},"\"\n",[384,535,536,539,541,543,547],{"class":487,"line":243},[384,537,538],{"class":508},"    path",[384,540,512],{"class":386},[384,542,515],{"class":386},[384,544,546],{"class":545},"sfazB","email",[384,548,533],{"class":386},[384,550,552],{"class":487,"line":551},5,[384,553,554],{"class":386},"  >\n",[384,556,558,561,564,567,569,571,573,575,577,580,583,585],{"class":487,"line":557},6,[384,559,560],{"class":386},"    \u003C",[384,562,563],{"class":390},"label",[384,565,566],{"class":508}," :for",[384,568,512],{"class":386},[384,570,515],{"class":386},[384,572,527],{"class":545},[384,574,515],{"class":386},[384,576,393],{"class":386},[384,578,579],{"class":521},"Email",[384,581,582],{"class":386},"\u003C\u002F",[384,584,563],{"class":390},[384,586,495],{"class":386},[384,588,590],{"class":487,"line":589},7,[384,591,593],{"emptyLinePlaceholder":592},true,"\n",[384,595,597,599],{"class":487,"line":596},8,[384,598,560],{"class":386},[384,600,601],{"class":390},"input\n",[384,603,605,608,610,612,614],{"class":487,"line":604},9,[384,606,607],{"class":508},"      :id",[384,609,512],{"class":386},[384,611,515],{"class":386},[384,613,527],{"class":545},[384,615,533],{"class":386},[384,617,619,622,624,626,629],{"class":487,"line":618},10,[384,620,621],{"class":508},"      v-model",[384,623,512],{"class":386},[384,625,515],{"class":386},[384,627,628],{"class":545},"form.values.email",[384,630,533],{"class":386},[384,632,634,637,639,641,643],{"class":487,"line":633},11,[384,635,636],{"class":508},"      v-bind",[384,638,512],{"class":386},[384,640,515],{"class":386},[384,642,522],{"class":545},[384,644,533],{"class":386},[384,646,648,651,653,655,657],{"class":487,"line":647},12,[384,649,650],{"class":508},"      type",[384,652,512],{"class":386},[384,654,515],{"class":386},[384,656,546],{"class":545},[384,658,533],{"class":386},[384,660,662],{"class":487,"line":661},13,[384,663,664],{"class":386},"    >\n",[384,666,668],{"class":487,"line":667},14,[384,669,593],{"emptyLinePlaceholder":592},[384,671,673,675,677,680,682,684,686,688,690],{"class":487,"line":672},15,[384,674,560],{"class":386},[384,676,58],{"class":390},[384,678,679],{"class":386}," :",[384,681,527],{"class":508},[384,683,512],{"class":386},[384,685,515],{"class":386},[384,687,527],{"class":521},[384,689,515],{"class":386},[384,691,692],{"class":386}," \u002F>\n",[384,694,696,699,701],{"class":487,"line":695},16,[384,697,698],{"class":386},"  \u003C\u002F",[384,700,54],{"class":390},[384,702,495],{"class":386},[384,704,706,708,710],{"class":487,"line":705},17,[384,707,582],{"class":386},[384,709,492],{"class":390},[384,711,495],{"class":386},[713,714,715],"tip",{},[376,716,717,718,726,727,731],{},"When validation fails, ",[379,719,720,722,724],{"className":381,"language":382,"style":152},[384,721,387],{"class":386},[384,723,58],{"class":390},[384,725,393],{"class":386}," displays the first validation error associated with the ",[379,728,729],{"className":442,"language":443,"style":152},[384,730,546],{"class":446}," field, and nothing when there are no active validation errors.",[733,734,274],"h3",{"id":735},"displaying-multiple-errors",[376,737,738,746],{},[379,739,740,742,744],{"className":381,"language":382,"style":152},[384,741,387],{"class":386},[384,743,58],{"class":390},[384,745,393],{"class":386}," intentionally displays only the first active validation error.",[376,748,749,750,755],{},"If you need to display every validation issue for a field, use the field's ",[379,751,752],{"className":442,"language":443,"style":152},[384,753,754],{"class":446},"errors"," slot prop instead:",[480,757,759],{"className":381,"code":758,"language":382,"meta":152,"style":152},"\u003Ctemplate>\n  \u003CNotField\n    v-slot=\"{ events, path, errors }\"\n    path=\"email\"\n  >\n    \u003Cinput\n      :id=\"path\"\n      v-model=\"form.values.email\"\n      v-bind=\"events\"\n      type=\"email\"\n    >\n\n    \u003Cdiv v-if=\"errors.length > 0\">\n      \u003Cp\n        v-for=\"(error, index) in errors\"\n        :key=\"index\"\n      >\n        {{ error.message }}\n      \u003C\u002Fp>\n    \u003C\u002Fdiv>\n  \u003C\u002FNotField>\n\u003C\u002Ftemplate>\n",[379,760,761,769,775,799,811,815,821,833,845,857,869,873,877,898,906,920,934,939,945,955,965,973],{"__ignoreMap":152},[384,762,763,765,767],{"class":487,"line":79},[384,764,387],{"class":386},[384,766,492],{"class":390},[384,768,495],{"class":386},[384,770,771,773],{"class":487,"line":85},[384,772,500],{"class":386},[384,774,503],{"class":390},[384,776,777,779,781,783,785,787,789,791,793,795,797],{"class":487,"line":158},[384,778,509],{"class":508},[384,780,512],{"class":386},[384,782,515],{"class":386},[384,784,518],{"class":386},[384,786,522],{"class":521},[384,788,421],{"class":386},[384,790,527],{"class":521},[384,792,421],{"class":386},[384,794,754],{"class":521},[384,796,530],{"class":386},[384,798,533],{"class":386},[384,800,801,803,805,807,809],{"class":487,"line":243},[384,802,538],{"class":508},[384,804,512],{"class":386},[384,806,515],{"class":386},[384,808,546],{"class":545},[384,810,533],{"class":386},[384,812,813],{"class":487,"line":551},[384,814,554],{"class":386},[384,816,817,819],{"class":487,"line":557},[384,818,560],{"class":386},[384,820,601],{"class":390},[384,822,823,825,827,829,831],{"class":487,"line":589},[384,824,607],{"class":508},[384,826,512],{"class":386},[384,828,515],{"class":386},[384,830,527],{"class":545},[384,832,533],{"class":386},[384,834,835,837,839,841,843],{"class":487,"line":596},[384,836,621],{"class":508},[384,838,512],{"class":386},[384,840,515],{"class":386},[384,842,628],{"class":545},[384,844,533],{"class":386},[384,846,847,849,851,853,855],{"class":487,"line":604},[384,848,636],{"class":508},[384,850,512],{"class":386},[384,852,515],{"class":386},[384,854,522],{"class":545},[384,856,533],{"class":386},[384,858,859,861,863,865,867],{"class":487,"line":618},[384,860,650],{"class":508},[384,862,512],{"class":386},[384,864,515],{"class":386},[384,866,546],{"class":545},[384,868,533],{"class":386},[384,870,871],{"class":487,"line":633},[384,872,664],{"class":386},[384,874,875],{"class":487,"line":647},[384,876,593],{"emptyLinePlaceholder":592},[384,878,879,881,884,887,889,891,894,896],{"class":487,"line":661},[384,880,560],{"class":386},[384,882,883],{"class":390},"div",[384,885,886],{"class":508}," v-if",[384,888,512],{"class":386},[384,890,515],{"class":386},[384,892,893],{"class":545},"errors.length > 0",[384,895,515],{"class":386},[384,897,495],{"class":386},[384,899,900,903],{"class":487,"line":667},[384,901,902],{"class":386},"      \u003C",[384,904,905],{"class":390},"p\n",[384,907,908,911,913,915,918],{"class":487,"line":672},[384,909,910],{"class":508},"        v-for",[384,912,512],{"class":386},[384,914,515],{"class":386},[384,916,917],{"class":545},"(error, index) in errors",[384,919,533],{"class":386},[384,921,922,925,927,929,932],{"class":487,"line":695},[384,923,924],{"class":508},"        :key",[384,926,512],{"class":386},[384,928,515],{"class":386},[384,930,931],{"class":545},"index",[384,933,533],{"class":386},[384,935,936],{"class":487,"line":705},[384,937,938],{"class":386},"      >\n",[384,940,942],{"class":487,"line":941},18,[384,943,944],{"class":521},"        {{ error.message }}\n",[384,946,948,951,953],{"class":487,"line":947},19,[384,949,950],{"class":386},"      \u003C\u002F",[384,952,376],{"class":390},[384,954,495],{"class":386},[384,956,958,961,963],{"class":487,"line":957},20,[384,959,960],{"class":386},"    \u003C\u002F",[384,962,883],{"class":390},[384,964,495],{"class":386},[384,966,967,969,971],{"class":487,"line":333},[384,968,698],{"class":386},[384,970,54],{"class":390},[384,972,495],{"class":386},[384,974,976,978,980],{"class":487,"line":975},22,[384,977,582],{"class":386},[384,979,492],{"class":390},[384,981,495],{"class":386},[376,983,984],{},"This gives you the complete list of validation issues instead of only the first message.",[464,986,227],{"id":987},"api",[733,989,231],{"id":990},"props",[992,993,994,1102,1257],"field-group",{},[995,996,999,1002,1008,1019,1059,1062],"field",{"name":527,"type":997,":required":998},"Paths\u003CTSchema>","true",[376,1000,1001],{},"Field path whose first error message is shown.",[376,1003,1004,1006],{},[452,1005],{},[452,1007],{},[376,1009,1010,1011,478],{},"It supports the same dot-separated paths used by ",[379,1012,1013,1015,1017],{"className":381,"language":382,"style":152},[384,1014,387],{"class":386},[384,1016,54],{"class":390},[384,1018,393],{"class":386},[480,1020,1022],{"className":381,"code":1021,"language":382,"meta":152,"style":152},"\u003Ctemplate>\n  \u003CNotMessage path=\"email\" \u002F>\n\u003C\u002Ftemplate>\n",[379,1023,1024,1032,1051],{"__ignoreMap":152},[384,1025,1026,1028,1030],{"class":487,"line":79},[384,1027,387],{"class":386},[384,1029,492],{"class":390},[384,1031,495],{"class":386},[384,1033,1034,1036,1038,1041,1043,1045,1047,1049],{"class":487,"line":85},[384,1035,500],{"class":386},[384,1037,58],{"class":390},[384,1039,1040],{"class":508}," path",[384,1042,512],{"class":386},[384,1044,515],{"class":386},[384,1046,546],{"class":545},[384,1048,515],{"class":386},[384,1050,692],{"class":386},[384,1052,1053,1055,1057],{"class":487,"line":158},[384,1054,582],{"class":386},[384,1056,492],{"class":390},[384,1058,495],{"class":386},[376,1060,1061],{},"For nested fields:",[480,1063,1065],{"className":381,"code":1064,"language":382,"meta":152,"style":152},"\u003Ctemplate>\n  \u003CNotMessage path=\"user.email\" \u002F>\n\u003C\u002Ftemplate>\n",[379,1066,1067,1075,1094],{"__ignoreMap":152},[384,1068,1069,1071,1073],{"class":487,"line":79},[384,1070,387],{"class":386},[384,1072,492],{"class":390},[384,1074,495],{"class":386},[384,1076,1077,1079,1081,1083,1085,1087,1090,1092],{"class":487,"line":85},[384,1078,500],{"class":386},[384,1080,58],{"class":390},[384,1082,1040],{"class":508},[384,1084,512],{"class":386},[384,1086,515],{"class":386},[384,1088,1089],{"class":545},"user.email",[384,1091,515],{"class":386},[384,1093,692],{"class":386},[384,1095,1096,1098,1100],{"class":487,"line":158},[384,1097,582],{"class":386},[384,1099,492],{"class":390},[384,1101,495],{"class":386},[995,1103,1106,1118,1124,1145,1151,1154,1214,1231,1237],{"name":1104,"type":1105},"form","NotFormAPI\u003CTSchema>",[376,1107,1108,1109,1117],{},"Form instance. Overrides ",[379,1110,1111,1113,1115],{"className":381,"language":382,"style":152},[384,1112,387],{"class":386},[384,1114,49],{"class":390},[384,1116,393],{"class":386}," inject.",[376,1119,1120,1122],{},[452,1121],{},[452,1123],{},[376,1125,1126,1127,1135,1136,1144],{},"By default, ",[379,1128,1129,1131,1133],{"className":381,"language":382,"style":152},[384,1130,387],{"class":386},[384,1132,58],{"class":390},[384,1134,393],{"class":386}," uses the form instance provided by a surrounding ",[379,1137,1138,1140,1142],{"className":381,"language":382,"style":152},[384,1139,387],{"class":386},[384,1141,49],{"class":390},[384,1143,393],{"class":386},".",[376,1146,1147,1149],{},[452,1148],{},[452,1150],{},[376,1152,1153],{},"You can explicitly provide a form instance when needed:",[480,1155,1157],{"className":381,"code":1156,"language":382,"meta":152,"style":152},"\u003Ctemplate>\n  \u003CNotMessage\n    :form=\"form\"\n    path=\"email\"\n  \u002F>\n\u003C\u002Ftemplate>\n",[379,1158,1159,1167,1174,1189,1201,1206],{"__ignoreMap":152},[384,1160,1161,1163,1165],{"class":487,"line":79},[384,1162,387],{"class":386},[384,1164,492],{"class":390},[384,1166,495],{"class":386},[384,1168,1169,1171],{"class":487,"line":85},[384,1170,500],{"class":386},[384,1172,1173],{"class":390},"NotMessage\n",[384,1175,1176,1179,1181,1183,1185,1187],{"class":487,"line":158},[384,1177,1178],{"class":386},"    :",[384,1180,1104],{"class":508},[384,1182,512],{"class":386},[384,1184,515],{"class":386},[384,1186,1104],{"class":521},[384,1188,533],{"class":386},[384,1190,1191,1193,1195,1197,1199],{"class":487,"line":243},[384,1192,538],{"class":508},[384,1194,512],{"class":386},[384,1196,515],{"class":386},[384,1198,546],{"class":545},[384,1200,533],{"class":386},[384,1202,1203],{"class":487,"line":551},[384,1204,1205],{"class":386},"  \u002F>\n",[384,1207,1208,1210,1212],{"class":487,"line":557},[384,1209,582],{"class":386},[384,1211,492],{"class":390},[384,1213,495],{"class":386},[376,1215,1216,1217,1221,1222,1230],{},"An explicit ",[379,1218,1219],{"className":442,"language":443,"style":152},[384,1220,1104],{"class":446}," takes priority over the form provided by a ",[379,1223,1224,1226,1228],{"className":381,"language":382,"style":152},[384,1225,387],{"class":386},[384,1227,49],{"class":390},[384,1229,393],{"class":386}," ancestor.",[376,1232,1233,1235],{},[452,1234],{},[452,1236],{},[376,1238,1239,1240,1248,1249,1144],{},"This is also required when using ",[379,1241,1242,1244,1246],{"className":381,"language":382,"style":152},[384,1243,387],{"class":386},[384,1245,58],{"class":390},[384,1247,393],{"class":386}," as a standalone component outside of a ",[379,1250,1251,1253,1255],{"className":381,"language":382,"style":152},[384,1252,387],{"class":386},[384,1254,49],{"class":390},[384,1256,393],{"class":386},[995,1258,1260,1272,1278,1281,1337,1340,1398],{"name":447,"type":1259},"Component | string",[376,1261,1262,1263,1144],{},"Root element or component used to render the message. Defaults to ",[379,1264,1265,1268,1270],{"className":442,"language":443,"style":152},[384,1266,1267],{"class":386},"'",[384,1269,384],{"class":545},[384,1271,1267],{"class":386},[376,1273,1274,1276],{},[452,1275],{},[452,1277],{},[376,1279,1280],{},"Pass a string tag name to change the rendered element:",[480,1282,1284],{"className":381,"code":1283,"language":382,"meta":152,"style":152},"\u003Ctemplate>\n  \u003CNotMessage\n    path=\"email\"\n    as=\"p\"\n  \u002F>\n\u003C\u002Ftemplate>\n",[379,1285,1286,1294,1300,1312,1325,1329],{"__ignoreMap":152},[384,1287,1288,1290,1292],{"class":487,"line":79},[384,1289,387],{"class":386},[384,1291,492],{"class":390},[384,1293,495],{"class":386},[384,1295,1296,1298],{"class":487,"line":85},[384,1297,500],{"class":386},[384,1299,1173],{"class":390},[384,1301,1302,1304,1306,1308,1310],{"class":487,"line":158},[384,1303,538],{"class":508},[384,1305,512],{"class":386},[384,1307,515],{"class":386},[384,1309,546],{"class":545},[384,1311,533],{"class":386},[384,1313,1314,1317,1319,1321,1323],{"class":487,"line":243},[384,1315,1316],{"class":508},"    as",[384,1318,512],{"class":386},[384,1320,515],{"class":386},[384,1322,376],{"class":545},[384,1324,533],{"class":386},[384,1326,1327],{"class":487,"line":551},[384,1328,1205],{"class":386},[384,1330,1331,1333,1335],{"class":487,"line":557},[384,1332,582],{"class":386},[384,1334,492],{"class":390},[384,1336,495],{"class":386},[376,1338,1339],{},"Or pass a component — useful when your application already has a shared component for validation messages:",[480,1341,1343],{"className":381,"code":1342,"language":382,"meta":152,"style":152},"\u003Ctemplate>\n  \u003CNotMessage\n    path=\"email\"\n    :as=\"ErrorMessage\"\n  \u002F>\n\u003C\u002Ftemplate>\n",[379,1344,1345,1353,1359,1371,1386,1390],{"__ignoreMap":152},[384,1346,1347,1349,1351],{"class":487,"line":79},[384,1348,387],{"class":386},[384,1350,492],{"class":390},[384,1352,495],{"class":386},[384,1354,1355,1357],{"class":487,"line":85},[384,1356,500],{"class":386},[384,1358,1173],{"class":390},[384,1360,1361,1363,1365,1367,1369],{"class":487,"line":158},[384,1362,538],{"class":508},[384,1364,512],{"class":386},[384,1366,515],{"class":386},[384,1368,546],{"class":545},[384,1370,533],{"class":386},[384,1372,1373,1375,1377,1379,1381,1384],{"class":487,"line":243},[384,1374,1178],{"class":386},[384,1376,447],{"class":508},[384,1378,512],{"class":386},[384,1380,515],{"class":386},[384,1382,1383],{"class":521},"ErrorMessage",[384,1385,533],{"class":386},[384,1387,1388],{"class":487,"line":551},[384,1389,1205],{"class":386},[384,1391,1392,1394,1396],{"class":487,"line":557},[384,1393,582],{"class":386},[384,1395,492],{"class":390},[384,1397,495],{"class":386},[1399,1400,1401],"caution",{},[376,1402,1403,1404,1408,1409,1412,1413,1417,1418,1428,1429,1434,1435,1439,1440,1444],{},"When ",[379,1405,1406],{"className":442,"language":443,"style":152},[384,1407,447],{"class":446}," is a component, the message is passed as ",[459,1410,1411],{},"default slot content",", not as a prop. ",[379,1414,1415],{"className":442,"language":443,"style":152},[384,1416,1383],{"class":446}," in the example above must render its own default ",[379,1419,1420,1422,1425],{"className":381,"language":382,"style":152},[384,1421,387],{"class":386},[384,1423,1424],{"class":390},"slot",[384,1426,1427],{"class":386}," \u002F>"," for the message text to appear — a component that instead expects something like a ",[379,1430,1431],{"className":442,"language":443,"style":152},[384,1432,1433],{"class":446},"message"," prop will render with no visible text. If you need to reshape the message before it reaches a component like that, use the ",[379,1436,1437],{"className":442,"language":443,"style":152},[384,1438,240],{"class":446}," slot documented below instead of ",[379,1441,1442],{"className":442,"language":443,"style":152},[384,1443,447],{"class":446}," directly.",[399,1446,1447,1492],{},[376,1448,1449,1450,1458,1459,421,1463,1467,1468,1472,1473,1478,1479,1484,1485,1491],{},"Any attribute passed to ",[379,1451,1452,1454,1456],{"className":381,"language":382,"style":152},[384,1453,387],{"class":386},[384,1455,58],{"class":390},[384,1457,393],{"class":386}," that isn't ",[379,1460,1461],{"className":442,"language":443,"style":152},[384,1462,527],{"class":446},[379,1464,1465],{"className":442,"language":443,"style":152},[384,1466,1104],{"class":446},", or ",[379,1469,1470],{"className":442,"language":443,"style":152},[384,1471,447],{"class":446}," is forwarded to the rendered element — the same way native HTML attributes fall through on any Vue component. This is how you'd attach a ",[379,1474,1475],{"className":442,"language":443,"style":152},[384,1476,1477],{"class":446},"class",", an ",[379,1480,1481],{"className":442,"language":443,"style":152},[384,1482,1483],{"class":446},"id",", or a ",[379,1486,1490],{"className":1487,"language":1489},[1488],"language-text","text","data-*"," attribute for styling:",[480,1493,1495],{"className":381,"code":1494,"language":382,"meta":152,"style":152},"\u003Ctemplate>\n  \u003CNotMessage\n    path=\"email\"\n    class=\"text-sm text-red-500\"\n  \u002F>\n\u003C\u002Ftemplate>\n",[379,1496,1497,1505,1511,1523,1537,1541],{"__ignoreMap":152},[384,1498,1499,1501,1503],{"class":487,"line":79},[384,1500,387],{"class":386},[384,1502,492],{"class":390},[384,1504,495],{"class":386},[384,1506,1507,1509],{"class":487,"line":85},[384,1508,500],{"class":386},[384,1510,1173],{"class":390},[384,1512,1513,1515,1517,1519,1521],{"class":487,"line":158},[384,1514,538],{"class":508},[384,1516,512],{"class":386},[384,1518,515],{"class":386},[384,1520,546],{"class":545},[384,1522,533],{"class":386},[384,1524,1525,1528,1530,1532,1535],{"class":487,"line":243},[384,1526,1527],{"class":508},"    class",[384,1529,512],{"class":386},[384,1531,515],{"class":386},[384,1533,1534],{"class":545},"text-sm text-red-500",[384,1536,533],{"class":386},[384,1538,1539],{"class":487,"line":551},[384,1540,1205],{"class":386},[384,1542,1543,1545,1547],{"class":487,"line":557},[384,1544,582],{"class":386},[384,1546,492],{"class":390},[384,1548,495],{"class":386},[733,1550,236],{"id":1551},"slots",[1553,1554,1555],"h4",{"id":240},[379,1556,1557],{"className":442,"language":443,"style":152},[384,1558,240],{"class":446},[376,1560,1561],{},"The default slot receives the current error message.",[480,1563,1565],{"className":381,"code":1564,"language":382,"meta":152,"style":152},"\u003Ctemplate>\n  \u003CNotMessage\n    v-slot=\"slotProps\"\n    path=\"email\"\n  >\n    ...\n  \u003C\u002FNotMessage>\n\u003C\u002Ftemplate>\n",[379,1566,1567,1575,1581,1594,1606,1610,1615,1623],{"__ignoreMap":152},[384,1568,1569,1571,1573],{"class":487,"line":79},[384,1570,387],{"class":386},[384,1572,492],{"class":390},[384,1574,495],{"class":386},[384,1576,1577,1579],{"class":487,"line":85},[384,1578,500],{"class":386},[384,1580,1173],{"class":390},[384,1582,1583,1585,1587,1589,1592],{"class":487,"line":158},[384,1584,509],{"class":508},[384,1586,512],{"class":386},[384,1588,515],{"class":386},[384,1590,1591],{"class":521},"slotProps",[384,1593,533],{"class":386},[384,1595,1596,1598,1600,1602,1604],{"class":487,"line":243},[384,1597,538],{"class":508},[384,1599,512],{"class":386},[384,1601,515],{"class":386},[384,1603,546],{"class":545},[384,1605,533],{"class":386},[384,1607,1608],{"class":487,"line":551},[384,1609,554],{"class":386},[384,1611,1612],{"class":487,"line":557},[384,1613,1614],{"class":521},"    ...\n",[384,1616,1617,1619,1621],{"class":487,"line":589},[384,1618,698],{"class":386},[384,1620,58],{"class":390},[384,1622,495],{"class":386},[384,1624,1625,1627,1629],{"class":487,"line":596},[384,1626,582],{"class":386},[384,1628,492],{"class":390},[384,1630,495],{"class":386},[992,1632,1633],{},[995,1634,1636,1639,1645,1653,1737,1761,1773],{"name":1433,"type":1635},"string | undefined",[376,1637,1638],{},"The first active error message for the specified field.",[376,1640,1641,1643],{},[452,1642],{},[452,1644],{},[376,1646,1647,1648,1144],{},"If no error is present for the field, this value is ",[379,1649,1650],{"className":442,"language":443,"style":152},[384,1651,1652],{"class":446},"undefined",[480,1654,1656],{"className":381,"code":1655,"language":382,"meta":152,"style":152},"\u003Ctemplate>\n  \u003CNotMessage\n    v-slot=\"{ message }\"\n    path=\"email\"\n  >\n    \u003Cspan>{{ message }}\u003C\u002Fspan>\n  \u003C\u002FNotMessage>\n\u003C\u002Ftemplate>\n",[379,1657,1658,1666,1672,1688,1700,1704,1721,1729],{"__ignoreMap":152},[384,1659,1660,1662,1664],{"class":487,"line":79},[384,1661,387],{"class":386},[384,1663,492],{"class":390},[384,1665,495],{"class":386},[384,1667,1668,1670],{"class":487,"line":85},[384,1669,500],{"class":386},[384,1671,1173],{"class":390},[384,1673,1674,1676,1678,1680,1682,1684,1686],{"class":487,"line":158},[384,1675,509],{"class":508},[384,1677,512],{"class":386},[384,1679,515],{"class":386},[384,1681,518],{"class":386},[384,1683,1433],{"class":521},[384,1685,530],{"class":386},[384,1687,533],{"class":386},[384,1689,1690,1692,1694,1696,1698],{"class":487,"line":243},[384,1691,538],{"class":508},[384,1693,512],{"class":386},[384,1695,515],{"class":386},[384,1697,546],{"class":545},[384,1699,533],{"class":386},[384,1701,1702],{"class":487,"line":551},[384,1703,554],{"class":386},[384,1705,1706,1708,1710,1712,1715,1717,1719],{"class":487,"line":557},[384,1707,560],{"class":386},[384,1709,384],{"class":390},[384,1711,393],{"class":386},[384,1713,1714],{"class":521},"{{ message }}",[384,1716,582],{"class":386},[384,1718,384],{"class":390},[384,1720,495],{"class":386},[384,1722,1723,1725,1727],{"class":487,"line":589},[384,1724,698],{"class":386},[384,1726,58],{"class":390},[384,1728,495],{"class":386},[384,1730,1731,1733,1735],{"class":487,"line":596},[384,1732,582],{"class":386},[384,1734,492],{"class":390},[384,1736,495],{"class":386},[713,1738,1739],{},[376,1740,1741,1742,1750,1751,1755,1756,1760],{},"Because ",[379,1743,1744,1746,1748],{"className":381,"language":382,"style":152},[384,1745,387],{"class":386},[384,1747,58],{"class":390},[384,1749,393],{"class":386}," already renders nothing when there's no error, you don't need to guard against ",[379,1752,1753],{"className":442,"language":443,"style":152},[384,1754,1433],{"class":446}," being ",[379,1757,1758],{"className":442,"language":443,"style":152},[384,1759,1652],{"class":446}," yourself — the slot's content only ever renders while there's a message to show.",[376,1762,1763,1764,1772],{},"Even so, using the slot is useful when you want control over the surrounding markup — for example, adding an icon or custom classes, rather than the plain text ",[379,1765,1766,1768,1770],{"className":381,"language":382,"style":152},[384,1767,387],{"class":386},[384,1769,58],{"class":390},[384,1771,393],{"class":386}," renders by default:",[480,1774,1776],{"className":381,"code":1775,"language":382,"meta":152,"style":152},"\u003Ctemplate>\n  \u003CNotField\n    v-slot=\"{ events, path }\"\n    path=\"email\"\n  >\n    \u003Cinput\n      :id=\"path\"\n      v-model=\"form.values.email\"\n      v-bind=\"events\"\n      type=\"email\"\n    >\n\n    \u003CNotMessage\n      v-slot=\"{ message }\"\n      :path=\"path\"\n      as=\"p\"\n    >\n      \u003Cspan class=\"flex items-center gap-2\">\n        \u003CIcon name=\"tabler:alert-circle\" \u002F>\n        {{ message }}\n      \u003C\u002Fspan>\n    \u003C\u002FNotMessage>\n  \u003C\u002FNotField>\n  \u002Ftemplate>\n\u003C\u002Ftemplate>\n",[379,1777,1778,1786,1792,1812,1824,1828,1834,1846,1858,1870,1882,1886,1890,1896,1913,1928,1941,1945,1965,1987,1992,2000,2008,2017,2022],{"__ignoreMap":152},[384,1779,1780,1782,1784],{"class":487,"line":79},[384,1781,387],{"class":386},[384,1783,492],{"class":390},[384,1785,495],{"class":386},[384,1787,1788,1790],{"class":487,"line":85},[384,1789,500],{"class":386},[384,1791,503],{"class":390},[384,1793,1794,1796,1798,1800,1802,1804,1806,1808,1810],{"class":487,"line":158},[384,1795,509],{"class":508},[384,1797,512],{"class":386},[384,1799,515],{"class":386},[384,1801,518],{"class":386},[384,1803,522],{"class":521},[384,1805,421],{"class":386},[384,1807,527],{"class":521},[384,1809,530],{"class":386},[384,1811,533],{"class":386},[384,1813,1814,1816,1818,1820,1822],{"class":487,"line":243},[384,1815,538],{"class":508},[384,1817,512],{"class":386},[384,1819,515],{"class":386},[384,1821,546],{"class":545},[384,1823,533],{"class":386},[384,1825,1826],{"class":487,"line":551},[384,1827,554],{"class":386},[384,1829,1830,1832],{"class":487,"line":557},[384,1831,560],{"class":386},[384,1833,601],{"class":390},[384,1835,1836,1838,1840,1842,1844],{"class":487,"line":589},[384,1837,607],{"class":508},[384,1839,512],{"class":386},[384,1841,515],{"class":386},[384,1843,527],{"class":545},[384,1845,533],{"class":386},[384,1847,1848,1850,1852,1854,1856],{"class":487,"line":596},[384,1849,621],{"class":508},[384,1851,512],{"class":386},[384,1853,515],{"class":386},[384,1855,628],{"class":545},[384,1857,533],{"class":386},[384,1859,1860,1862,1864,1866,1868],{"class":487,"line":604},[384,1861,636],{"class":508},[384,1863,512],{"class":386},[384,1865,515],{"class":386},[384,1867,522],{"class":545},[384,1869,533],{"class":386},[384,1871,1872,1874,1876,1878,1880],{"class":487,"line":618},[384,1873,650],{"class":508},[384,1875,512],{"class":386},[384,1877,515],{"class":386},[384,1879,546],{"class":545},[384,1881,533],{"class":386},[384,1883,1884],{"class":487,"line":633},[384,1885,664],{"class":386},[384,1887,1888],{"class":487,"line":647},[384,1889,593],{"emptyLinePlaceholder":592},[384,1891,1892,1894],{"class":487,"line":661},[384,1893,560],{"class":386},[384,1895,1173],{"class":390},[384,1897,1898,1901,1903,1905,1907,1909,1911],{"class":487,"line":667},[384,1899,1900],{"class":508},"      v-slot",[384,1902,512],{"class":386},[384,1904,515],{"class":386},[384,1906,518],{"class":386},[384,1908,1433],{"class":521},[384,1910,530],{"class":386},[384,1912,533],{"class":386},[384,1914,1915,1918,1920,1922,1924,1926],{"class":487,"line":672},[384,1916,1917],{"class":386},"      :",[384,1919,527],{"class":508},[384,1921,512],{"class":386},[384,1923,515],{"class":386},[384,1925,527],{"class":521},[384,1927,533],{"class":386},[384,1929,1930,1933,1935,1937,1939],{"class":487,"line":695},[384,1931,1932],{"class":508},"      as",[384,1934,512],{"class":386},[384,1936,515],{"class":386},[384,1938,376],{"class":545},[384,1940,533],{"class":386},[384,1942,1943],{"class":487,"line":705},[384,1944,664],{"class":386},[384,1946,1947,1949,1951,1954,1956,1958,1961,1963],{"class":487,"line":941},[384,1948,902],{"class":386},[384,1950,384],{"class":390},[384,1952,1953],{"class":508}," class",[384,1955,512],{"class":386},[384,1957,515],{"class":386},[384,1959,1960],{"class":545},"flex items-center gap-2",[384,1962,515],{"class":386},[384,1964,495],{"class":386},[384,1966,1967,1970,1973,1976,1978,1980,1983,1985],{"class":487,"line":947},[384,1968,1969],{"class":386},"        \u003C",[384,1971,1972],{"class":390},"Icon",[384,1974,1975],{"class":508}," name",[384,1977,512],{"class":386},[384,1979,515],{"class":386},[384,1981,1982],{"class":545},"tabler:alert-circle",[384,1984,515],{"class":386},[384,1986,692],{"class":386},[384,1988,1989],{"class":487,"line":957},[384,1990,1991],{"class":521},"        {{ message }}\n",[384,1993,1994,1996,1998],{"class":487,"line":333},[384,1995,950],{"class":386},[384,1997,384],{"class":390},[384,1999,495],{"class":386},[384,2001,2002,2004,2006],{"class":487,"line":975},[384,2003,960],{"class":386},[384,2005,58],{"class":390},[384,2007,495],{"class":386},[384,2009,2011,2013,2015],{"class":487,"line":2010},23,[384,2012,698],{"class":386},[384,2014,54],{"class":390},[384,2016,495],{"class":386},[384,2018,2019],{"class":487,"line":336},[384,2020,2021],{"class":521},"  \u002Ftemplate>\n",[384,2023,2025,2027,2029],{"class":487,"line":2024},25,[384,2026,582],{"class":386},[384,2028,492],{"class":390},[384,2030,495],{"class":386},[2032,2033,2034],"style",{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}",{"title":152,"searchDepth":79,"depth":85,"links":2036},[2037,2040],{"id":466,"depth":85,"text":201,"children":2038},[2039],{"id":735,"depth":158,"text":274},{"id":987,"depth":85,"text":227,"children":2041},[2042,2043],{"id":990,"depth":158,"text":231},{"id":1551,"depth":158,"text":236},"Component for displaying validation errors for a specific field.","md",{},{"icon":52},{"title":58,"description":2044},"_SS1WOc6RgszI1aQ19KX6cD0zUTrGvy0TnJ9vFD4Woo",[2051,2053],{"title":54,"path":55,"stem":56,"description":2052,"icon":52,"children":-1},"Renderless component for individual form fields with validation state and event handlers.",{"title":62,"path":63,"stem":64,"description":2054,"icon":52,"children":-1},"Renderless component for managing dynamic array fields with typed items, stable keys, validation state, and array operations.",{"left":335,"top":335,"width":336,"height":336,"rotate":335,"vFlip":42,"hFlip":42,"body":2056},"\u003Cg fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\u003Cpath d=\"M7 9.667A2.667 2.667 0 0 1 9.667 7h8.666A2.667 2.667 0 0 1 21 9.667v8.666A2.667 2.667 0 0 1 18.333 21H9.667A2.667 2.667 0 0 1 7 18.333z\"\u002F>\u003Cpath d=\"M4.012 16.737A2 2 0 0 1 3 15V5c0-1.1.9-2 2-2h10c.75 0 1.158.385 1.5 1\"\u002F>\u003C\u002Fg>",{"left":335,"top":335,"width":336,"height":336,"rotate":335,"vFlip":42,"hFlip":42,"body":2058},"\u003Cg fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\u003Cpath d=\"M7 7H6a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2-2v-1\"\u002F>\u003Cpath d=\"M20.385 6.585a2.1 2.1 0 0 0-2.97-2.97L9 12v3h3zM16 5l3 3\"\u002F>\u003C\u002Fg>",{"left":335,"top":335,"width":336,"height":336,"rotate":335,"vFlip":42,"hFlip":42,"body":2060},"\u003Cpath fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"m12 17.75l-6.172 3.245l1.179-6.873l-5-4.867l6.9-1l3.086-6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z\"\u002F>",{"left":335,"top":335,"width":336,"height":336,"rotate":335,"vFlip":42,"hFlip":42,"body":2062},"\u003Cg fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\u003Cpath d=\"M12 8v4l2 2\"\u002F>\u003Cpath d=\"M3.05 11a9 9 0 1 1 .5 4m-.5 5v-5h5\"\u002F>\u003C\u002Fg>",{"left":335,"top":335,"width":336,"height":336,"rotate":335,"vFlip":42,"hFlip":42,"body":2064},"\u003Cpath fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M19.5 12.572L12 20l-7.5-7.428A5 5 0 1 1 12 6.006a5 5 0 1 1 7.5 6.572\"\u002F>",{"left":335,"top":335,"width":336,"height":336,"rotate":335,"vFlip":42,"hFlip":42,"body":2066},"\u003Cpath fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M12 3c7.2 0 9 1.8 9 9s-1.8 9-9 9s-9-1.8-9-9s1.8-9 9-9m0 5v4m0 4h.01\"\u002F>",{"left":335,"top":335,"width":336,"height":336,"rotate":335,"vFlip":42,"hFlip":42,"body":2068},"\u003Cpath fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M3 12h1m8-9v1m8 8h1M5.6 5.6l.7.7m12.1-.7l-.7.7M9 16a5 5 0 1 1 6 0a3.5 3.5 0 0 0-1 3a2 2 0 0 1-4 0a3.5 3.5 0 0 0-1-3m.7 1h4.6\"\u002F>",{"left":335,"top":335,"width":336,"height":336,"rotate":335,"vFlip":42,"hFlip":42,"body":2070},"\u003Cg fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\u003Cpath d=\"M12 9h.01M11 12h1v4h1\"\u002F>\u003Cpath d=\"M12 3c7.2 0 9 1.8 9 9s-1.8 9-9 9s-9-1.8-9-9s1.8-9 9-9\"\u002F>\u003C\u002Fg>",{"left":335,"top":335,"width":336,"height":336,"rotate":335,"vFlip":42,"hFlip":42,"body":2072},"\u003Cpath fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M5 9h14M5 15h14M11 4L7 20M17 4l-4 16\"\u002F>",1790563726898]