\n\u003C/template>\n```\n\nI think created items should emit `change` so we can validate them properly.\n\nAdditionally, because of https://github.com/nuxt/ui/issues/3736,the field always starts in an error state when a new item is created in certain conditions (regardless of whether the item meets the schema's requirements or not).\n\n------\n\nCurrent workaround is to run the validation manaully on a field after mutating the model:\n\n```ts\nasync function onCreate(item: string) {\n selected.value = item\n\n await formRef.value?.validate({ name: 'fieldName' })\n}\n```",[3157,3158],{"name":3138,"color":3139},{"name":3141,"color":3142},4139,"USelectMenu should emit 'change' after creating an item","2025-05-13T09:15:02Z","https://github.com/nuxt/ui/issues/4139",0.78228974,{"description":3165,"labels":3166,"number":3171,"owner":3147,"repository":3148,"state":3172,"title":3173,"updated_at":3174,"url":3175,"score":3176},"### 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```",[3167,3170],{"name":3168,"color":3169},"question","d876e3",{"name":3141,"color":3142},4637,"closed","File field gets cleared, bug?","2025-08-21T08:42:25Z","https://github.com/nuxt/ui/issues/4637",0.7284494,{"description":3178,"labels":3179,"number":3183,"owner":3147,"repository":3148,"state":3172,"title":3184,"updated_at":3185,"url":3186,"score":3187},"### Description\n\nIn my opinion, the methods `setErrors`, `getErrors`, and `clear` of the Form component should filter using `.startsWith` on the error name. I suggest this because it would be helpful to clear all subpaths of a nested object or array.\n\nTo avoid introducing \"breaking changes,\" perhaps we could add an `exact` argument to these methods (defaulting to true). When `exact` is true, they operate as they currently do; when false, they utilise `startsWith`. \n\nI am happy to submit a PR for this if everyone agrees with the idea.\n\n### Additional context\n\n_No response_",[3180,3181,3182],{"name":3138,"color":3139},{"name":3141,"color":3142},{"name":3144,"color":3145},4524,"Better form errors path handling","2025-07-28T13:23:21Z","https://github.com/nuxt/ui/issues/4524",0.7298762,{"description":3189,"labels":3190,"number":3197,"owner":3147,"repository":3148,"state":3172,"title":3198,"updated_at":3199,"url":3200,"score":3201},"### Description\n\nI see in the [examples](https://ui.nuxt.com/components/form) form validation errors appear only for fields what were used by the user - just initialized form will all fields required will not be all in red, errors appear only on fields I left empty or when I try to submit form.\r\n\r\nThis behavior does not work in my project. Here it shows required errors everywhere when I change the first field.\r\n\r\nHow this „used field“ detection works? What to do to not break it?\r\n\r\nThank you for help.",[3191,3192,3195],{"name":3168,"color":3169},{"name":3193,"color":3194},"closed-by-bot","ededed",{"name":3196,"color":3194},"stale",1815,"How validation hides errors for not yet used fields","2025-06-19T02:12:24Z","https://github.com/nuxt/ui/issues/1815",0.7505625,{"description":3203,"labels":3204,"number":3209,"owner":3147,"repository":3148,"state":3172,"title":3210,"updated_at":3211,"url":3212,"score":3213},"### Environment\n\n- Operating System: Darwin\n- Node Version: v23.4.0\n- Nuxt Version: 3.16.1\n- CLI Version: 3.23.1\n- Nitro Version: 2.11.7\n- Package Manager: bun@1.2.5\n- Builder: -\n- User Config: devtools, modules, imports, components, css, compatibilityDate, experimental, future\n- Runtime Modules: @nuxt/ui@3.0.0\n- Build Modules: -\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.0.0\n\n### Reproduction\n\nhttps://codesandbox.io/p/devbox/recursing-browser-klwx46\n\n### Description\n\nWhen a `SelectMenu` is wrapped in a custom component which is then consumed by `FormField` validation is triggered for an instant before the component goes back to its valid state.\n\nI've tried to debug a bit and I think it's related to the fact that the `SelectMenu` uses `Input` and that input is firing a `change` event because it uses `useFormField`, even though that particular input should not be considered the \"form field\" in this instance.\n\n### Additional context\n\nhttps://github.com/user-attachments/assets/75e8c84f-612e-48f0-bf9e-dcc1fe95ffcd\n\nI'd like to open a PR and fix this myself but I'm not sure what the best approach it. Maybe `Input` could take a prop that allows it to not fire form events? i.e. `ignore-form-events=\"true\"` so the SelectMenu would use it. This could also apply for other components that use primitive form inputs inside them (Command, InputMenu) etc.\n\n### Logs\n\n```shell-script\n\n```",[3205,3208],{"name":3206,"color":3207},"bug","d73a4a",{"name":3141,"color":3142},3736,"[USelectMenu] Validation events are triggered before change when wrapped in a custom component","2025-05-14T17:24:48Z","https://github.com/nuxt/ui/issues/3736",0.76555246,{"description":3215,"labels":3216,"number":3219,"owner":3147,"repository":3148,"state":3172,"title":3220,"updated_at":3221,"url":3222,"score":3223},"### For what version of Nuxt UI are you suggesting this?\n\nv2.x\n\n### Description\n\nIt would be great if there was an option for eager validation if there are errors present on the group.\n\nFor example, when initially filling out the field you don't want eager validation as it's distracting when you aren't finished typing.\n\nHowever if you tab away and there's an error, when fixing the error you'd want immediate feedback with eager-validation.\n\nSo I propose a new prop: `eager-validation-on-error=\"true\"` to improve the UX of forms.\n\nThanks!\n\n### Additional context\n\n_No response_",[3217,3218],{"name":3138,"color":3139},{"name":3141,"color":3142},2599,"FormGroup eager-validation when errors exist","2025-06-29T17:15:23Z","https://github.com/nuxt/ui/issues/2599",0.7666431,{"description":3225,"labels":3226,"number":3230,"owner":3147,"repository":3148,"state":3172,"title":3231,"updated_at":3232,"url":3233,"score":3234},"### Environment\n\n- Operating System: Windows_NT\n- Node Version: v22.13.1\n- Nuxt Version: 3.17.4\n- CLI Version: 3.25.1\n- Nitro Version: 2.11.12\n- Package Manager: pnpm@10.6.3\n- Builder: -\n- User Config: telemetry, ssr, future, compatibilityDate, modules, hooks, nitro, css, routeRules, devtools, experimental, typescript, imports\n- Runtime Modules: @nuxt/ui-pro@3.1.3, @vueuse/nuxt@13.3.0, @pinia/nuxt@0.11.0, @pinia/colada-nuxt@0.2.0\n- Build Modules: -\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\n3.1.3\n\n### Reproduction\n\nhttps://codesandbox.io/p/devbox/suspicious-water-smppjv\n\n### Description\n\nThe docs note that you can access exposed variables from `UForm`. I've found that the following fields are not reactive:\n- dirty \n- dirtyFields\n- blurredFields\n- touchedFields\n\n### Additional context\n\nI see in the [source](https://github.com/nuxt/ui/blob/v3/src/runtime/components/Form.vue) that they're not defined with `ref` or `reactive`.\n\nAdditionally, the `dirty` computed that gets exposed would never get updated since `dirtyFields` is not reactive.\n\n### Logs\n\n```shell-script\n\n```",[3227,3228,3229],{"name":3206,"color":3207},{"name":3141,"color":3142},{"name":3144,"color":3145},4238,"Form exposed dirty, dirtyFields, blurredFields, and touchedFields are not reactive","2025-06-24T15:56:14Z","https://github.com/nuxt/ui/issues/4238",0.76673365,{"description":3236,"labels":3237,"number":3241,"owner":3147,"repository":3148,"state":3172,"title":3242,"updated_at":3243,"url":3244,"score":3245},"### Environment\n\n- Operating System: `Darwin`\n- Node Version: `v22.13.0`\n- Nuxt Version: `3.16.2`\n- CLI Version: `3.24.0`\n- Nitro Version: `2.11.8`\n- Package Manager: `pnpm@10.9.0`\n- Builder: `-`\n- User Config: `-`\n- Runtime Modules: `-`\n- Build Modules: `-`\n\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nnuxt-ui 3.1.0\n\n### Reproduction\n\nhttps://ui.nuxt.com/components/form\n\nOpen in Chrome and check `issues` in devtools. The linked erroring nodes are all RadioGroups or CheckboxGroups.\n\n### Description\n\nThe FormField component correctly removes the `for` attribute from the label for the RadioGroup & CheckboxGroup components. Chrome devtools would suggest that there should be a further step so that `\u003Clabel>` is not used at all in this context.\n\nI am happy to propose changes.\n\n\u003Cimg width=\"917\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/2f3f5fc1-d819-4974-9217-6ab75f31cf64\" />\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3238,3239,3240],{"name":3206,"color":3207},{"name":3141,"color":3142},{"name":3144,"color":3145},3998,"Chrome reports the FormField label as `Incorrect use of \u003Clabel for=FORM_ELEMENT>` when wrapping RadioGroup or CheckboxGroup","2025-05-15T09:32:18Z","https://github.com/nuxt/ui/issues/3998",0.76701766,{"description":3247,"labels":3248,"number":3250,"owner":3147,"repository":3148,"state":3172,"title":3251,"updated_at":3252,"url":3253,"score":3254},"### For what version of Nuxt UI are you asking this question?\n\nv2.x\n\n### Description\n\nI have a form like the following example:\n```vue\n\u003Ctemplate>\n \u003Cdiv>\n \u003Ch1>Training Form\u003C/h1>\n \u003C/div>\n \u003CUForm :state=\"state\" :schema=\"schema\" @submit=\"handleSubmit\">\n \u003CUFormGroup label=\"Name\" name=\"name\">\n \u003CUInput v-model=\"state.name\" />\n \u003C/UFormGroup>\n \u003CUFormGroup label=\"Training Week\" name=\"trainingWeek\">\n \u003Cdiv v-for=\"(day, index) in state.trainingWeek\" :key=\"index\">\n \u003CUFormGroup label=\"Day\" name=\"trainingWeek[' + index + '].day\">\n \u003CUInput v-model=\"day.day\" />\n \u003C/UFormGroup>\n \u003CUFormGroup label=\"Exercises\" name=\"trainingWeek[' + index + '].exercises\">\n \u003Cdiv v-for=\"(exercise, exerciseIndex) in day.exercises\" :key=\"exerciseIndex\">\n \u003CUInput v-model=\"exercise.exerciseName\" />\n \u003C/div>\n \u003C/UFormGroup>\n \u003Cdiv class=\"mt-4 flex justify-end\">\n \u003CUButton @click=\"addExercise(index)\">Add Exercise\u003C/UButton>\n \u003C/div>\n \u003C/div>\n \u003C/UFormGroup>\n \u003Cdiv class=\"mt-4 flex justify-end\">\n \u003CUButton @click=\"addDay\">Add Day\u003C/UButton>\n \u003CUButton type=\"submit\">Submit\u003C/UButton>\n \u003C/div>\n \u003C/UForm>\n\u003C/template>\n\n\u003Cscript setup lang=\"ts\">\nimport { z } from \"zod\";\nimport type { FormSubmitEvent } from \"#ui/types\";\nconst state = reactive({\n name: \"\",\n trainingWeek: [\n {\n day: \"\",\n exercises: [\n {\n exerciseName: \"\",\n },\n ],\n },\n ],\n});\n\nconst schema = z.object({\n name: z.string().min(1, \"Required field\"),\n trainingWeek: z.array(\n z.object({\n day: z.string().min(1, \"Required field\"),\n exercises: z.array(\n z.object({\n exerciseName: z.string().min(1, \"Required field\"),\n }),\n ),\n }),\n ),\n});\n\ntype Schema = z.infer\u003Ctypeof schema>;\n\nconst handleSubmit = (event: FormSubmitEvent\u003CSchema>) => {\n console.log(JSON.stringify(event.data, null, 2));\n};\n\nconst addExercise = (index: number) => {\n state.trainingWeek[index].exercises.push({ exerciseName: \"\" });\n};\n\nconst addDay = () => {\n state.trainingWeek.push({ day: \"\", exercises: [{ exerciseName: \"\" }] });\n};\n\u003C/script>\n\n```\n\nI render the form based on state and dynamically add fields.\n\nThe form automatically sets up errors for name ( or any first level fields ) but doesn't set up errors for nested ones like day or exerciseName in the above example\n\nWhat's the proper way to create dynamic forms and avail error setting ? \n\nI'm able to get the following:\n```json\nprofile.vue:68 ZodError: [\n {\n \"code\": \"too_small\",\n \"minimum\": 1,\n \"type\": \"string\",\n \"inclusive\": true,\n \"exact\": false,\n \"message\": \"Required field\",\n \"path\": [\n \"trainingWeek\",\n 0,\n \"day\"\n ]\n },\n {\n \"code\": \"too_small\",\n \"minimum\": 1,\n \"type\": \"string\",\n \"inclusive\": true,\n \"exact\": false,\n \"message\": \"Required field\",\n \"path\": [\n \"trainingWeek\",\n 0,\n \"exercises\",\n 0,\n \"exerciseName\"\n ]\n }\n]\n```\noutput by parsing schema \n```js\nwatchEffect(() => {\n try {\n schema.parse(state);\n } catch (error) {\n console.error(error);\n }\n});\n```\n\n",[3249],{"name":3168,"color":3169},2674,"How to ensure UForm and UFormGroup auto assigns errors for nested dynamic form.","2024-11-18T16:59:59Z","https://github.com/nuxt/ui/issues/2674",0.7685515,["Reactive",3256],{},["Set"],["ShallowReactive",3259],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$f3iFkRZiZ0YOw1ekl1TqCn9B5txeThAYYDHT36IeYjaE":-1},"/nuxt/ui/4648"]