\n\u003C/template>\n```\n\nError:\n```\nType '() => Promise\u003Cnumber>' is not assignable to type '((event: FormSubmitEvent\u003Cany>) => any) & ((() => void | Promise\u003Cvoid>) | ((event: FormSubmitEvent\u003Cany>) => void | Promise\u003Cvoid>))'.\n Type '() => Promise\u003Cnumber>' is not assignable to type '((event: FormSubmitEvent\u003Cany>) => any) & (() => void | Promise\u003Cvoid>)'.ts(2322)\nForm.vue.d.ts(59, 18): The expected type comes from property 'onSubmit' which is declared here on type '__VLS_NormalizeComponentEvent\u003CNonNullable\u003C{ onSubmit?: ((event: FormSubmitEvent\u003Cany>) => any) & ((() => void | Promise\u003Cvoid>) | ((event: FormSubmitEvent\u003Cany>) => void | Promise\u003C...>)); ... 11 more ...; class?: any; } & VNodeProps & AllowedComponentProps & ComponentCustomProps>, { ...; }, \"onSubmit\", \"submit\", \"submi...'\n---\n(property) onSubmit?: ((event: FormSubmitEvent\u003Cany>) => any) & ((() => void | Promise\u003Cvoid>) | ((event: FormSubmitEvent\u003Cany>) => void | Promise\u003Cvoid>))\n```\n\n### Description\n\n`\u003CUForm>`s `@submit` event handler type require that it does not return any value. This is needlessly constraining.\n\n### Additional context\n\nThis is not required by the implementation, but instead wholly caused by the types of `onSubmit` property:\nhttps://github.com/nuxt/ui/blob/901bf7cac3ea53264b27adf879ee4072fa9ac242/src/runtime/components/Form.vue#L53\n\nResult of the `onSubmit` prop is not used at all:\nhttps://github.com/nuxt/ui/blob/901bf7cac3ea53264b27adf879ee4072fa9ac242/src/runtime/components/Form.vue#L243\n\nReplacing the type of `onSubmit` with this should be enough:\n```typescript\nexport interface FormProps\u003CS extends FormSchema, T extends boolean = true> {\n // ...\n onSubmit?: (event: FormSubmitEvent\u003CFormData\u003CS, T>>) => unknown\n}\n```\nThis should still allow passing event handlers without arguments.\n\n### Logs\n\n```shell-script\n\n```",[3145,3148],{"name":3146,"color":3147},"bug","d73a4a",{"name":3149,"color":3150},"triage","ffffff",4873,"nuxt","ui","open","`UForm` `onSubmit` type is needlessly constrained","2025-09-02T05:54:14Z","https://github.com/nuxt/ui/issues/4873",0.70240426,{"description":3160,"labels":3161,"number":3169,"owner":3152,"repository":3153,"state":3154,"title":3170,"updated_at":3171,"url":3172,"score":3173},"### Description\n\nI am using backend validation form and it will be good to have access from plugin files (example from hooks) to update errors of **UForm** component without making custom validation function on every UForm components in the pages\n\nexample which I am going to use in the plugin hook `errorHandler.ts`\n```\nexport default defineNuxtPlugin(nuxtApp => {\n nuxtApp.hook('sanctum:error:response', async (ctx: FetchContext) => {\n \n let errors: FormError[] = [];\n const responseError = ctx.response?._data.errors;\n for (let key in responseError) {\n errors.push({\n name: key,\n message: responseError[key][0] || 'Unknown error',\n });\n }\n \n // here should be function to send `errors` to the UForm component and automatically show errors messages in the FE \n }\n})\n```\n\n### Additional context\n\n_No response_",[3162,3165,3168],{"name":3163,"color":3164},"enhancement","a2eeef",{"name":3166,"color":3167},"v3","49DCB8",{"name":3149,"color":3150},4626,"Support UForm component errors in custom errorHandlers on the hooks","2025-07-29T11:43:53Z","https://github.com/nuxt/ui/issues/4626",0.73089075,{"description":3175,"labels":3176,"number":3180,"owner":3152,"repository":3153,"state":3181,"title":3182,"updated_at":3183,"url":3184,"score":3185},"### Environment\n\n- Operating System: Darwin\n- Node Version: v20.18.3\n- Nuxt Version: 3.16.2\n- CLI Version: 3.24.1\n- Nitro Version: 2.11.9\n- Package Manager: bun@1.1.28\n- Builder: -\n- User Config: devtools, modules, css, future, compatibilityDate\n- Runtime Modules: @nuxt/ui@3.0.2, @nuxt/eslint@1.3.0\n- Build Modules: -\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.0.2\n\n### Reproduction\n\nhttps://stackblitz.com/edit/github-s2opq2ko?file=app/pages/index.vue\n\n### Description\n\nGiven this component nesting:\n\n- `UForm`\n - `UModal`\n - `UForm`\n\nThis is rendered as the following html:\n\n- `UForm` -> `form` - ✅\n - `UModal` -> `div` - ✅ (teleported to root)\n - `UForm` -> `div` - ❌ I am expecting `form`.\n\nI couldn't find a mention in the documentation that this is expected behaviour.\n\nTo reproduce:\n1. Run reproduction\n2. Click \"Open modal\" button\n3. Inspect the nested form element. It's a `div`:\n\n\nI am happy to have a crack at a PR, if you're willing to point me in the right direction 😌\n\n\n### Additional context\n\nFor context, this is our use case:\n* User fills out an onboarding form\n* One field in the onboarding form is business details\n* User has option to populate business details via business number (eg. [DUNS](https://www.dnb.com/en-us/smb/duns.html))\n* Business number field open in modal\n* User can enter business number in form in modal\n* User submits form, it populates state in parent form\n\n### Logs\n\n```shell-script\n\n```",[3177,3178,3179],{"name":3146,"color":3147},{"name":3166,"color":3167},{"name":3149,"color":3150},3913,"closed","[Form] Nested `UForm` in `UModal` is not rendered as `form`","2025-04-16T08:34:48Z","https://github.com/nuxt/ui/issues/3913",0.67031133,{"description":3187,"labels":3188,"number":3193,"owner":3152,"repository":3153,"state":3181,"title":3194,"updated_at":3195,"url":3196,"score":3197},"### Description\n\n```\n\u003Cscript setup lang=\"ts\">\nimport * as z from \"zod\";\nimport type { FormSubmitEvent } from \"@nuxt/ui\";\ninterface Props {\n cabinData?: Cabin;\n}\nconst props = defineProps\u003CProps>();\nconst form = useTemplateRef(\"form\");\n\nconst schema = z.object({\n name: z.string().min(1, \"Cabin name is required\"),\n capacity: z.number().min(1, \"Capacity must be at least 1\").optional(),\n price: z.number().min(0, \"Price must be at least 0\").optional(),\n discount: z.number().min(0, \"Discount must be at least 0\").optional(),\n image: z.string().optional(),\n});\n\nconst isDirty: ComputedRef\u003Cboolean | undefined> = computed(() => {\n return form.value?.dirty;\n});\n\ntype Schema = z.output\u003Ctypeof schema>;\nconst state = reactive\u003CPartial\u003CSchema>>({\n name: props.cabinData?.name || \"\",\n capacity: props.cabinData?.capacity || undefined,\n price: props.cabinData?.price || undefined,\n discount: props.cabinData?.discount || undefined,\n image: undefined,\n});\nasync function onSubmit(event: FormSubmitEvent\u003CSchema>) {}\n\u003C/script>\n\n\u003Ctemplate>\n \u003CUForm\n ref=\"form\"\n :schema=\"schema\"\n :state=\"state\"\n class=\"w-full space-y-8\"\n @submit=\"onSubmit\"\n >\n \u003Cdiv class=\"border-b-grey-200 flex gap-12 border-b py-4\">\n \u003Clabel for=\"name\" class=\"w-1/5 font-semibold\">Name\u003C/label>\n \u003CUFormField name=\"name\">\n \u003CUInput\n id=\"name\"\n v-model=\"state.name\"\n color=\"info\"\n :ui=\"{\n base: ' disabled:bg-grey-50/10',\n }\"\n />\n \u003C/UFormField>\n \u003C/div>\n\n \u003Cdiv class=\"border-b-grey-200 flex gap-12 border-b py-4\">\n \u003Clabel for=\"capacity\" class=\"w-1/5 font-semibold\">Capacity\u003C/label>\n \u003CUFormField name=\"capacity\">\n \u003CUInputNumber\n id=\"capacity\"\n v-model=\"state.capacity\"\n color=\"info\"\n :ui=\"{\n base: ' disabled:bg-grey-50/10',\n }\"\n />\n \u003C/UFormField>\n \u003C/div>\n\n \u003Cdiv class=\"border-b-grey-200 flex gap-12 border-b py-4\">\n \u003Clabel for=\"price\" class=\"w-1/5 font-semibold\">Price\u003C/label>\n \u003CUFormField name=\"price\">\n \u003CUInputNumber\n id=\"price\"\n v-model=\"state.price\"\n color=\"info\"\n :ui=\"{\n base: ' disabled:bg-grey-50/10',\n }\"\n />\n \u003C/UFormField>\n \u003C/div>\n\n \u003Cdiv class=\"border-b-grey-200 flex gap-12 border-b py-4\">\n \u003Clabel for=\"discount\" class=\"w-1/5 font-semibold\">Discount\u003C/label>\n \u003CUFormField name=\"discount\">\n \u003CUInputNumber\n id=\"discount\"\n v-model=\"state.discount\"\n color=\"info\"\n :ui=\"{\n base: ' disabled:bg-grey-50/10',\n }\"\n />\n \u003C/UFormField>\n \u003C/div>\n\n \u003Cdiv class=\"flex justify-end pt-4\">\n \u003CUTooltip arrow text=\"Data has not been changed\">\n \u003CUButton\n type=\"submit\"\n class=\"bg-brand-600 text-brand-50 hover:bg-brand-700 px-4 py-2 uppercase hover:cursor-pointer\"\n size=\"lg\"\n :disabled=\"!isDirty\"\n >\n Update Data\n \u003C/UButton>\n \u003C/UTooltip>\n\n \u003CUButton\n class=\"bg-grey-200 text-grey-900 hover:bg-grey-50 ml-2 px-4 py-2 uppercase hover:cursor-pointer\"\n size=\"lg\"\n @click=\"\n state.name = '';\n state.capacity = undefined;\n state.price = undefined;\n state.discount = undefined;\n state.image = undefined;\n form?.clear();\n \"\n >\n Cancel\n \u003C/UButton>\n \u003C/div>\n \u003C/UForm>\n\u003C/template>\n\n```\n\n> this is my code i want disable button depending on if fields is dirty or not i'm using computed now but i used ref alswo watchEffect and watch with getter to watch if is there any changes in fields,but depending on documentation dirty is ref boolean but it doesn't change what am i doing wrong ?",[3189,3192],{"name":3190,"color":3191},"question","d876e3",{"name":3166,"color":3167},4402,"UForm dirty isn't reactive ?","2025-06-26T13:33:41Z","https://github.com/nuxt/ui/issues/4402",0.6895162,{"description":3199,"labels":3200,"number":3205,"owner":3152,"repository":3153,"state":3181,"title":3206,"updated_at":3207,"url":3208,"score":3209},"### For what version of Nuxt UI are you asking this question?\n\nv2.x\n\n### Description\n\nI'm using the FormGroup component, and I've set the error to true, however unless it contains a non-empty text value the error slot won't render. Is this intentional or a bug? I would tend to think it's the latter.\n\n```\n\u003CUFormGroup :error=\"true\">\n \u003Ctemplate #error>\n \u003Cdiv>I will not render\u003C/div>\n \u003Ctemplate>\n\u003C/UFormGroup>\n```\n\n```\n\u003CUFormGroup :error=\"true && 'some error'\">\n \u003Ctemplate #error>\n \u003Cdiv>I will render\u003C/div>\n \u003Ctemplate>\n\u003C/UFormGroup>\n```",[3201,3202],{"name":3146,"color":3147},{"name":3203,"color":3204},"stale","ededed",2634,"FormGroup error with error slot","2025-06-14T15:36:58Z","https://github.com/nuxt/ui/issues/2634",0.69216967,{"description":3211,"labels":3212,"number":3215,"owner":3152,"repository":3153,"state":3181,"title":3216,"updated_at":3217,"url":3218,"score":3219},"### Environment\n\n- Operating System: Darwin\n- Node Version: v23.5.0\n- Nuxt Version: 3.17.6\n- CLI Version: 3.25.1\n- Nitro Version: 2.11.13\n- Package Manager: pnpm@9.15.4\n- Builder: -\n- User Config: devtools, typescript, modules, css, future, compatibilityDate\n- Runtime Modules: @nuxt/ui@3.2.0, @nuxt/eslint@1.5.1\n- Build Modules: -\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.2.0\n\n### Reproduction\n\nhttps://github.com/harkor/nuxt-ui-form-errors-reproduction\n\n[stackblitz](https://stackblitz.com/github/harkor/nuxt-ui-form-errors-reproduction)\n\n### Description\n\nIf I write this\n\n```ts\nformRef.value?.setErrors([\n {\n name: \"pathForACustomError\",\n message: \"This is a custom error message.\",\n },\n ]);\n```\n\nThe error will be set in formRef?.getErrors('pathForACustomError')\n\nBut if I watch a state like this and clear the error\n\n```ts\nwatch(\n () => state.hello,\n () => {\n console.log(\"Hello changed:\", state.hello);\n formRef.value?.clear(\"pathForACustomError\");\n },\n);\n```\n\nIf the UFormField component have a name (the component change the value), formRef?.getErrors('pathForACustomError') will not be cleared, it will for 1 or two tick but after that, the error is still there.\n\nIn my reproduction you have 3 URadioGroup\n\nHello, World and Hi\n\nIf you change\n- \"Hello\", error not cleared\n- \"World\", error cleared\n- \"Hi\", error cleared\n\nWhat change between these 3 fields\n- \"Hello\" have a name attribute in the UFormField\n- \"World\" don't have a name attribute in the UFormField\n- \"Hi\" have a name in attribute BUT with a @change will clear \"again\" the error\n\n**PS: Don't forget to click on \"Set custom error\" button before change values on URadioGroup's components**\n\nBonus: Since version 3.2.0, I have a typescript error for getErrors(path) with typecheck enabled\n\n**Expectations**\n- First UFormField \"hello\" clear the error when state change with a watch\n- No typescript error on getErrors\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\nERROR 11:39:08 AM\n ERROR(vue-tsc) Argument of type '\"pathForACustomError\"' is not assignable to parameter of type 'undefined'.\n FILE /home/projects/xoriallzvx.github/app/components/MyForm.vue:127:36\n\n 125 | \u003C/UFormField>\n 126 | \u003Cdiv\n > 127 | v-if=\"!!formRef?.getErrors('pathForACustomError').length\"\n | ^^^^^^^^^^^^^^^^^^^^^\n 128 | class=\"text-red-400\"\n 129 | >\n 130 | {{ formRef?.getErrors(\"pathForACustomError\")[0]?.message }}\n\n ERROR(vue-tsc) Argument of type '\"pathForACustomError\"' is not assignable to parameter of type 'undefined'.\n FILE /home/projects/xoriallzvx.github/app/components/MyForm.vue:130:29\n\n 128 | class=\"text-red-400\"\n 129 | >\n > 130 | {{ formRef?.getErrors(\"pathForACustomError\")[0]?.message }}\n | ^^^^^^^^^^^^^^^^^^^^^\n 131 | \u003C/div>\n 132 | \u003C/UForm>\n 133 | \u003C/template>\n\n[vue-tsc] Found 2 errors. Watching for file changes.\n```",[3213,3214],{"name":3146,"color":3147},{"name":3166,"color":3167},4455,"SetErrors with a ref and clear this error from a watcher don't work + TS Error","2025-09-12T16:04:27Z","https://github.com/nuxt/ui/issues/4455",0.69794315,{"description":3221,"labels":3222,"number":3224,"owner":3152,"repository":3153,"state":3181,"title":3225,"updated_at":3226,"url":3227,"score":3228},"### For what version of Nuxt UI are you suggesting this?\n\nv2.x\n\n### Description\n\nIt would be cool if the errors array from UForm supported the message parameter having an array value (multiple messages). The default backwards compatible method could just join them with a space or something. (See https://ui.nuxt.com/components/form-group#props)\nThat is all.\n\n### Additional context\n\n_No response_",[3223],{"name":3163,"color":3164},2389,"Nested form validation array of messages","2025-06-29T17:10:53Z","https://github.com/nuxt/ui/issues/2389",0.7005721,{"description":3230,"labels":3231,"number":3243,"owner":3152,"repository":3153,"state":3181,"title":3244,"updated_at":3245,"url":3246,"score":3247},"### Environment\n\n- Operating System - Ubuntu 22\n- Node Version: 22\n- Nuxt Version: 3.17.5\n- CLI Version: 3.25.1\n- Package Manager: pnpm@10.9.0\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\n3.17.5\n\n### Reproduction\n\n```javascript\nconst fields = ref([\n {\n name: 'code',\n type: 'otp',\n placeholder: 'Enter 6-digit code',\n otp: {\n length: 6,\n placeholder: '●',\n },\n },\n])\n\nconst submitButtonOptions = computed(() => ({\n label: 'Verify Code',\n loading: loading.value,\n}))\n\u003C/script>\n\n\u003Ctemplate>\n \u003Cdiv class=\"flex min-h-screen items-center justify-center p-4\">\n \u003CUPageCard class=\"w-full max-w-md\">\n \u003CUAuthForm\n :schema=\"schema\"\n :state=\"credentials\"\n :fields=\"fields\"\n :loading=\"loading\"\n title=\"Multi-Factor Authentication\"\n subtitle=\"Enter the 6-digit code from your authenticator app to continue.\"\n :submit=\"submitButtonOptions\"\n @submit=\"verifyMFA\"\n >\n \u003Ctemplate #header>\n \u003CNuxtImg\n src=\"/thinkrocket-logo.png\"\n alt=\"ThinkRocket Logo\"\n width=\"100\"\n class=\"mx-auto\"\n preset=\"contain\"\n />\n \u003C/template>\n\n \u003Ctemplate #validation>\n \u003CUAlert\n v-if=\"mfaError\"\n color=\"error\"\n icon=\"i-lucide-alert-circle\"\n :title=\"mfaError\"\n class=\"mb-4\"\n />\n \u003C/template>\n\n \u003Ctemplate #footer>\n \u003Cdiv class=\"text-center space-y-2\">\n \u003Cp class=\"text-sm text-gray-600 dark:text-gray-300\">\n Check your authenticator app for the current code.\n \u003C/p>\n \u003CUButton variant=\"ghost\" size=\"sm\" :loading=\"loading\" @click=\"refreshChallenge\">\n \u003CUIcon name=\"i-lucide-refresh-cw\" class=\"h-4 w-4 mr-1\" />\n Get New Code\n \u003C/UButton>\n \u003C/div>\n \u003C/template>\n \u003C/UAuthForm>\n \u003C/UPageCard>\n \u003C/div>\n\u003C/template>\n```\n\n### Description\n\n`:fields` is throwing typescript error. Only an issue with `otp`. Looking in\n\n- `node_modules/.pnpm/@nuxt+ui-pro@3.1.3_@babel+parser@7.27.5_db0@0.3.2_better-sqlite3@11.10.0__embla-carouse_48b559106e80aa1b3007fc5d3af2ab7f/node_modules/@nuxt/ui-pro/dist/runtime/components/AuthForm.vue.d.ts`\n- `node_modules/.pnpm/@nuxt+ui@3.1.3_@babel+parser@7.27.5_db0@0.3.2_better-sqlite3@11.10.0__embla-carousel@8._6f36fdd0332a5dab432a961d27814af8/node_modules/@nuxt/ui/dist/runtime/components/PinInput.vue.d.ts`\n- `node_modules/.pnpm/reka-ui@2.3.1_typescript@5.8.3_vue@3.5.16_typescript@5.8.3_/node_modules/reka-ui/dist/index.d.ts`\n \nI'm not seeing what I'm missing. The [docs](https://ui.nuxt.com/components/auth-form#props) don't give any other details than the example.\n\n```\nVue: Type\n{\n name: string;\n type: string;\n placeholder: string;\n otp: {\n length: number;\n placeholder: string;\n };\n}[]\nis not assignable to type AuthFormField[]\nType\n{\n name: string;\n type: string;\n placeholder: string;\n otp: {\n length: number;\n placeholder: string;\n };\n}\nis not assignable to type AuthFormField\n```\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3232,3233,3236,3237,3240,3241],{"name":3146,"color":3147},{"name":3234,"color":3235},"needs reproduction","CB47CF",{"name":3166,"color":3167},{"name":3238,"color":3239},"nuxt/ui-pro","00dc82",{"name":3149,"color":3150},{"name":3242,"color":3204},"closed-by-bot",4317,"UAuthForm otp typescript error","2025-06-18T02:14:57Z","https://github.com/nuxt/ui/issues/4317",0.70790786,{"description":3249,"labels":3250,"number":3258,"owner":3152,"repository":3153,"state":3181,"title":3259,"updated_at":3260,"url":3261,"score":3262},"### Description\n\n### 🚀 Feature Request\nI’d like to suggest adding a built-in `\u003CDynamicRenderer>` component to Nuxt UI that renders dynamic, nested components based on a configuration object.\n\n### 📋 Motivation\nThis component would be ideal for:\n\n- Form builders\n\n- CMS-driven UIs\n\n- Low-code tools\n\n- Declarative UI rendering\n\nIt simplifies the process of rendering deeply nested structures without hardcoding components in the template.\n\n### 💡 Proposal\nThe DynamicRenderer would accept a config prop that defines:\n\n- The component to render\n\n- Props to bind\n\n- Slot content (including nested component trees)\n\nIt would recursively render components and their slots. Here's an example implementation:\n\n\n#### `DynamicRenderer.vue`\n```vue\n\u003Cscript setup lang=\"ts\">\ndefineProps\u003C{ config: any }>()\n\u003C/script>\n\n\u003Ctemplate>\n \u003Ccomponent :is=\"config.component\" v-bind=\"config\">\n \u003Ctemplate\n v-for=\"(slotContent, slotName) in config.slots\"\n #[slotName]\n >\n \u003Ctemplate v-if=\"typeof slotContent === 'string'\">\n {{ slotContent }}\n \u003C/template>\n\n \u003Ctemplate v-else-if=\"Array.isArray(slotContent)\">\n \u003CDynamicRenderer\n v-for=\"(nested, index) in slotContent\"\n :key=\"index\"\n :config=\"nested\"\n />\n \u003C/template>\n\n \u003Ctemplate v-else>\n \u003CDynamicRenderer :config=\"slotContent\" :key=\"slotContent.name || slotName\" />\n \u003C/template>\n \u003C/template>\n \u003C/component>\n\u003C/template>\n```\n\n\n\n#### `index.vue`\n```vue\n\u003Cscript setup lang=\"ts\">\nimport { UButton, UCard, UContainer, UForm, UFormField, UInput } from '#components'\n\nconst config = {\n component: UContainer,\n class: 'h-screen flex justify-center items-center',\n slots: {\n default: [\n {\n component: UCard,\n slots: {\n default: [{\n component: UForm,\n class: 'space-y-4',\n slots: {\n default: [\n {\n component: UFormField,\n label: 'Username',\n name: 'username',\n required: true,\n slots: {\n default: [\n {\n component: UInput,\n placeholder: 'Enter Username',\n value: 'hh'\n }\n ]\n }\n },\n {\n component: UFormField,\n label: 'Password',\n name: 'password',\n required: true,\n slots: {\n default: [\n {\n component: UInput,\n type: 'password',\n placeholder: 'Enter Password',\n value: 'hh'\n }\n ]\n }\n },\n {\n component: UButton,\n label: 'Login',\n icon: 'i-lucide-user',\n variant: 'soft',\n type: 'submit',\n block: true\n }\n ]\n }\n }]\n }\n }\n ]\n }\n}\n\u003C/script>\n\n\u003Ctemplate>\n \u003CDynamicRenderer :config=\"config\" />\n\u003C/template>\n```\n\n### Result \n\n\nIt would also be great if using this approach could eliminate the need to manually import components like:\n\n```ts\nimport { UButton, UCard, UContainer, UForm, UFormField, UInput } from '#components'\n```\n\nand instead rely on automatic resolution by the renderer itself.\n\nThanks for your work on Nuxt UI – it’s a fantastic toolkit!\n\n### Additional context\n\n_No response_",[3251,3254,3255,3256,3257],{"name":3252,"color":3253},"feature","A27AF6",{"name":3166,"color":3167},{"name":3149,"color":3150},{"name":3242,"color":3204},{"name":3203,"color":3204},4138,"✨ Feature Request: Add `\u003CDynamicRenderer>` component for config-driven UI rendering","2025-09-03T02:01:06Z","https://github.com/nuxt/ui/issues/4138",0.7093686,{"description":3264,"labels":3265,"number":3268,"owner":3152,"repository":3153,"state":3181,"title":3269,"updated_at":3270,"url":3271,"score":3272},"### Description\n\nI have a file field **without** `v-model`, then I select a file. I have another field with a validation error. On submit, the validation error is shown on the email field and the file field is cleared. Is this a bug or a feature. With version `3.2.0` this behaviour does not exist. In `3.3.0` it does. It might be related to one of the dependencies though, because if I first upgrade to 3.3.0 and then go back to 3.2.0, where the lockfile still shows a lot of changes, the problem still exists.\n\n```vue\n\u003Cscript setup lang=\"ts\">\nimport type { FormError, FormSubmitEvent } from '#ui/types'\n\nconst state = reactive({\n email: undefined,\n file: undefined,\n})\n\nconst validate = (): FormError[] => {\n const errors = []\n errors.push({ name: 'email', message: 'Required' })\n return errors\n}\n\nasync function onSubmit(event: FormSubmitEvent\u003Ctypeof state>) {\n console.log(event.data)\n}\n\u003C/script>\n\n\u003Ctemplate>\n \u003CUForm\n :validate=\"validate\"\n :state=\"state\"\n class=\"space-y-4\"\n @submit=\"onSubmit\"\n\n \u003CUFormField label=\"Email\" name=\"email\">\n \u003CUInput v-model=\"state.email\" />\n \u003C/UFormField>\n\n \u003CUFormField label=\"File\" name=\"file\">\n \u003CUInput type=\"file\" />\n \u003C/UFormField>\n\n \u003CUButton type=\"submit\"> Submit \u003C/UButton>\n \u003C/UForm>\n\u003C/template>\n```",[3266,3267],{"name":3190,"color":3191},{"name":3166,"color":3167},4637,"File field gets cleared, bug?","2025-08-21T08:42:25Z","https://github.com/nuxt/ui/issues/4637",0.71425945,["Reactive",3274],{},["Set"],["ShallowReactive",3277],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fQaAydQH2uNNTjdD2wlpXyCR8Oas9NfjfmKrrmaTg6is":-1},"/nuxt/ui/2674"]