\n```\n\nAfter:\n```html\n\u003C!-- `ui` prop is the same as `app.config.ts` theming config\n\u003CUTheme :ui=\"{\n formField: {\n\t slots: {\n\t root: \"flex max-sm:flex-col justify-between items-center gap-4\",\n\t},\n },\n}\">\n \u003CUForm ...>\n \u003CUFormField ...>\n ...\n \u003CUFormField>\n \u003CUFormField ...>\n ...\n \u003CUFormField>\n \u003CUForm/>\n\u003C/UTheme>\n```\n\n## Benefits\n- Easily componentized. I could create a `AppForm` component which contains the `UTheme` usage with a slot, so now its 1 line to get the exact theming that I want. This makes consistency across the app really easy.\n- Nestable - If implemented with provide/inject, you could have an infinite number of UTheme's nested and it would take the latest one\n\n## Implementation\nI'd tentatively be willing to implement this. My approach would be:\n- Create `UTheme`, it should have a `ui` and `uiPro` prop, each of which take the same type as the `app.config.ts`\n- `provide()` those props\n- `inject()` those props into each component and merge with passed in `ui` field.\n- Theme priority order should be:\n 1. `ui` prop passed to component\n 2. `ui` prop coming from UTheme component\n 3. `ui` config coming from `app.config.ts`\n\n### Additional context\n\n_No response_",[3020,3023,3026],{"name":3021,"color":3022},"enhancement","a2eeef",{"name":3024,"color":3025},"v3","49DCB8",{"name":3027,"color":3028},"triage","ffffff",4250,"nuxt","ui","open","UTheme component","2025-05-28T22:24:36Z","https://github.com/nuxt/ui/issues/4250",0.7590583,{"description":3038,"labels":3039,"number":3043,"owner":3030,"repository":3031,"state":3032,"title":3044,"updated_at":3045,"url":3046,"score":3047},"### Description\n\n`name` and `type` in the `ProseField` component can only be consigned as strings:\n\n```\n::field{name=\"fieldname\" type=\"boolean\"}\ndescription\n::\n```\n\nBut actually I need them as slots like:\n\n```\n::field\n#name\n\u003Cbutton>fieldname\u003C/button>\n#type\n\u003Cspan>fieldtype\u003C/span>\n#default\ndescription\n::\n```\n\nIt's not much of an adjustment, just a little tweaking in the respective Vue component:\n\n```\n \u003Cspan\n v-if=\"!!slots.name || name\"\n :class=\"ui.name({ class: props.ui?.name })\"\n >\n \u003Cslot name=\"name\" mdc-unwrap=\"p\">\n {{ name }}\n \u003C/slot>\n \u003C/span>\n```\n\nI tried to overwrite it with my own component in `component/contents/ProseField.vue`, but it didn't work in production, probably because of tree shaking. (That's another issue.)\n\n### Additional context\n\n_No response_",[3040,3041,3042],{"name":3021,"color":3022},{"name":3024,"color":3025},{"name":3027,"color":3028},4575,"Allow name and type slots in ProseField (#uiPro)","2025-07-22T20:26:57Z","https://github.com/nuxt/ui/issues/4575",0.76383555,{"description":3049,"labels":3050,"number":3054,"owner":3030,"repository":3031,"state":3032,"title":3055,"updated_at":3056,"url":3057,"score":3058},"### 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",[3051,3052,3053],{"name":3021,"color":3022},{"name":3024,"color":3025},{"name":3027,"color":3028},4581,"SelectMenu: Compound label","2025-07-23T16:38:06Z","https://github.com/nuxt/ui/issues/4581",0.7662598,{"description":3060,"labels":3061,"number":3065,"owner":3030,"repository":3031,"state":3032,"title":3066,"updated_at":3067,"url":3068,"score":3069},"### Description\n\nThis feature request proposes that the InputNumber component be enhanced with leading and trailing slot support. \n\nCurrently, components such as **Input**, **InputMenu**, **Select**, and **SelectMenu** already offer these slots for inserting custom content. For consistency across the UI library and to provide developers with a uniform customization experience, it is imperative that InputNumber is updated to include both leading and trailing slots. \n\n### Additional context\n\n_No response_",[3062,3063,3064],{"name":3021,"color":3022},{"name":3024,"color":3025},{"name":3027,"color":3028},4201,"[InputNumber] Add support for leading & trailing slots","2025-05-21T13:07:28Z","https://github.com/nuxt/ui/issues/4201",0.77367824,{"description":3071,"labels":3072,"number":3076,"owner":3030,"repository":3031,"state":3032,"title":3077,"updated_at":3078,"url":3079,"score":3080},"### Description\n\nIn Vue it's easy to use HTML in every component using v-html. It would be very helpful in Nuxt UI to have this feature without workarounds like slots with additional span tags. In our case we often have some html tags like: b,i,... or nbsp in our database driven app. \n\n### Additional context\n\n_No response_",[3073,3074,3075],{"name":3021,"color":3022},{"name":3024,"color":3025},{"name":3027,"color":3028},4396,"Use HTML in label or in a new prop","2025-06-24T13:00:05Z","https://github.com/nuxt/ui/issues/4396",0.7864773,{"description":3082,"labels":3083,"number":3091,"owner":3030,"repository":3031,"state":3092,"title":3093,"updated_at":3094,"url":3095,"score":3096},"### Description\n\nWe already have to possibility to add help text to a `FormField`, but I don't always want to bloat my page with this. Would be really nice if we could have an option like `tooltip=\"Some helper text\"` that automatically shows an icon next to the label.\n\nOf course this can be done with the `#label` slot. But I think this quite normal/useful to have in e.g. dashboard etc.\n\n### Additional context\n\n",[3084,3085,3086,3089],{"name":3021,"color":3022},{"name":3024,"color":3025},{"name":3087,"color":3088},"closed-by-bot","ededed",{"name":3090,"color":3088},"stale",3715,"closed","`FormField` tooltip","2025-07-30T02:13:37Z","https://github.com/nuxt/ui/issues/3715",0.70433486,{"description":3098,"labels":3099,"number":3102,"owner":3030,"repository":3031,"state":3092,"title":3103,"updated_at":3104,"url":3105,"score":3106},"### 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_",[3100,3101],{"name":3021,"color":3022},{"name":3024,"color":3025},4157,"USelect base text display","2025-05-23T12:25:54Z","https://github.com/nuxt/ui/issues/4157",0.7459435,{"description":3108,"labels":3109,"number":3115,"owner":3030,"repository":3031,"state":3092,"title":3116,"updated_at":3117,"url":3118,"score":3119},"### 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```",[3110,3113,3114],{"name":3111,"color":3112},"bug","d73a4a",{"name":3024,"color":3025},{"name":3027,"color":3028},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.7536788,{"description":3121,"labels":3122,"number":3126,"owner":3030,"repository":3031,"state":3092,"title":3127,"updated_at":3128,"url":3129,"score":3130},"### Description\n\nSomething like\nhttps://ui.nuxt.com/components/auth-form#usage\n\nPerhaps also add a `validation` prop to combine with validation\nAnd perhapse also a `default-value` prop to support initializing the form\n\nSomething like\n```\nconst fields = [{\n name: 'email',\n type: 'text' as const,\n label: 'Email',\n placeholder: 'Enter your email',\n validation: z.string().email('Invalid email'),\n default-value: 'johndoe@gmail.com',\n required: true\n}, {\n name: 'password',\n label: 'Password',\n type: 'password' as const,\n placeholder: 'Enter your password'\n validation: z.string().min(8, 'Must be at least 8 characters'),\n}, {\n name: 'remember',\n label: 'Remember me',\n type: 'checkbox' as const\n}]\n```\n\n\n### Additional context\n\n_No response_",[3123,3124,3125],{"name":3021,"color":3022},{"name":3024,"color":3025},{"name":3027,"color":3028},4311,"Add support for fields in form component similar to AuthForm","2025-06-12T15:22:43Z","https://github.com/nuxt/ui/issues/4311",0.75602406,{"description":3132,"labels":3133,"number":3137,"owner":3030,"repository":3031,"state":3092,"title":3138,"updated_at":3139,"url":3140,"score":3141},"### Description\n\nsometimes what you prompt and show is not what you send, I have a particular need to ask users for distances in Imperial units (feet' inch\") but the form should send total inches. Other frameworks solve this by allowing the developer to pass a formatter function and a parser to go back and forth. error handling becomes quite nasty when hacking a manual solution.\r\n\r\nSuggestions obviously welcomed\n\n### Additional context\n\n_No response_",[3134,3135,3136],{"name":3021,"color":3022},{"name":3087,"color":3088},{"name":3090,"color":3088},1303,"Custom input fields, format/parse ","2025-06-19T02:12:57Z","https://github.com/nuxt/ui/issues/1303",0.7820517,["Reactive",3143],{},["Set"],["ShallowReactive",3146],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fr5pGIc0BADPrHnTB7eIB8SfefcqRpVfUeIfiikF5L1k":-1},"/nuxt/ui/3543"]