\n \u003C/u-form-field>\n \u003C/u-form>\n \u003C/u-app>\n\u003C/template>\n\n\u003Cscript setup>\nconst state = reactive({\n serialnumber: ''\n})\n\u003C/script>\n```\n\nChrome devtools console:\n```\n[Vue warn]: Hydration children mismatch on \u003Cform id=\"v-0\">…\u003C/form>\u003C!--[-->\u003Cdiv class=\"text-sm\">…\u003C/div>\u003C!--]-->\u003Ctextarea name style=\"display: none;\">\u003C/textarea>\u003C/form> \nServer rendered element contains more child nodes than client vdom. \n at \u003CUForm state= {serialnumber: ''}serialnumber: \"\"[[Prototype]]: Object > \n at \u003CApp key=4 > \n at \u003CNuxtRoot>\n```\n\nThis occurs on Nuxt UI 3.3.2 as well as 4.0.0-alpha.0. It persists even when my form is more complex and has a Valibot schema.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3241,3242,3243,3244],{"name":3146,"color":3147},{"name":3180,"color":3195},{"name":3152,"color":3153},{"name":3245,"color":3150},"v4",4846,"Form: Hydration mismatch","2025-09-03T19:01:35Z","https://github.com/nuxt/ui/issues/4846",0.7198227,{"description":3252,"labels":3253,"number":3257,"owner":3155,"repository":3156,"state":3168,"title":3258,"updated_at":3259,"url":3260,"score":3261},"### Environment\n\n- Operating System: Windows \n- Node Version: v20.19.0\n- Nuxt Version: 3.16.2\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.1.1\n\n### Reproduction\n\n- install the latest version `bun add @nuxt/ui@latest`\n- remove cache and node modules `bun nuxi cleanup` `rm .\\node_modules\\`\n- then install `bun install`\n\nIn `nuxt.config.ts` add a custom prefix `{ ui: { prefix: \"Ob\" } } `\nand use the `CheckboxGroup` component as mentioned in docs (and dont forget your custom prefix).\nEx: ` \u003CObCheckboxGroup class=\"bg-red-200\" variant=\"card\" :default-value=\"['System']\" :items=\"items\" />`\n\nFinally run the code and you will see nothing will show.\n\n### Description\n\nI inspected the Dom and noticed `\u003Cucheckbox id=\"v-0-0-0-3-0-0:System\" label=\"System\" disabled=\"false\" value=\"System\">\u003C/ucheckbox>` is being used iterated for all the items. I've then inspected the node modules (\"../node_modules/@nuxt/ui/dist/runtime/components/CheckboxGroup.vue\") for that component after a clean install and saw UCheckbox is being directly used inside the CheckboxGroup component. Inside the node_module component, if i swap out UCheckbox with ObCheckbox, then the code will work as expected. \n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3254,3255,3256],{"name":3146,"color":3147},{"name":3149,"color":3150},{"name":3152,"color":3153},4090,"UCheckboxGroup items don't adhere to the custom prefix","2025-05-06T10:15:57Z","https://github.com/nuxt/ui/issues/4090",0.72108006,{"description":3263,"labels":3264,"number":3269,"owner":3155,"repository":3156,"state":3168,"title":3270,"updated_at":3271,"url":3272,"score":3273},"### Environment\n\n------------------------------\n- Operating System: Darwin\n- Node Version: v24.2.0\n- Nuxt Version: 4.0.1\n- CLI Version: 3.27.0\n- Nitro Version: 2.12.4\n- Package Manager: npm@11.3.0\n- Builder: -\n- User Config: compatibilityDate, devtools, extends, pinia, css, ui, modules, runtimeConfig, nitro\n- Runtime Modules: @nuxt/eslint@1.7.1, @nuxt/image@1.10.0, @nuxt/ui@3.3.0, @pinia/nuxt@0.11.2, pinia-plugin-persistedstate/nuxt@4.4.1\n- Build Modules: -\n------------------------------\n\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\n4.0.1\n\n### Reproduction\n\n```\n\u003Ctemplate>\n \u003Cdiv class=\"flow-root mb-3\">\n \u003Cul role=\"list\" class=\"-my-6 divide-y divide-gray-200\">\n \u003Cli v-for=\"product in basketStore.items\" :key=\"product.rid\" class=\"flex py-6\">\n \u003Cdiv class=\"hidden sm:block h-24 w-24 flex-shrink-0 overflow-hidden rounded-md border border-gray-200\">\n \u003CProductsProductImage />\n \u003C/div>\n\n \u003Cdiv class=\"ml-4 flex flex-1 flex-col\">\n \u003Cdiv>\n \u003Cdiv class=\"flex justify-between text-base font-medium text-gray-900 mb-2\">\n \u003CNuxtLink :to=\"'/product/' + product.id\">{{ product.name }}\u003C/NuxtLink>\n \u003Cp class=\"ml-4\">£{{ product.selectedQuantity?.price }}\u003C/p>\n \u003C/div>\n \u003C/div>\n\n \u003Cdiv class=\"flex flex-1 flex-col md:flex-row items-end justify-between text-sm text-black gap-4\">\n \u003Cdiv class=\"w-full flex flex-col md:flex-row flex-wrap gap-2 \">\n \u003CUSelectMenu v-if=\"hasMultipleSkus(product)\" class=\"max-w-56\" v-model=\"product.selectedSku\"\n :search-input=\"false\" :label-key=\"'name'\" :items=\"product.skus\"\n @update:modelValue=\"changeSku($event as Sku, product)\">\n \u003C/USelectMenu>\n \u003Cpre>{{ product.selectedQuantity }}\u003C/pre>\n \u003CUSelectMenu v-model=\"product.selectedQuantity\" :search-input=\"false\"\n :label-key=\"'quantity'\" class=\"max-w-56\" :items=\"updatePricesWithStock(product)\"\n @update:modelValue=\"changeQuantity($event as QuantityPrice, product)\">\n \u003Ctemplate #item=\"{ item }\">\u003Cspan>{{ item.quantity }}\u003C/span>\u003Cspan\n v-if=\"item.disabled\">Out of\n stock\u003C/span>\u003C/template>\n \u003C/USelectMenu>\n \u003C/div>\n \u003Cdiv class=\"flex\">\n \u003Cbutton type=\"button\" class=\"font-medium text-primary-500 hover:text-primary-600\"\n @click=\"basketStore.remove(product.rid)\">Remove\u003C/button>\n \u003C/div>\n\n \u003C/div>\n\n \u003C/div>\n \u003C/li>\n\n \u003C/ul>\n \u003C/div>\n\u003C/template>\n\u003Cscript setup lang=\"ts\">\nimport type { Product, Sku, QuantityPrice } from '../../types';\n\nfunction changeSku(sku: Sku, item: Product) {\n\n}\n\nfunction hasMultipleSkus(item: Product): boolean {\n\n}\n\n\nfunction changeQuantity(quantity: QuantityPrice, item: Product) {\n\n}\n\n// Helper function to map prices and add \"disabled\" property - see other \nconst updatePricesWithStock = (item: any) => {\n return item.selectedSku?.prices.map((price: QuantityPrice) => ({\n ...price,\n disabled: !item?.onDemand && price.quantity > item.selectedSku?.stock\n }));\n};\n\n\n\u003C/script>\n```\n\n### Description\n\n_(Not sure whether to include this issue in Nuxt or Nuxt UI)_\n\nI have a base component that uses a selectMenu with an array. In Nuxt 3.17.6 with compatibiltyVersion: 4 set, the SelectMenu works as expected. When upgrading to nuxt 4 the label key no longer works. I'll attach screenshots and the code is in the reproduction section.\n**Nuxt 3.17.6**\n\u003Cimg width=\"736\" height=\"216\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/04967fa3-d156-46e2-b74d-f060ec68fcc4\" />\n\n**Nuxt 4**\n\u003Cimg width=\"751\" height=\"220\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/8ccf4caf-12f1-46d0-beda-9ebea3b1eee3\" />\n\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3265,3266,3267,3268],{"name":3146,"color":3147},{"name":3180,"color":3195},{"name":3149,"color":3150},{"name":3152,"color":3153},4627,"SelectMenu | Label Key not working correctly with Nuxt 4?","2025-07-30T09:17:46Z","https://github.com/nuxt/ui/issues/4627",0.72131455,["Reactive",3275],{},["Set"],["ShallowReactive",3278],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$frcb11tTLmCKA9srHizIsgEP3pPa67EVH0eZ-2RoU1Xg":-1},"/nuxt/ui/3998"]