\n```\n\nI have to use `type=\"number\"` because we only allow numeric inputs here.\n\nPrior to adding the pin input, I used a simple input field and the schema portion was like this:\n\n```\n confirmationCode: z\n .string()\n .length(1, 'The code is required')\n .length(6, 'The code must be 6 digits long'),\n```\n\nBut when I switched to `u-pin-input`, that gave me the error \"Expected string, received array\", so I replaced it with this:\n\n```\n confirmationCode: z\n .array(z.coerce.string().length(1))\n .length(6, 'The code must be 6 digits long'),\n```\n\nThis works, but now I have a TypeScript error on the v-model: \n```\nType 'string' is not assignable to type 'number[]'.ts-plugin(2322)\nindex.d.ts(5532, 3): The expected type comes from property 'modelValue' which is declared here on type '{ readonly \"onUpdate:modelValue\"?: (value: number[]) => any; readonly onBlur?: (payload: Event) => any; readonly onChange?: (payload: Event) => any; readonly onComplete?: (value: number[]) => any; ... 19 more ...; otp?: boolean; } & VNodeProps & AllowedComponentProps & ComponentCustomProps'\n```\n\nAny additional adjustments I tried ended with further complications, so I figured it'd be better to ask than spend more time on hacky solutions that may introduce unintended scenarios.",[3137,3140],{"name":3138,"color":3139},"question","d876e3",{"name":3141,"color":3142},"v3","49DCB8",4779,"nuxt","ui","open","What's the correct way to type u-pin-input otp values in Zod?","2025-08-18T12:14:35Z","https://github.com/nuxt/ui/issues/4779",0.7605267,{"description":3152,"labels":3153,"number":3161,"owner":3144,"repository":3145,"state":3146,"title":3162,"updated_at":3163,"url":3164,"score":3165},"### 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_",[3154,3157,3158],{"name":3155,"color":3156},"enhancement","a2eeef",{"name":3141,"color":3142},{"name":3159,"color":3160},"triage","ffffff",4201,"[InputNumber] Add support for leading & trailing slots","2025-05-21T13:07:28Z","https://github.com/nuxt/ui/issues/4201",0.7613966,{"description":3167,"labels":3168,"number":3174,"owner":3144,"repository":3145,"state":3146,"title":3175,"updated_at":3176,"url":3177,"score":3178},"### Environment\n\n------------------------------\n- Operating System: Linux\n- Node Version: v20.12.0\n- Nuxt Version: 3.17.3\n- CLI Version: 3.25.1\n- Nitro Version: 2.11.12\n- Package Manager: pnpm@8.15.6\n- Builder: -\n- User Config: modules, devtools, compatibilityDate, future, css\n- Runtime Modules: @nuxt/ui@3.2.0\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/fragrant-fog-7ck4yf\n\nThe schema specifies that the items within the list must be numbers, and the UForm catches the error (displayed in the UAlert below), but the UInputTag object doesn't display it\n\n\u003Cimg width=\"780\" height=\"220\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/9594e307-2f7d-4928-b877-d08795abc4b5\" />\n\n### Description\n\nThe UInputTag element does not correctly render the error text for schema validation errors for pattern matching of the individual items within its array. \n\nIt works fine showing an error about the length of the array, but not about problems for the items within the array.\n\n\u003Cimg width=\"779\" height=\"328\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/cf031108-314b-4fd5-9859-cd275b8d3410\" />\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3169,3172,3173],{"name":3170,"color":3171},"bug","d73a4a",{"name":3141,"color":3142},{"name":3159,"color":3160},4573,"UInputTag does not display validation errors for pattern matching","2025-07-22T14:39:33Z","https://github.com/nuxt/ui/issues/4573",0.76326305,{"description":3180,"labels":3181,"number":3185,"owner":3144,"repository":3145,"state":3146,"title":3186,"updated_at":3187,"url":3188,"score":3189},"### Description\n\nI propose the addition of a UTheme component which would allow scoped theming of components to reduce repeated styling that's error prone when refactoring.\n\n## Example\nThe Dashboard template has a bunch of forms that have horizontal form fields (label left, input right).\n\nBefore:\n```html\n\u003CUForm ...>\n \u003CUFormField ... class=\"flex max-sm:flex-col justify-between items-center gap-4\">\n ...\n \u003CUFormField>\n \u003CUFormField ... class=\"flex max-sm:flex-col justify-between items-center gap-4\">\n ...\n \u003CUFormField>\n\u003CUForm/>\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_",[3182,3183,3184],{"name":3155,"color":3156},{"name":3141,"color":3142},{"name":3159,"color":3160},4250,"UTheme component","2025-05-28T22:24:36Z","https://github.com/nuxt/ui/issues/4250",0.7812416,{"description":3191,"labels":3192,"number":3196,"owner":3144,"repository":3145,"state":3146,"title":3197,"updated_at":3198,"url":3199,"score":3200},"### 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_",[3193,3194,3195],{"name":3155,"color":3156},{"name":3141,"color":3142},{"name":3159,"color":3160},4575,"Allow name and type slots in ProseField (#uiPro)","2025-07-22T20:26:57Z","https://github.com/nuxt/ui/issues/4575",0.7853166,{"description":3202,"labels":3203,"number":3211,"owner":3144,"repository":3145,"state":3212,"title":3213,"updated_at":3214,"url":3215,"score":3216},"### Description\n\nIt might be useful to add a prop to limit the maximum number of items that can be selected in a CheckboxGroup or MultiSelect. \nOnce the limit is reached, the remaining items become disabled, preventing further selection.\n\n### Additional context\n\n_No response_",[3204,3205,3206,3209],{"name":3155,"color":3156},{"name":3141,"color":3142},{"name":3207,"color":3208},"closed-by-bot","ededed",{"name":3210,"color":3208},"stale",4057,"closed","Add a selectionLimit prop to CheckboxGroup and MultiSelect components","2025-08-20T02:08:49Z","https://github.com/nuxt/ui/issues/4057",0.72474235,{"description":3218,"labels":3219,"number":3223,"owner":3144,"repository":3145,"state":3212,"title":3224,"updated_at":3225,"url":3226,"score":3227},"### Description\n\nWhen using `\u003CUInputMenu>` with `ignore-filter` and fetching items from an external API, the component always displays \"No results\" if the items list is empty.\n\nThis is problematic when the API itself enforces rules (like minimum query length). For example, with Mapbox Search API, results are only returned starting from 2 characters.\nRight now, `\u003CUInputMenu>` shows `\"No results\"` immediately after typing 1 character, which is misleading.\n\n**Example**\n\n```vue\n\u003Cscript setup lang=\"ts\">\nconst config = useRuntimeConfig()\n\nconst searchTerm = ref('')\nconst searchTermDebounced = refDebounced(searchTerm, 200)\nconst { data: mapboxItems, status: mapboxStatus } = await useFetch('https://api.mapbox.com/search/geocode/v6/forward', {\n params: {\n q: searchTermDebounced,\n language: 'fr-FR',\n country: 'fr,gf,pf,gp,mq,yt,re,bl,mf,pm,nc,wf',\n limit: 5,\n types: 'place,locality,postcode',\n access_token: config.public.mapboxApiKey\n },\n transform: (data) => data.features.map(function (item) {\n return {\n country: item.properties.context.name,\n country_code: item.properties.context.country_code,\n value : item.properties.full_address,\n coordinates: `${item.properties.coordinates.latitude},${item.properties.coordinates.longitude}`\n }\n }),\n server: false,\n lazy: true\n})\n\nconst selectedLocation = defineModel()\n\u003C/script>\n\n\u003Ctemplate>\n \u003CUInputMenu v-model=\"selectedLocation\" v-model:search-term=\"searchTerm\"\n :items=\"mapboxItems || []\"\n :loading=\"mapboxStatus === 'pending'\"\n placeholder=\"Nantes, Paris, …\"\n label-key=\"value\"\n ignore-filter\n trailing size=\"md\" />\n\u003C/template>\n```\n\n**Problem**\n\n* With 1 character, Mapbox returns nothing (expected).\n* But the component shows `\"No results\"`, which is incorrect (user hasn’t reached the API’s requirements yet).\n\n**Proposed solutions**\n\n1. Add a prop like `min-search-length` (number):\n\n * Default: `1`\n * `\"No results\"` is only shown once the search term length >= `min-search-length`.\n\n2. Or, add a function prop like `shouldShowNoResults(searchTerm: string, items: any[]): boolean` so developers can fully control when the empty state is displayed.\n\n**Why?**\nThis would give flexibility for APIs or use-cases where \"no results\" should not always be displayed when the items list is empty.\n\n\n### Additional context\n\n_No response_",[3220,3221,3222],{"name":3155,"color":3156},{"name":3141,"color":3142},{"name":3159,"color":3160},4829,"Allow condition or minimum search length before showing \"No results\" in `\u003CUInputMenu>`","2025-08-27T09:55:07Z","https://github.com/nuxt/ui/issues/4829",0.72956556,{"description":3229,"labels":3230,"number":3236,"owner":3144,"repository":3145,"state":3212,"title":3237,"updated_at":3238,"url":3239,"score":3240},"### Description\n\nWhen adding input tags, it would be awesome to have the ability to run logic that has the ability to stop the tag from being added\n\n### Additional context\n\n_No response_",[3231,3232,3233],{"name":3155,"color":3156},{"name":3141,"color":3142},{"name":3234,"color":3235},"upstream","78bddb",4406,"Validation Logic","2025-07-12T12:38:24Z","https://github.com/nuxt/ui/issues/4406",0.75667685,{"description":3242,"labels":3243,"number":3245,"owner":3144,"repository":3145,"state":3212,"title":3246,"updated_at":3247,"url":3248,"score":3249},"### Description\n\nWhen `UDropdown` has a lot of items it would be good to the element limit it's max height to rest of the screen height so the scrollbars are enabled instead of having to scroll the window to see the items.\r\nThanks.\n\n### Additional context\n\n_No response_",[3244],{"name":3155,"color":3156},2194,"`UDropdown` max height","2024-09-16T09:21:17Z","https://github.com/nuxt/ui/issues/2194",0.763227,{"description":3251,"labels":3252,"number":3256,"owner":3144,"repository":3145,"state":3212,"title":3257,"updated_at":3258,"url":3259,"score":3260},"> You can change the `content` width globally using your `app.config.ts`:\n> \n> ```ts\n> export default defineAppConfig({\n> ui: {\n> select: {\n> slots: {\n> content: 'min-w-fit'\n> }\n> }\n> }\n> })\n> ``` \n\n _Originally posted by @benjamincanac in [#4300](https://github.com/nuxt/ui/issues/4300#issuecomment-2961842289)_\n\n\nplease,\ndocument in its page:\nhttps://ui.nuxt.com/components/select\n\nalso, consider to add access to \"content\" through \"ui\" prop to make it, not only globally, but particularly available.\nNow you can't do: \n```html\n\u003CUSelect :ui=\"{ content: 'min-w-fit' }\" ... />\n```\n\nI had to search hard to find my own answer, and I think it's a very important case for everyone. It will benefit us all.\nThank you in advance!",[3253],{"name":3254,"color":3255},"documentation","0075ca",4409,"USelect > document how to make items/options content width, fit the longest item/option width. Add an image example.","2025-07-08T10:43:50Z","https://github.com/nuxt/ui/issues/4409",0.77257216,["Reactive",3262],{},["Set"],["ShallowReactive",3265],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fneW_gvfnyjcCW763axxeCyuXBf1PMLoePF0FIXg6oIs":-1},"/nuxt/ui/4405"]