\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```",[3171,3174],{"name":3172,"color":3173},"bug","d73a4a",{"name":3175,"color":3176},"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.6586284,{"description":3186,"labels":3187,"number":3196,"owner":3178,"repository":3179,"state":3197,"title":3198,"updated_at":3199,"url":3200,"score":3201},"### Environment\n\n------------------------------\n- Operating System: Darwin\n- Node Version: v23.9.0\n- Nuxt Version: 3.15.4\n- CLI Version: 3.22.3\n- Nitro Version: -\n- Package Manager: pnpm@10.5.2\n- Builder: -\n- User Config: compatibilityDate, devtools, modules, css, ui, runtimeConfig\n- Runtime Modules: @nuxt/ui-pro@3.0.0-beta.2, @pinia/nuxt@0.10.1\n- Build Modules: -\n------------------------------\n\n👉 Report an issue: https://github.com/nuxt/nuxt/issues/new?template=bug-report.yml\n👉 Suggest an improvement: https://github.com/nuxt/nuxt/discussions/new\n👉 Read d\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\n3.0.0-beta.2\n\n### Reproduction\n\nhttps://codesandbox.io/p/devbox/relaxed-scooby-nv4zrp?file=%2Fapp%2Fpages%2Findex.vue%3A7%2C51\n\n### Description\n\nI was importing type `FormSubmitEvent` from Nuxt UI but when I shifted to nuxt ui pro and replaced the import. But it broke, because nuxt ui pro doesn't export this type\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3188,3189,3192,3195],{"name":3172,"color":3173},{"name":3190,"color":3191},"v3","49DCB8",{"name":3193,"color":3194},"nuxt/ui-pro","00dc82",{"name":3175,"color":3176},3465,"closed","type `FormSubmitEvent` not working in nuxt ui pro version 3","2025-05-10T17:33:04Z","https://github.com/nuxt/ui/issues/3465",0.68228835,{"description":3203,"labels":3204,"number":3208,"owner":3178,"repository":3179,"state":3197,"title":3209,"updated_at":3210,"url":3211,"score":3212},"### Environment\n\n- Operating System: Linux\n- Node Version: v22.11.0\n- Nuxt Version: 4.0.3\n- CLI Version: 3.27.0\n- Nitro Version: 2.12.4\n- Package Manager: pnpm@10.14.0\n- Builder: -\n- User Config: modules, $production, components, devtools, app, css, site, mdc, ui, compatibilityDate, nitro, vite, eslint, fonts, icon, linkChecker, ogImage, seo, sitemap\n- Runtime Modules: @nuxtjs/seo@3.1.0, @vueuse/nuxt@13.7.0, @nuxt/ui@3.3.2, @nuxt/eslint@1.9.0, @nuxt/scripts@0.11.10, motion-v/nuxt@1.7.0, @nuxtjs/mdc@0.17.2\n- Build Modules: -\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Package\n\nv3.x\n\n### Version\n\nv3.3.2\n\n### Reproduction\n\n```vue\n\u003Cscript setup lang=\"ts\">\n// This causes TypeScript error\nconst handleFileChange = (file: File | File[] | null) => {\n console.log(file);\n};\n\u003C/script>\n\n\u003Ctemplate>\n \u003CUFileUpload @update:model-value=\"handleFileChange\" />\n\u003C/template>\n```\n\n### Description\n\nThe `@update:model-value` event handler for `UFileUpload` component emits `unknown` type instead of the documented type `File | File[] | null | undefined`.\n\n**Expected Behavior (per documentation)**\nAccording to the [official documentation](https://ui.nuxt.com/components/file-upload#emits), the `@update:model-value` event should emit:\n- `[value: File | File[] | null | undefined]`\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3205,3206,3207],{"name":3172,"color":3173},{"name":3190,"color":3191},{"name":3175,"color":3176},4852,"Type mismatch: UFileUpload @update:model-value emits unknown instead of documented type","2025-09-01T10:56:13Z","https://github.com/nuxt/ui/issues/4852",0.6837946,{"description":3214,"labels":3215,"number":3219,"owner":3178,"repository":3178,"state":3197,"title":3220,"updated_at":3221,"url":3222,"score":3223},"### Describe the feature\n\nI wrote a custom `FormWrapper` component in Vue that takes a validation schema as parameter to validate the form before to submit it (mainly working with `inject` and `provide`).\n\n```vue\n\u003CFormWrapper :schema :submitInfo @onFormSubmitSuccess=\"onFormSubmitSuccess\">\n \u003CFormInputText name=\"title\" label=\"Title\" type=\"text\" placeholder=\"Book's title\" autocomplete=\"off\" />\n \u003CFormInputText name=\"author\" label=\"Book's author\" type=\"text\" placeholder=\"Jeanne Doe\" autocomplete=\"off\" />\n \u003CFormButton class=\"self-end w-fit\">Add new book\u003C/FormButton>\n \u003CFormApiErrorText class=\"self-end text-end\" />\n\u003C/FormWrapper>\n\n\u003Cscript lang=\"ts\" setup>\n//Form\nconst schema = z.object({ title : z.string(), author : z.string() });\nconst submitInfo: FormNitroSubmitInfoType = {\n httpMethod: \"POST\",\n endpoint: \"/api/user/book/add\"\n};\n\n//Success callback\nfunction onFormSubmitSuccess(info: FormOnFormSubmitSuccessResponse\u003Ctypeof schema, \"/api/user/book/add\", \"post\">) {\n console.log(\"Success !\");\n}\n\u003C/script>\n```\n\nThe issue is that I needed to write infered type from Nuxt available type with some trickshots:\n```ts\nimport type { AvailableRouterMethod, NitroFetchOptions, NitroFetchRequest } from \"nitropack\";\n\n//Components types\nexport type HTTP_METHOD_TYPE = \"GET\" | \"POST\" | \"PUT\" | \"DELETE\";\nexport type ZodInstanceOf\u003CT extends z.ZodType\u003Cany, any, any>> = z.infer\u003CT>;\nexport type FormNitroSubmitInfoType = { httpMethod: HTTP_METHOD_TYPE; endpoint: NitroFetchRequest };\nexport type FormNonPrefillableFields = string[]; //Default is captcha\n\n//Trickshots for return inference\nexport type FormNitroResponseType\u003CR extends NitroFetchRequest, Y extends AvailableRouterMethod\u003CR>> = Awaited\u003CReturnType\u003Ctypeof $fetch\u003Cunknown, R, { method: Y } & NitroFetchOptions\u003CR, Y>>>>;\nexport type FormOnFormSubmitSuccessResponse\u003CX extends z.ZodType\u003Cany, any, any>, R extends NitroFetchRequest, Y extends AvailableRouterMethod\u003CR>> = {\n payload: ZodInstanceOf\u003CX>;\n response: FormNitroResponseType\u003CR, Y>;\n};\n```\n\nResulting in sometimes: `error TS2321: Excessive stack depth comparing types`;\nCould it be possible to expose directly from Nuxt available type, a type that would resolve to the return type of an API Endpoint? \n\nSomething like: \n```ts\nconst response: RouteResults\u003C\"/api/admin/charmap/replacements\", \"post\"> = ...\n```\n\nThis would helps a lot to use the inferred type provided from Nuxt.\n\nMaybe there is another way to do that?\n\n### Additional information\n\n- [ ] Would you be willing to help implement this feature?\n- [ ] Could this feature be implemented as a module?\n\n### Final checks\n\n- [x] Read the [contribution guide](https://nuxt.com/docs/community/contribution).\n- [x] Check existing [discussions](https://github.com/nuxt/nuxt/discussions) and [issues](https://github.com/nuxt/nuxt/issues).",[3216],{"name":3217,"color":3218},"pending triage","E99695",32039,"Expose a type infered from route response based on route name (NitroFetchRequest) and http method","2025-05-08T12:09:34Z","https://github.com/nuxt/nuxt/issues/32039",0.6962661,{"description":3225,"labels":3226,"number":3229,"owner":3178,"repository":3179,"state":3197,"title":3230,"updated_at":3231,"url":3232,"score":3233},"### Environment\n\n- Operating System: `Windows_NT`\n- Node Version: `v22.18.0`\n- Nuxt Version: `4.1.1`\n- CLI Version: `3.28.0`\n- Nitro Version: `2.12.4`\n- Package Manager: `npm@11.5.2`\n- Builder: `-`\n- User Config: `runtimeConfig`, `modules`, `devtools`, `supabase`, `css`, `routeRules`, `compatibilityDate`\n- Runtime Modules: `@nuxt/ui-pro@3.3.3`, `@vueuse/nuxt@13.9.0`, `@nuxtjs/supabase@1.6.2`, `nuxt-charts@0.2.3`\n- Build Modules: `-`\n\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Package\n\nv3.x\n\n### Version\n\nv3.3.3\n\n### Reproduction\n\nhttps://codesandbox.io/p/devbox/zen-euclid-cf554n\n\n### Description\n\nThe problem occurs because the UFileUpload component likely contains a button element that doesn't have an explicit type attribute, causing it to default to type=\"submit\", which triggers form submission.\n\n### Additional context\n\n```\n\u003Ccomponent\n :is=\"variant === 'button' ? 'button' : 'div'\"\n ref=\"dropzoneRef\"\n :type=\"variant === 'button' ? 'button' : undefined\" // 👈 add this maybe?\n :role=\"variant === 'button' ? undefined : 'button'\"\n :data-dragging=\"isDragging\"\n :class=\"ui.base({ class: props.ui?.base })\"\n :tabindex=\"interactive && !disabled ? 0 : -1\"\n @click=\"interactive && !disabled && open()\" \n @keydown.prevent\n @keyup.enter.space=\"interactive && !disabled && open()\"\n>\n```\n\n### Logs\n\n```shell-script\n\n```",[3227,3228],{"name":3172,"color":3173},{"name":3190,"color":3191},4935,"UFileUpload with variant button inside form will cause UForm submit","2025-09-09T14:55:29Z","https://github.com/nuxt/ui/issues/4935",0.7022928,{"description":3235,"labels":3236,"number":3241,"owner":3178,"repository":3179,"state":3197,"title":3242,"updated_at":3243,"url":3244,"score":3245},"### Environment\n\nNuxt 3.15.4\nNuxt UI https://pkg.pr.new/@nuxt/ui@e7e7585\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\n3.15.4\n\n### Reproduction\n\n-\n\n### Description\n\nJust noticed the following components work as expected in a fieldForm\n\n```\n \u003CUFormField\n v-if=\"isVisible\"\n :name=\"fieldName\"\n :label=\"field['#title']\"\n :required=\"!!field['#required']\"\n >\n \u003Ctemplate\n v-if=\"descriptionContent && field['#type'] !== 'checkbox'\"\n #description\n >\n \u003Cspan v-html=\"cleanHTML(descriptionContent)\" />\n \u003C/template>\n\n \u003Ccomponent\n v-if=\"resolvedComponent\"\n :is=\"resolvedComponent\"\n :field=\"field\"\n :fieldName=\"fieldName\"\n :state=\"state\"\n />\n\n \u003Ctemplate v-if=\"helpContent\" #help>\n \u003Cspan v-html=\"cleanHTML(helpContent)\" />\n \u003C/template>\n \u003C/UFormField>\n```\n\n ```\n \u003CURadioGroup\n v-model=\"state[fieldName]\"\n :items=\"transformOptions(field['#options'] || {})\"\n orientation=\"horizontal\"\n class=\"w-full\"\n />\n```\n\n```\n \u003CUSelect\n v-model=\"state[fieldName]\"\n placeholder=\"Select\"\n :items=\"transformOptions(field['#options'] || {})\"\n class=\"w-full\"\n />\n\n```\nHowever when using a UCheckbox label and description have to be set here\n\n```\n \u003CUCheckbox\n v-model=\"checkboxValue\"\n :label=\"field['#title']\"\n :description=\"field['#description']\"\n class=\"w-full\"\n @update:model-value=\"props.state[fieldName] = $event\"\n />\n```\n\nSeems like this is a bug or maybe this is by design?\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3237,3240],{"name":3238,"color":3239},"question","d876e3",{"name":3190,"color":3191},3294,"UCheckbox fieldform support","2025-02-12T19:23:36Z","https://github.com/nuxt/ui/issues/3294",0.71179235,{"description":3247,"labels":3248,"number":3252,"owner":3178,"repository":3179,"state":3197,"title":3253,"updated_at":3254,"url":3255,"score":3256},"### 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```",[3249,3250,3251],{"name":3172,"color":3173},{"name":3190,"color":3191},{"name":3175,"color":3176},3913,"[Form] Nested `UForm` in `UModal` is not rendered as `form`","2025-04-16T08:34:48Z","https://github.com/nuxt/ui/issues/3913",0.713199,{"description":3258,"labels":3259,"number":3262,"owner":3178,"repository":3179,"state":3197,"title":3263,"updated_at":3264,"url":3265,"score":3266},"### 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```",[3260,3261],{"name":3172,"color":3173},{"name":3190,"color":3191},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.7195089,{"description":3268,"labels":3269,"number":3271,"owner":3178,"repository":3179,"state":3197,"title":3272,"updated_at":3273,"url":3274,"score":3275},"### 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",[3270],{"name":3238,"color":3239},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.72114843,{"description":3277,"labels":3278,"number":3285,"owner":3178,"repository":3179,"state":3197,"title":3286,"updated_at":3287,"url":3288,"score":3289},"### For what version of Nuxt UI are you asking this question?\n\nv2.x\n\n### Description\n\nHow can i use [Zod](https://zod.dev/) to validate an [UInput file field](https://ui.nuxt.com/components/input#type)? \n\nLet's say you have the following code:\n(I found the example over [here](https://blog.stackademic.com/upgrade-your-full-stack-form-validation-with-zod-and-react-hook-form-in-next-js-107b014628a3).)\n\n```vue\n\u003CUForm :schema=\"schema\" :state=\"state\" @submit=\"onSubmit\">\n\n \u003CUFormGroup name=\"picture\" label=\"Picture\">\n \u003CUInput v-model=\"state.picture\" type=\"file\" @change=\"onChangeFile\"/>\n \u003C/UFormGroup>\n\n \u003CUButton type=\"submit\">\n Submit\n \u003C/UButton>\n\n\u003C/UForm>\n```\n\n```ts\n\u003Cscript setup lang=\"ts\">\n import { z } from 'zod';\n\n const state = reactive({\n picture: undefined,\n })\n\n const schema = z.object({\n picture: z.custom\u003CFileList>()\n .transform((val) => {\n if (val instanceof File) return val;\n if (val instanceof FileList) return val[0];\n return null;\n })\n .superRefine((file, ctx) => {\n if (!(file instanceof File)) {\n ctx.addIssue({\n code: z.ZodIssueCode.custom,\n fatal: true,\n message: 'Not a file',\n });\n return z.NEVER;\n }\n if (file.size > 5 * 1024 * 1024) {\n ctx.addIssue({\n code: z.ZodIssueCode.custom,\n message: 'Max file size allowed is 5MB',\n });\n }\n if (\n !['image/jpeg', 'image/png', 'image/webp', 'image/jpg'].includes(\n file.type\n )\n ) {\n ctx.addIssue({\n code: z.ZodIssueCode.custom,\n message: 'File must be an image (jpeg, jpg, png, webp)',\n });\n }\n })\n });\n\n type Schema = z.infer\u003Ctypeof schema>;\n\n async function onSubmit (event: FormSubmitEvent\u003CSchema>) {\n console.log(event.data);\n }\n\u003C/script>\n```\n\nAs aspected the following onChange function logs a FileList\n\n```ts\nfunction onChangeFile(event: Event) {\n console.log(event)\n}\n```\n\nBut when I log val in the transform function of Zod\n\n```ts\n.transform((val) => {\n console.log(val);\n if (val instanceof File) return val;\n if (val instanceof FileList) return val[0];\n return null;\n})\n```\n\nI get a string like this:\n\n```\nC:\\fakepath\\Screenshot 2024-10-25 at 10.26.36.png\n```\n\nCan someone please help me out, i'm looking for a few days now for a solution.",[3279,3280,3283],{"name":3238,"color":3239},{"name":3281,"color":3282},"closed-by-bot","ededed",{"name":3284,"color":3282},"stale",2462,"UInput with type='file', how to validate with Zod?","2025-06-18T09:05:55Z","https://github.com/nuxt/ui/issues/2462",0.72393334,["Reactive",3291],{},["Set"],["ShallowReactive",3294],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fuPh0NWAYaiOo_CQidAc9waGol03bOtme-r_G_FVKOSM":-1},"/nuxt/ui/5115"]