\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",[3019,3022,3025],{"name":3020,"color":3021},"enhancement","a2eeef",{"name":3023,"color":3024},"v3","49DCB8",{"name":3026,"color":3027},"triage","ffffff",4581,"nuxt","ui","open","SelectMenu: Compound label","2025-07-23T16:38:06Z","https://github.com/nuxt/ui/issues/4581",0.70575356,{"description":3037,"labels":3038,"number":3047,"owner":3029,"repository":3030,"state":3048,"title":3049,"updated_at":3050,"url":3051,"score":3052},"### Environment\n\n------------------------------\r\n- Operating System: Windows_NT\r\n- Node Version: v20.10.0\r\n- Nuxt Version: 3.11.2\r\n- CLI Version: 3.11.1\r\n- Nitro Version: 2.9.6\r\n- Package Manager: yarn@4.1.1\r\n- Builder: -\r\n- User Config: -\r\n- Runtime Modules: -\r\n- Build Modules: -\r\n------------------------------\n\n### Version\n\n2.8\n\n### Reproduction\n\nvisible even on the docs page \n\n### Description\n\nWhen there is no value set for select, the placeholder is displayed (if set).\r\nIn such case, when options are displayed their labels are \"muted\" - looks like disabled ones.\r\n\r\n\r\nOnce any option is picked, their color change to \"proper\" one.\r\n\r\n\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[3039,3042,3045],{"name":3040,"color":3041},"bug","d73a4a",{"name":3043,"color":3044},"closed-by-bot","ededed",{"name":3046,"color":3044},"stale",1757,"closed","USelect with placeholder display options with missleading color","2025-06-19T02:12:33Z","https://github.com/nuxt/ui/issues/1757",0.73455054,{"description":3054,"labels":3055,"number":3059,"owner":3029,"repository":3030,"state":3048,"title":3060,"updated_at":3061,"url":3062,"score":3063},"### Description\n\nHow can I change the options of a Uselect to RTL?\n\n\n### Additional context\n\n_No response_",[3056,3057,3058],{"name":3020,"color":3021},{"name":3023,"color":3024},{"name":3026,"color":3027},3663,"USelect rtl direction","2025-05-10T17:03:39Z","https://github.com/nuxt/ui/issues/3663",0.7368398,{"description":3065,"labels":3066,"number":3070,"owner":3029,"repository":3029,"state":3048,"title":3071,"updated_at":3072,"url":3073,"score":3074},"### 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_",[3067],{"name":3068,"color":3069},"pending triage","E99695",28733,"SelectMenu initial object values","2024-08-28T03:27:34Z","https://github.com/nuxt/nuxt/issues/28733",0.74020153,{"description":3076,"labels":3077,"number":3080,"owner":3029,"repository":3081,"state":3048,"title":3082,"updated_at":3083,"url":3084,"score":3085},"- [ ] `CMD + .` to expand\n- [ ] `Escape` to reduce when expanded",[3078],{"name":3020,"color":3079},"1ad6ff",658,"nuxt.com","[Project] Add shortcuts for preview modal","2023-02-15T12:32:42Z","https://github.com/nuxt/nuxt.com/issues/658",0.7457165,{"description":3087,"labels":3088,"number":3080,"owner":3029,"repository":3094,"state":3048,"title":3095,"updated_at":3096,"url":3097,"score":3085},"### Environment\r\n\r\nNuxt project info: \r\n\r\n------------------------------\r\n- Operating System: Linux\r\n- Node Version: v18.18.0\r\n- Nuxt Version: 3.8.2\r\n- CLI Version: 3.10.0\r\n- Nitro Version: 2.8.1\r\n- Package Manager: npm@9.4.2\r\n- Builder: -\r\n- User Config: devtools\r\n- Runtime Modules: -\r\n- Build Modules: -\r\n------------------------------\r\n\r\n### Reproduction\r\n\r\nhttps://stackblitz.com/edit/nuxt-starter-ctgbhq?file=src%2Ftests%2Findex.test.ts\r\n\r\n### Describe the bug\r\n\r\nHi! After migration from nuxt-vitest to this repo, we founded that all imports mocks were broken. \r\nWe used this [example](https://github.com/danielroe/nuxt-vitest#mocknuxtimport) and it worked perfectly in nuxt-vitest and previous versions. \r\n\r\nThe problem is that the mock works correctly inside the test, but it doesn't seem to apply inside the function. useRoute().params is defined inside the test, but in function - undefined. \r\n\r\n```\r\ntest('get params', () => {\r\n expect(useFoo()).toBeFalsy(); //correct\r\n const params = {\r\n id: '11312424',\r\n };\r\n useRouteMock.mockImplementation(() => {\r\n return { query: {}, path: '/', params };\r\n });\r\n\r\n //here useRoute().params - object (!) \r\n\r\n expect(useFoo()).not.toBeFalsy(); //here useRoute().params - undefined and result for test - false \r\n });\r\n```\r\n\r\n### Additional context\r\n\r\n_No response_\r\n\r\n### Logs\r\n\r\n_No response_",[3089,3092],{"name":3090,"color":3091},"vitest-environment","b60205",{"name":3068,"color":3093},"5D08F5","test-utils","After upgrading to new version imports mocks broke","2024-01-28T11:28:53Z","https://github.com/nuxt/test-utils/issues/658",{"description":3099,"labels":3100,"number":3103,"owner":3029,"repository":3081,"state":3048,"title":3104,"updated_at":3105,"url":3106,"score":3107},"https://volta.s3.fr-par.scw.cloud/Clean_Shot_2022_02_25_at_17_19_52_5b7648bd53.mp4\n",[3101],{"name":3040,"color":3102},"ff281a",90,"(UI) USelect: placeholder put in the value","2023-02-15T12:30:37Z","https://github.com/nuxt/nuxt.com/issues/90",0.7471917,{"description":3109,"labels":3110,"number":3113,"owner":3029,"repository":3030,"state":3048,"title":3114,"updated_at":3115,"url":3116,"score":3117},"### Description\n\nI wanted to do something like the inline field label shown in the component examples in the docs, but couldn't find a suitable builtin. I think it's a nice halfway between MD's label-in-the-field strategy and while I could abuse the `leading` slot of the input, I think it makes more sense to be generic across input types. \n\n\n\nI did end up copy/pasting the source but it would be cool if the FormField (or something) had an `inline` variant that did this.\n\nFor reference:\nhttps://github.com/nuxt/ui/blob/50d68a636cc8b260dd3b8cf8afecb3b564b9d75d/docs/app/components/content/ComponentExample.vue#L162-L167\n\nThanks for your consideration 😄 \n\n### Additional context\n\n_No response_",[3111,3112],{"name":3020,"color":3021},{"name":3023,"color":3024},3543,"Inline Form Field Label","2025-06-15T14:09:32Z","https://github.com/nuxt/ui/issues/3543",0.749265,{"description":3119,"labels":3120,"number":3124,"owner":3029,"repository":3030,"state":3048,"title":3125,"updated_at":3126,"url":3127,"score":3128},"### Environment\n\n```\n- Operating System: `Linux`\n- Node Version: `v23.11.0`\n- Nuxt Version: `3.17.2`\n- CLI Version: `3.25.0`\n- Nitro Version: `2.11.11`\n- Package Manager: `pnpm@10.10.0`\n- Builder: `-`\n- User Config: `devtools`, `modules`, `css`, `future`, `compatibilityDate`\n- Runtime Modules: `@nuxt/ui@3.1.1`, `@nuxt/eslint@1.3.1`\n- Build Modules: `-`\n```\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\n3.17.2\n\n### Reproduction\n\nhttps://codesandbox.io/p/devbox/nuxt-ui3-n3sxks\n\nSample code for fiddling:\n```vue\n\u003Ctemplate>\n \u003CUCard>\n \u003CUFormField>\n \u003CUCheckbox v-model=\"isRtl\" label=\"Right to Left\" />\n \u003C/UFormField>\n \n \u003Cdiv class=\"mt-4 space-y-4 space-x-4\">\n \u003CUFormField label=\"Dynamic Direction Select\">\n \u003CUSelect\n v-model=\"selected\"\n :items=\"items\"\n :dir=\"dir\"\n label=\"Dynamic Direction Select\"\n placeholder=\"Select an option\"\n class=\"w-full max-w-2xl\"\n />\n \u003C/UFormField>\n \n \u003CUFormField label=\"Left to Right\">\n \u003CUSelect\n v-model=\"selected2\"\n :items=\"items\"\n dir=\"ltr\"\n label=\"LTR Select\"\n placeholder=\"Select an option\"\n class=\"w-full max-w-2xl\"\n />\n \u003C/UFormField>\n\n \u003CUFormField label=\"Right to Left\">\n \u003CUSelect\n v-model=\"selected3\"\n :items=\"items\"\n dir=\"rtl\"\n label=\"RTL Select\"\n placeholder=\"Select an option\"\n class=\"w-full max-w-2xl\"\n />\n \u003C/UFormField>\n \u003C/div>\n \u003C/UCard>\n\u003C/template>\n\n\u003Cscript setup>\nconst isRtl = ref(false)\nconst selected = ref('')\nconst selected2 = ref('')\nconst selected3 = ref('')\n\nconst items = [\n 'Item 1',\n 'Item 2',\n 'Item 3',\n 'Item 4',\n 'Item 5',\n 'Item 6',\n 'Item 7',\n]\n\nconst dir = computed(() => isRtl.value ? 'rtl' : 'ltr')\n\u003C/script>\n```\n\n### Description\n\nIt seems `USelect` component ignores the `dir` attribute. This make it inconsistence with the rest of UI components. This issue makes the UI look wierd when localized to RTL languages.\nBoth `\u003CUSelect dir=\"rtl\" ...>` and `\u003CUSelect dir=\"ltr\" ...>` component have `dir=\"ltr\"`.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3121,3122,3123],{"name":3040,"color":3041},{"name":3023,"color":3024},{"name":3026,"color":3027},4131,"USelect ignores dir attribute","2025-05-13T14:10:12Z","https://github.com/nuxt/ui/issues/4131",0.7531976,{"description":3130,"labels":3131,"number":3133,"owner":3029,"repository":3081,"state":3048,"title":3134,"updated_at":3135,"url":3136,"score":3137},"Shortcut for the \"Save\" button.",[3132],{"name":3020,"color":3079},657,"[Project] Support `CMD+S` to commit","2023-02-15T12:32:41Z","https://github.com/nuxt/nuxt.com/issues/657",0.7540684,["Reactive",3139],{},["Set"],["ShallowReactive",3142],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fSjHQ0TSqmsHAl40B5EQrWUcHVtlMMxuqmYxeOeK1tig":-1},"/nuxt/ui/4157"]