\n\nIt can be worked around using `item-label` slot, but it would be nice if developer can use `items` props only to implement it for simpler way.\n\nBelow, I have tried to create it using Reka UI `combobox` component, the component used by SelectMenu.\n\n\u003Cimg width=\"329\" height=\"460\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/e5cda771-3f8e-4369-bb3b-d5159f84d425\" />\n\n### Additional context\n\n_No response_",[3139,3142,3145],{"name":3140,"color":3141},"enhancement","a2eeef",{"name":3143,"color":3144},"v3","49DCB8",{"name":3146,"color":3147},"triage","ffffff",4661,"nuxt","ui","open","SelectMenu: add description props to show text below title","2025-08-06T02:19:32Z","https://github.com/nuxt/ui/issues/4661",0.7352369,{"description":3157,"labels":3158,"number":3161,"owner":3149,"repository":3150,"state":3151,"title":3162,"updated_at":3163,"url":3164,"score":3165},"### Package\n\nv3.x\n\n### Description\n\nI want to use CheckboxGroup to choose from a list of users with avatars (like in USelectMenu [example](https://ui.nuxt.com/components/select-menu#with-avatar-in-items)).\nTo implement this I need to pass a list of items with a type \"CheckboxGroupItem\", which doesn't have an Avatar field.\nAs an idea it's possible to use SelectMenuItem or DropdownMenuItem merged with CheckboxGroupItem.\nAlso it is possible to use `#label` slot in CheckboxGroup, but need an example, how to use it. \nSeems that you can't pass avatar to the slot as field of the item nether.\n\n### Additional context\n\n_No response_",[3159,3160],{"name":3140,"color":3141},{"name":3146,"color":3147},4848,"[Checkbox and CheckboxGroup] Add Avatar before and after the label","2025-08-30T07:46:47Z","https://github.com/nuxt/ui/issues/4848",0.7499096,{"description":3167,"labels":3168,"number":3172,"owner":3149,"repository":3150,"state":3151,"title":3173,"updated_at":3174,"url":3175,"score":3176},"### Description\n\nFor [SelectMenu](https://ui.nuxt.com/components/select-menu) seems to be no option to customize the label of the selected item, e.g. use multiple values to compose the label. Currently only one item value can be selected by prop `labelKey`, but it is not possible to use multiple values OR to even add custom html-code.\n\n**Example:**\n\n```ts\nconst items = [\n {\n id: 1,\n firstName: 'Max',\n lastName: 'Mustermann',\n },\n ...\n]\n```\n\nThe items to select can be fully customized, even with custom html code:\n\n```vue\n\u003Ctemplate #item-label=\"{ item }\">\n {{ item.firstName }} \u003Cspan class=\"text-highlighted\">{{ item.lastName}}\u003C/span>\n \u003Cdiv class=\"text-xs text-muted\">#{{ item.customerId }}\u003C/div>\n\u003C/template>\n```\n\nBut when an item is selected, the selected item can only be one value:\n\n```vue\n\u003CUSelectMenu label-key=\"lastName\" />\n```\n\n**Possible solutions:**\n\n1. Make a new label prop that accepts a function, so values can be compound:\n\n```ts\n\u003CUSelectMenu :label=\"(item) => item.firstName + ' ' + item.lastName\"\n```\n\n2. Optionally make a slot to customize the labels: \n```vue\n\u003CUSelectMenu>\n \u003Ctemplate #label=\"{ item }\">\n {{ item.firstName }} \u003Cspan class=\"text-highlighted\">{{ item.lastName}}\u003C/span>\n \u003Cspan class=\"text-xs text-muted\">#{{ item.customerId }}\u003C/span>\n \u003C/template>\n\u003C/USelectMenu>\n```\n\nP.S. the prop `labelKey` is not documented https://ui.nuxt.com/components/select-menu#props\n",[3169,3170,3171],{"name":3140,"color":3141},{"name":3143,"color":3144},{"name":3146,"color":3147},4581,"SelectMenu: Compound label","2025-07-23T16:38:06Z","https://github.com/nuxt/ui/issues/4581",0.7572035,{"description":3178,"labels":3179,"number":3185,"owner":3149,"repository":3150,"state":3151,"title":3186,"updated_at":3187,"url":3188,"score":3189},"### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.3.0\n\n### Reproduction\n\nhttps://codesandbox.io/p/devbox/winter-bush-zyn48t?file=%2Fapp%2Fapp.vue%3A4%2C33\n\n### Description\n\nFor some reason the badge is not diplayed when it is a number `0` even tho it has been recently set to be not displayed only when undefined in #b22891a https://github.com/nuxt/ui/commit/b22891abe68c40d4a33fbbcedac93e3a6be9951f\n",[3180,3183,3184],{"name":3181,"color":3182},"bug","d73a4a",{"name":3143,"color":3144},{"name":3146,"color":3147},4670,"`NavigationMenuItem` badge is not displayed when `0`","2025-08-06T13:08:54Z","https://github.com/nuxt/ui/issues/4670",0.7606234,{"description":3191,"labels":3192,"number":3196,"owner":3149,"repository":3150,"state":3197,"title":3198,"updated_at":3199,"url":3200,"score":3201},"### Description\n\nVisually equal `UNavigationMenu` has a `badge` prop but `UTabs` is missing this feature\n\n\u003Cimg width=\"685\" height=\"55\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/889b4d58-fecf-4358-9501-8adfa8609133\" />\n\n### Additional context\n\nOriginally implemented within #2627 but missing in v3\n\nYes it can be done be using a slot, but it would provide great DX to have the prop. ",[3193,3194,3195],{"name":3140,"color":3141},{"name":3143,"color":3144},{"name":3146,"color":3147},4548,"closed","Add badge option to UTabs","2025-07-21T14:55:28Z","https://github.com/nuxt/ui/issues/4548",0.71928257,{"description":3203,"labels":3204,"number":3212,"owner":3149,"repository":3150,"state":3197,"title":3213,"updated_at":3214,"url":3215,"score":3216},"### Environment\n\n- Operating System: Windows_NT\n- Node Version: v22.8.0\n- Nuxt Version: 3.13.2\n- CLI Version: 3.13.2\n- Nitro Version: 2.9.7\n- Package Manager: yarn@1.22.22\n- Builder: -\n- User Config: modules, plugins, css, colorMode, tiptap, runtimeConfig, nitro, routeRules, compatibilityDate\n- Runtime Modules: @nuxt/ui@2.20.0, @pinia/nuxt@0.5.4, @vueuse/nuxt@11.1.0, nuxt-tiptap-editor@2.0.0\n- Build Modules: -\n\n### Version\n\nv2.20.0\n\n### Reproduction\n\n```\n\u003Cscript setup lang=\"ts\">\nenum DiscountType {\n Fixed = 0,\n Percentage = 1\n}\n\nconst types = [\n {\n label: \"€\",\n value: DiscountType.Fixed\n },\n {\n label: \"%\",\n value: DiscountType.Percentage\n }\n]\nconst type = ref\u003CDiscountType>(DiscountType.Fixed)\n\u003C/script>\n\n\u003Ctemplate>\n \u003CUSelectMenu v-model=\"type\" :options=\"types\" value-attribute=\"value\" />\n\u003C/template>\n```\n\nSelectMenu does not display the label associated to the falsy value \"0\":\n\n\nThe list is populated with both values:\n\n\nThe label associated to the truthy value \"1\" is displayed as expected:\n\n\n### Description\n\nAll falsy values are not displayed anymore since v2.20.0 due to the rework of the computed `label` in the SelectMenu component.\n\nHere is the definition of this computed in `/src/runtime/components/form/SelectMenu.vue`:\n```\nconst label = computed(() => {\n if (!props.modelValue) return null\n\n if (Array.isArray(props.modelValue) && props.modelValue.length) {\n return `${props.modelValue.length} selected`\n } else if (['string', 'number'].includes(typeof props.modelValue)) {\n return props.valueAttribute ? accessor(selected.value, props.optionAttribute) : props.modelValue\n }\n\n return accessor(props.modelValue as Record\u003Cstring, any>, props.optionAttribute)\n})\n```\n\n**The component should treat `0`, `\"\"` and `false` as \"acceptable\" labelled values.**\n\nI believe the first condition should be either :\n`if(props.modelValue == null) return null` \nOr:\n`if(props.modelValue === null || props.modelValue === undefined) return null` \n\n### Additional context\n\nI will try to find some time to create a pull request if this is accepted as an issue. Not sure I can manage to do it short-term though.\n\n### Logs\n\n```shell-script\n\n```",[3205,3206,3207,3210],{"name":3181,"color":3182},{"name":3146,"color":3147},{"name":3208,"color":3209},"closed-by-bot","ededed",{"name":3211,"color":3209},"stale",3132,"SelectMenu label not displayed for falsy values","2025-06-18T09:02:30Z","https://github.com/nuxt/ui/issues/3132",0.74568456,{"description":3218,"labels":3219,"number":3223,"owner":3149,"repository":3150,"state":3197,"title":3224,"updated_at":3225,"url":3226,"score":3227},"### Description\n\nAs the title says, I think it would be nice to introduce a prop named `square` (like the one for the `Button` component) to be able to have a squared badge for those times where you have only the `icon` and not a label.\n\nCan I get this assigned? I would like to open a PR about this :)\n\n### Additional context\n\n_No response_",[3220,3221,3222],{"name":3140,"color":3141},{"name":3143,"color":3144},{"name":3146,"color":3147},4006,"[Badge] introduce prop `square`","2025-05-13T12:44:24Z","https://github.com/nuxt/ui/issues/4006",0.75231,{"description":3229,"labels":3230,"number":3233,"owner":3149,"repository":3150,"state":3197,"title":3234,"updated_at":3235,"url":3236,"score":3237},"### Description\n\nUSelect displays the label of the selected value. It might be interesting to add a slot to display another key when item is an object instead of the chosen label for some use case.\n\nMy own use case is picking the language :\n\n```\nconst items = [\n { value: 'en', label: 'English' },\n { value: 'fr', label: 'Français' },\n (...)\n]\n```\n\nMy open selection would display flags and labels, but once selected, the component would only display the value ('en' or 'fr' or ...). Could be the icon as well.\n\nProposal :\n\nselectLabelKey : When items is an array of objects, select the field to use as the label for the picked value on the base component (instead of labelKey)\n\n### Additional context\n\n_No response_",[3231,3232],{"name":3140,"color":3141},{"name":3143,"color":3144},4157,"USelect base text display","2025-05-23T12:25:54Z","https://github.com/nuxt/ui/issues/4157",0.75411755,{"description":3239,"labels":3240,"number":3246,"owner":3149,"repository":3247,"state":3197,"title":3248,"updated_at":3249,"url":3250,"score":3251},"Update [Webreinvent partner page](https://nuxt.com/support/agencies/webreinvent) with content below :\n\nWebReinvent has 12+ years of experience building software and a team of 50+ software professionals including software developers, UI/UX designers, testers, DevOps, project managers, etc. The team is well-versed in the Nuxt ecosystem and has delivered multiple high-performance web apps, dashboards, real-time apps, multi-tenant SaaS applications, etc.\n\nWe are one of the most process-driven companies and we love to follow industry standards. Some of them are managing git repo, code review/audits, deploying new releases via CI/CD, automated software testing, maintaining detailed technical documentation, application performance monitoring, etc. We have been delivering MVP to enterprise-level software products from startup to MSME.\n\nContact us to build your MVP fast or migrate your legacy software to Nuxt or maintain your existing software or scale your software to the enterprise level. We're here to help.\n",[3241,3243],{"name":3140,"color":3242},"1ad6ff",{"name":3244,"color":3245},"marketing","f5c828",1156,"nuxt.com","Update Webreinvent partner page","2023-06-06T12:14:42Z","https://github.com/nuxt/nuxt.com/issues/1156",0.7553566,{"description":3253,"labels":3254,"number":3258,"owner":3149,"repository":3149,"state":3197,"title":3259,"updated_at":3260,"url":3261,"score":3262},"### Environment\n\n------------------------------\r\n- Operating System: Linux\r\n- Node Version: v20.14.0\r\n- Nuxt Version: 3.12.4\r\n- CLI Version: 3.12.0\r\n- Nitro Version: 2.9.7\r\n- Package Manager: pnpm@9.7.1\r\n- Builder: -\r\n- User Config: runtimeConfig, extends, modules, ui, colorMode, routeRules, devtools, typescript, future, eslint, nitro, i18n, compatibilityDate\r\n- Runtime Modules: @nuxt/eslint@0.5.0, @nuxt/fonts@0.7.1, @nuxt/ui@2.18.4, @vueuse/nuxt@10.11.0, @nuxtjs/i18n@8.5.0\r\n- Build Modules: -\r\n------------------------------\r\n\n\n### Reproduction\n\nhttps://stackblitz.com/edit/nuxt-ui-u6tm1b?file=app.vue\n\n### Describe the bug\n\nWhen using a `v-model` prop with some initial object values (such as fetched already selected data from backend), the `\u003CUSelectMenu>` component doesn't show these as selected and seems to ignore them completely.\r\n\r\nEven when selecting the same objects again, it just seems to add them to the array and disregard anything, that was there previously.\n\n### Additional context\n\nThe behaviour changes when setting the `by` prop. In my case, I set it to `id`, after which I can see the object as selected, **but only** in the dropdown.\r\nThe button itself still shows `0 selected`.\n\n### Logs\n\n_No response_",[3255],{"name":3256,"color":3257},"pending triage","E99695",28733,"SelectMenu initial object values","2024-08-28T03:27:34Z","https://github.com/nuxt/nuxt/issues/28733",0.75607437,["Reactive",3264],{},["Set"],["ShallowReactive",3267],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fcA0050hTEexACJYF2LvvVBYxKZCcIwHg6OGPfOwqDGk":-1},"/nuxt/ui/1088"]