\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```",[3175,3176],{"name":3146,"color":3147},{"name":3152,"color":3153},4873,"`UForm` `onSubmit` type is needlessly constrained","2025-09-02T05:54:14Z","https://github.com/nuxt/ui/issues/4873",0.749989,{"description":3183,"labels":3184,"number":3187,"owner":3155,"repository":3156,"state":3188,"title":3189,"updated_at":3190,"url":3191,"score":3192},"### Environment\n\n------------------------------\n- Operating System: Darwin\n- Node Version: v22.14.0\n- Nuxt Version: 3.17.6\n- CLI Version: 3.25.1\n- Nitro Version: 2.11.13\n- Package Manager: pnpm@10.11.0\n- Builder: -\n- User Config: compatibilityDate, future, css, components, modules, runtimeConfig, imports, vite, ssr, ignore\n- Runtime Modules: @nuxt/eslint@1.5.2, @nuxt/image@1.10.0, @vueuse/nuxt@13.5.0, @pinia/nuxt@0.11.1\n- Build Modules: -\n------------------------------\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.2.0\n\n### Reproduction\n\nhttps://codesandbox.io/p/devbox/nuxt-ui3-n3sxks\n\n### Description\n\nWhen using the UFormField component, passing the `error` prop using the Boolean attribute shorthand syntax does not work as expected.\n\nThis works correctly:\n\n```vue\n\u003CUFormField :label=\"`总额(${rowData?.marginAsset})`\" size=\"lg\" :error=\"true\" />\n```\n\nHowever, this does not work:\n```vue\n\u003CUFormField :label=\"`总额(${rowData?.marginAsset})`\" size=\"lg\" error />\n```\n\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3185,3186],{"name":3146,"color":3147},{"name":3149,"color":3150},4496,"closed","Boolean attribute not worked on `UFormField`","2025-07-10T10:04:09Z","https://github.com/nuxt/ui/issues/4496",0.71851796,{"description":3194,"labels":3195,"number":3204,"owner":3155,"repository":3156,"state":3188,"title":3205,"updated_at":3206,"url":3207,"score":3208},"### Environment\n\n- Operating System: `Darwin`\n- Node Version: `v22.1.0`\n- Nuxt Version: `3.16.2`\n- CLI Version: `3.24.0`\n- Nitro Version: `2.11.8`\n- Package Manager: `yarn@4.7.0`\n- Builder: `-`\n- User Config: `modules`, `ssr`, `components`, `app`, `css`, `runtimeConfig`, `compatibilityDate`, `nitro`, `vite`, `eslint`\n- Runtime Modules: `@pinia/nuxt@0.10.1`, `pinia-plugin-persistedstate/nuxt@4.2.0`, `@nuxt/ui@3.0.2`, `dayjs-nuxt@2.1.11`, `@nuxt/eslint@1.3.0`\n- Build Modules: `-`\n\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\n3.0.2\n\n### Reproduction\n\nhttps://codesandbox.io/p/sandbox/festive-feather-mzq49q\n\nIn the second select (which is wrapped in a form tag), don't select anything, and click save to submit the form.\n\nIt should show the browser \"this input is required\" tooltip.\n\n### Description\n\nI can't really understand why/how this happens. Sometimes, the `required` prop on a Select component will not prevent the form to be submitted. But sometimes it's working fine.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3196,3197,3198,3199,3202],{"name":3146,"color":3147},{"name":3149,"color":3150},{"name":3152,"color":3153},{"name":3200,"color":3201},"closed-by-bot","ededed",{"name":3203,"color":3201},"stale",3882,"Select required sometimes not working","2025-08-12T02:12:49Z","https://github.com/nuxt/ui/issues/3882",0.7324362,{"description":3210,"labels":3211,"number":3215,"owner":3155,"repository":3156,"state":3188,"title":3216,"updated_at":3217,"url":3218,"score":3219},"### 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```",[3212,3213,3214],{"name":3146,"color":3147},{"name":3149,"color":3150},{"name":3152,"color":3153},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.73663664,{"description":3221,"labels":3222,"number":3227,"owner":3155,"repository":3156,"state":3188,"title":3228,"updated_at":3229,"url":3230,"score":3231},"### 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 ?",[3223,3226],{"name":3224,"color":3225},"question","d876e3",{"name":3149,"color":3150},4402,"UForm dirty isn't reactive ?","2025-06-26T13:33:41Z","https://github.com/nuxt/ui/issues/4402",0.7376027,{"description":3233,"labels":3234,"number":3236,"owner":3155,"repository":3156,"state":3188,"title":3237,"updated_at":3238,"url":3239,"score":3240},"### 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",[3235],{"name":3224,"color":3225},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.7439655,{"description":3242,"labels":3243,"number":3247,"owner":3155,"repository":3156,"state":3188,"title":3248,"updated_at":3249,"url":3250,"score":3251},"### 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```",[3244,3245,3246],{"name":3146,"color":3147},{"name":3149,"color":3150},{"name":3152,"color":3153},3913,"[Form] Nested `UForm` in `UModal` is not rendered as `form`","2025-04-16T08:34:48Z","https://github.com/nuxt/ui/issues/3913",0.74686366,{"description":3253,"labels":3254,"number":3258,"owner":3155,"repository":3156,"state":3188,"title":3259,"updated_at":3260,"url":3261,"score":3262},"### For what version of Nuxt UI are you suggesting this?\n\nv2.x\n\n### Description\n\nHi,\n\nWould it be possible to add an export of all components ?\n\nSomething like:\n\n```js\nexport * from './components'\n```\n\n### Additional context\n\nI'm trying to display a form field according to its value type (ex: boolean => checkbox, number => range ...).\n\nSadly, it looks like in composition API, one cannot use string for `\u003Ccomponent>` `:is` prop.\n\n```vue\n\u003Ctemplate>\n \u003C!-- This doesn't work -->\n \u003Ccomponent :is=\"typeof value === 'boolean' ? 'u-checkbox' : 'u-input'\" />\n\u003C/template>\n```\n\nApparently, you have to pass the component itself, but I'm unable to import components from Nuxt UI:\n\n```vue\n\u003Cscript setup>\n// This doesn't work\nimport { UCheckbox, UInput } from '@nuxt/ui';\n\u003C/script>\n\n\u003Ctemplate>\n \u003Ccomponent :is=\"typeof value === 'boolean' ? UCheckbox : UInput\" />\n\u003C/template>\n```\n\nI can use `v-if` as a workaround, but it forces me to duplicate a lot of props (class, listeners, model ...) on each component.",[3255],{"name":3256,"color":3257},"enhancement","a2eeef",2891,"Export of every components","2025-01-13T16:32:50Z","https://github.com/nuxt/ui/issues/2891",0.7495023,["Reactive",3264],{},["Set"],["ShallowReactive",3267],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fH6AGlUnZFlPn2A0vHSZo2pUR1Jqp1i4tWhsbDyXIDl0":-1},"/nuxt/ui/4529"]