[{"data":1,"prerenderedAt":1015},["ShallowReactive",2],{"navigation":3,"$fMW9jOOkNpZriWVK3P_bZYNOyYR2IEPvrHsC7cDBlJJc":405,"/docs/components/input-group":418,"surround-/docs/components/input-group":1012},[4],{"title":5,"path":6,"stem":7,"children":8,"page":17},"Docs","/docs","docs",[9,90,353,360,366,379],{"path":6,"stem":7,"title":10,"type":11,"children":12},"Get Started","group",[13,19,44,48,52,70,74,78,82,86],{"title":14,"path":15,"stem":16,"new":17,"type":18,"children":-1},"Introduction","/docs/introduction","docs/01.introduction",false,"page",{"title":20,"path":21,"stem":22,"children":23,"new":17,"type":11},"Installation","/docs/installation","docs/02.installation",[24,28,32,36,40],{"title":25,"path":26,"stem":27,"new":17,"type":18,"children":-1},"Vite","/docs/installation/vite","docs/installation/01.vite",{"title":29,"path":30,"stem":31,"new":17,"type":18,"children":-1},"Nuxt","/docs/installation/nuxt","docs/installation/02.nuxt",{"title":33,"path":34,"stem":35,"new":17,"type":18,"children":-1},"Astro","/docs/installation/astro","docs/installation/03.astro",{"title":37,"path":38,"stem":39,"new":17,"type":18,"children":-1},"Laravel","/docs/installation/laravel","docs/installation/04.laravel",{"title":41,"path":42,"stem":43,"new":17,"type":18,"children":-1},"Manual Installation","/docs/installation/manual","docs/installation/05.manual",{"title":45,"path":46,"stem":47,"new":17,"type":18,"children":-1},"components.json","/docs/components-json","docs/03.components-json",{"title":49,"path":50,"stem":51,"new":17,"type":18,"children":-1},"Theming","/docs/theming","docs/04.theming",{"title":53,"path":54,"stem":55,"children":56,"new":17,"type":11},"Dark Mode","/docs/dark-mode","docs/05.dark-mode",[57,60,63,67],{"title":25,"path":58,"stem":59,"new":17,"type":18,"children":-1},"/docs/dark-mode/vite","docs/dark-mode/01.vite",{"title":29,"path":61,"stem":62,"new":17,"type":18,"children":-1},"/docs/dark-mode/nuxt","docs/dark-mode/02.nuxt",{"title":64,"path":65,"stem":66,"new":17,"type":18,"children":-1},"Vitepress","/docs/dark-mode/vitepress","docs/dark-mode/03.vitepress",{"title":33,"path":68,"stem":69,"new":17,"type":18,"children":-1},"/docs/dark-mode/astro","docs/dark-mode/04.astro",{"title":71,"path":72,"stem":73,"new":17,"type":18,"children":-1},"CLI","/docs/cli","docs/06.cli",{"title":75,"path":76,"stem":77,"new":17,"type":18,"children":-1},"JavaScript","/docs/javascript","docs/07.javascript",{"title":79,"path":80,"stem":81,"new":17,"type":18,"children":-1},"Figma","/docs/figma","docs/09.figma",{"title":83,"path":84,"stem":85,"new":17,"type":18,"children":-1},"Changelog","/docs/changelog","docs/10.changelog",{"title":87,"path":88,"stem":89,"new":17,"type":18,"children":-1},"Legacy Docs","/docs/legacy","docs/11.legacy",{"title":91,"path":92,"stem":93,"children":94,"new":17,"type":11},"Components","/docs/components","docs/02.components",[95,100,104,108,112,116,120,124,128,133,137,141,145,149,153,157,161,165,169,173,177,181,185,189,193,197,201,205,209,213,217,221,225,229,233,237,241,245,249,253,257,261,265,269,273,277,281,285,289,293,297,301,305,309,313,317,321,325,329,333,337,341,345,349],{"title":96,"path":97,"stem":98,"new":17,"type":99,"children":-1},"Accordion","/docs/components/accordion","docs/components/accordion","component",{"title":101,"path":102,"stem":103,"new":17,"type":99,"children":-1},"Alert","/docs/components/alert","docs/components/alert",{"title":105,"path":106,"stem":107,"new":17,"type":99,"children":-1},"Alert Dialog","/docs/components/alert-dialog","docs/components/alert-dialog",{"title":109,"path":110,"stem":111,"new":17,"type":99,"children":-1},"Aspect Ratio","/docs/components/aspect-ratio","docs/components/aspect-ratio",{"title":113,"path":114,"stem":115,"new":17,"type":99,"children":-1},"Avatar","/docs/components/avatar","docs/components/avatar",{"title":117,"path":118,"stem":119,"new":17,"type":99,"children":-1},"Badge","/docs/components/badge","docs/components/badge",{"title":121,"path":122,"stem":123,"new":17,"type":99,"children":-1},"Breadcrumb","/docs/components/breadcrumb","docs/components/breadcrumb",{"title":125,"path":126,"stem":127,"new":17,"type":99,"children":-1},"Button","/docs/components/button","docs/components/button",{"title":129,"path":130,"stem":131,"new":132,"type":99,"children":-1},"Button Group","/docs/components/button-group","docs/components/button-group",true,{"title":134,"path":135,"stem":136,"new":17,"type":99,"children":-1},"Calendar","/docs/components/calendar","docs/components/calendar",{"title":138,"path":139,"stem":140,"new":17,"type":99,"children":-1},"Card","/docs/components/card","docs/components/card",{"title":142,"path":143,"stem":144,"new":17,"type":99,"children":-1},"Carousel","/docs/components/carousel","docs/components/carousel",{"title":146,"path":147,"stem":148,"new":17,"type":99,"children":-1},"Chart","/docs/components/chart","docs/components/chart",{"title":150,"path":151,"stem":152,"new":17,"type":99,"children":-1},"Checkbox","/docs/components/checkbox","docs/components/checkbox",{"title":154,"path":155,"stem":156,"new":17,"type":99,"children":-1},"Collapsible","/docs/components/collapsible","docs/components/collapsible",{"title":158,"path":159,"stem":160,"new":17,"type":99,"children":-1},"Combobox","/docs/components/combobox","docs/components/combobox",{"title":162,"path":163,"stem":164,"new":17,"type":99,"children":-1},"Command","/docs/components/command","docs/components/command",{"title":166,"path":167,"stem":168,"new":17,"type":99,"children":-1},"Context Menu","/docs/components/context-menu","docs/components/context-menu",{"title":170,"path":171,"stem":172,"new":17,"type":99,"children":-1},"Data Table","/docs/components/data-table","docs/components/data-table",{"title":174,"path":175,"stem":176,"new":17,"type":99,"children":-1},"Date Picker","/docs/components/date-picker","docs/components/date-picker",{"title":178,"path":179,"stem":180,"new":17,"type":99,"children":-1},"Dialog","/docs/components/dialog","docs/components/dialog",{"title":182,"path":183,"stem":184,"new":17,"type":99,"children":-1},"Drawer","/docs/components/drawer","docs/components/drawer",{"title":186,"path":187,"stem":188,"new":17,"type":99,"children":-1},"Dropdown Menu","/docs/components/dropdown-menu","docs/components/dropdown-menu",{"title":190,"path":191,"stem":192,"new":132,"type":99,"children":-1},"Empty","/docs/components/empty","docs/components/empty",{"title":194,"path":195,"stem":196,"new":132,"type":99,"children":-1},"Field","/docs/components/field","docs/components/field",{"title":198,"path":199,"stem":200,"new":17,"type":99,"children":-1},"Form","/docs/components/form","docs/components/form",{"title":202,"path":203,"stem":204,"new":17,"type":99,"children":-1},"Hover Card","/docs/components/hover-card","docs/components/hover-card",{"title":206,"path":207,"stem":208,"new":17,"type":99,"children":-1},"Input","/docs/components/input","docs/components/input",{"title":210,"path":211,"stem":212,"new":132,"type":99,"children":-1},"Input Group","/docs/components/input-group","docs/components/input-group",{"title":214,"path":215,"stem":216,"new":17,"type":99,"children":-1},"Input OTP","/docs/components/input-otp","docs/components/input-otp",{"title":218,"path":219,"stem":220,"new":132,"type":99,"children":-1},"Item","/docs/components/item","docs/components/item",{"title":222,"path":223,"stem":224,"new":132,"type":99,"children":-1},"Kbd","/docs/components/kbd","docs/components/kbd",{"title":226,"path":227,"stem":228,"new":17,"type":99,"children":-1},"Label","/docs/components/label","docs/components/label",{"title":230,"path":231,"stem":232,"new":17,"type":99,"children":-1},"Menubar","/docs/components/menubar","docs/components/menubar",{"title":234,"path":235,"stem":236,"new":132,"type":99,"children":-1},"Native Select","/docs/components/native-select","docs/components/native-select",{"title":238,"path":239,"stem":240,"new":17,"type":99,"children":-1},"Navigation Menu","/docs/components/navigation-menu","docs/components/navigation-menu",{"title":242,"path":243,"stem":244,"new":17,"type":99,"children":-1},"Number Field","/docs/components/number-field","docs/components/number-field",{"title":246,"path":247,"stem":248,"new":17,"type":99,"children":-1},"Pagination","/docs/components/pagination","docs/components/pagination",{"title":250,"path":251,"stem":252,"new":17,"type":99,"children":-1},"Pin Input","/docs/components/pin-input","docs/components/pin-input",{"title":254,"path":255,"stem":256,"new":17,"type":99,"children":-1},"Popover","/docs/components/popover","docs/components/popover",{"title":258,"path":259,"stem":260,"new":17,"type":99,"children":-1},"Progress","/docs/components/progress","docs/components/progress",{"title":262,"path":263,"stem":264,"new":17,"type":99,"children":-1},"Radio Group","/docs/components/radio-group","docs/components/radio-group",{"title":266,"path":267,"stem":268,"new":17,"type":99,"children":-1},"Range Calendar","/docs/components/range-calendar","docs/components/range-calendar",{"title":270,"path":271,"stem":272,"new":17,"type":99,"children":-1},"Resizable","/docs/components/resizable","docs/components/resizable",{"title":274,"path":275,"stem":276,"new":17,"type":99,"children":-1},"Scroll Area","/docs/components/scroll-area","docs/components/scroll-area",{"title":278,"path":279,"stem":280,"new":17,"type":99,"children":-1},"Select","/docs/components/select","docs/components/select",{"title":282,"path":283,"stem":284,"new":17,"type":99,"children":-1},"Separator","/docs/components/separator","docs/components/separator",{"title":286,"path":287,"stem":288,"new":17,"type":99,"children":-1},"Sheet","/docs/components/sheet","docs/components/sheet",{"title":290,"path":291,"stem":292,"new":17,"type":99,"children":-1},"Sidebar","/docs/components/sidebar","docs/components/sidebar",{"title":294,"path":295,"stem":296,"new":17,"type":99,"children":-1},"Skeleton","/docs/components/skeleton","docs/components/skeleton",{"title":298,"path":299,"stem":300,"new":17,"type":99,"children":-1},"Slider","/docs/components/slider","docs/components/slider",{"title":302,"path":303,"stem":304,"new":17,"type":99,"children":-1},"Sonner","/docs/components/sonner","docs/components/sonner",{"title":306,"path":307,"stem":308,"new":132,"type":99,"children":-1},"Spinner","/docs/components/spinner","docs/components/spinner",{"title":310,"path":311,"stem":312,"new":17,"type":99,"children":-1},"Stepper","/docs/components/stepper","docs/components/stepper",{"title":314,"path":315,"stem":316,"new":17,"type":99,"children":-1},"Switch","/docs/components/switch","docs/components/switch",{"title":318,"path":319,"stem":320,"new":17,"type":99,"children":-1},"Table","/docs/components/table","docs/components/table",{"title":322,"path":323,"stem":324,"new":17,"type":99,"children":-1},"Tabs","/docs/components/tabs","docs/components/tabs",{"title":326,"path":327,"stem":328,"new":17,"type":99,"children":-1},"Tags Input","/docs/components/tags-input","docs/components/tags-input",{"title":330,"path":331,"stem":332,"new":17,"type":99,"children":-1},"Textarea","/docs/components/textarea","docs/components/textarea",{"title":334,"path":335,"stem":336,"new":17,"type":99,"children":-1},"Toast","/docs/components/toast","docs/components/toast",{"title":338,"path":339,"stem":340,"new":17,"type":99,"children":-1},"Toggle","/docs/components/toggle","docs/components/toggle",{"title":342,"path":343,"stem":344,"new":17,"type":99,"children":-1},"Toggle Group","/docs/components/toggle-group","docs/components/toggle-group",{"title":346,"path":347,"stem":348,"new":17,"type":99,"children":-1},"Tooltip","/docs/components/tooltip","docs/components/tooltip",{"title":350,"path":351,"stem":352,"new":17,"type":99,"children":-1},"Typography","/docs/components/typography","docs/components/typography",{"title":20,"path":21,"stem":22,"children":354,"new":17,"type":11},[355,356,357,358,359],{"title":25,"path":26,"stem":27,"new":17,"type":18,"children":-1},{"title":29,"path":30,"stem":31,"new":17,"type":18,"children":-1},{"title":33,"path":34,"stem":35,"new":17,"type":18,"children":-1},{"title":37,"path":38,"stem":39,"new":17,"type":18,"children":-1},{"title":41,"path":42,"stem":43,"new":17,"type":18,"children":-1},{"title":53,"path":54,"stem":55,"children":361,"new":17,"type":11},[362,363,364,365],{"title":25,"path":58,"stem":59,"new":17,"type":18,"children":-1},{"title":29,"path":61,"stem":62,"new":17,"type":18,"children":-1},{"title":64,"path":65,"stem":66,"new":17,"type":18,"children":-1},{"title":33,"path":68,"stem":69,"new":17,"type":18,"children":-1},{"title":367,"path":368,"stem":369,"children":370,"new":17,"type":11},"Forms","/docs/forms","docs/forms",[371,375],{"title":372,"path":373,"stem":374,"new":17,"type":18,"children":-1},"VeeValidate","/docs/forms/vee-validate","docs/forms/01.vee-validate",{"title":376,"path":377,"stem":378,"new":17,"type":18,"children":-1},"TanStack Form","/docs/forms/tanstack-form","docs/forms/02.tanstack-form",{"title":380,"path":381,"stem":382,"children":383,"new":17,"type":11},"Registry","/docs/registry","docs/registry/index",[384,385,389,393,397,401],{"title":380,"path":381,"stem":382,"new":17,"type":18,"children":-1},{"title":386,"path":387,"stem":388,"new":17,"type":18,"children":-1},"Examples","/docs/registry/examples","docs/registry/examples",{"title":390,"path":391,"stem":392,"new":17,"type":18,"children":-1},"FAQ","/docs/registry/faq","docs/registry/faq",{"title":394,"path":395,"stem":396,"new":17,"type":18,"children":-1},"Getting Started","/docs/registry/getting-started","docs/registry/getting-started",{"title":398,"path":399,"stem":400,"new":17,"type":18,"children":-1},"registry-item.json","/docs/registry/registry-item-json","docs/registry/registry-item-json",{"title":402,"path":403,"stem":404,"new":17,"type":18,"children":-1},"registry.json","/docs/registry/registry-json","docs/registry/registry-json",{"repo":406},{"id":407,"name":408,"repo":409,"description":410,"createdAt":411,"updatedAt":412,"pushedAt":413,"stars":414,"watchers":415,"forks":416,"defaultBranch":417},658791894,"shadcn-vue","unovue/shadcn-vue","Vue port of shadcn-ui","2023-06-26T13:53:23Z","2026-04-06T17:33:41Z","2026-04-06T17:33:39Z",9706,37,634,"dev",{"id":419,"title":210,"body":420,"description":1005,"extension":1006,"links":1007,"meta":1008,"navigation":132,"new":132,"path":211,"rawbody":1009,"seo":1010,"stem":212,"__hash__":1011},"content/docs/components/input-group.md",{"type":421,"value":422,"toc":980},"minimark",[423,429,433,501,505,514,517,522,526,530,533,537,540,543,547,550,553,557,560,571,575,578,581,585,588,591,595,599,602,606,609,612,616,620,627,634,639,645,649,653,656,692,698,702,705,719,761,767,792,802,808,811,814,874,880,884,894,920,926,932,936,944,970,974],[424,425],"component-preview",{"className":426,"name":428},[427],"[&_.preview]:p-4","InputGroupDemo",[430,431,20],"h2",{"id":432},"installation",[434,435,436,452,466],"code-tabs",{},[437,438,439,446],"tabs-list",{},[440,441,443],"tabs-trigger",{"value":442},"cli",[444,445,71],"p",{},[440,447,449],{"value":448},"manual",[444,450,451],{},"Manual",[453,454,455],"tabs-content",{"value":442},[456,457,463],"pre",{"className":458,"code":460,"language":461,"meta":462},[459],"language-bash","npx shadcn-vue@latest add input-group\n","bash","",[464,465,460],"code",{"__ignoreMap":462},[453,467,468],{"value":448},[469,470,471,477,483,496],"steps",{},[472,473,474],"step",{},[444,475,476],{},"Install the following dependencies:",[456,478,481],{"className":479,"code":480,"language":461,"meta":462},[459],"npm install reka-ui\n",[464,482,480],{"__ignoreMap":462},[472,484,485],{},[444,486,487,488,495],{},"Copy and paste the ",[489,490,494],"a",{"href":491,"rel":492},"https://github.com/unovue/shadcn-vue/tree/dev/apps/v4/registry/new-york-v4/ui/input-group",[493],"nofollow","GitHub source code"," into your project.",[472,497,498],{},[444,499,500],{},"Update the import paths to match your project setup.",[430,502,504],{"id":503},"usage","Usage",[456,506,512],{"className":507,"code":509,"language":510,"meta":511},[508],"language-vue","\u003Cscript setup lang=\"ts\">\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n  InputGroupText,\n  InputGroupTextarea,\n} from '@/components/ui/input-group'\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CInputGroup>\n    \u003CInputGroupInput placeholder=\"Search...\" />\n    \u003CInputGroupAddon>\n      \u003CSearchIcon />\n    \u003C/InputGroupAddon>\n    \u003CInputGroupAddon align=\"inline-end\">\n      \u003CInputGroupButton>Search\u003C/InputGroupButton>\n    \u003C/InputGroupAddon>\n  \u003C/InputGroup>\n\u003C/template>\n","vue","showLineNumbers",[464,513,509],{"__ignoreMap":462},[430,515,386],{"id":516},"examples",[518,519,521],"h3",{"id":520},"icon","Icon",[424,523],{"className":524,"name":525},[427],"InputGroupWithIcon",[518,527,529],{"id":528},"text","Text",[444,531,532],{},"Display additional text information alongside inputs.",[424,534],{"className":535,"name":536},[427],"InputGroupWithText",[518,538,125],{"id":539},"button",[444,541,542],{},"Add buttons to perform actions within the input group.",[424,544],{"className":545,"name":546},[427],"InputGroupWithButton",[518,548,346],{"id":549},"tooltip",[444,551,552],{},"Add tooltips to provide additional context or help.",[424,554],{"className":555,"name":556},[427],"InputGroupWithTooltip",[518,558,330],{"id":559},"textarea",[444,561,562,563,566,567,570],{},"Input groups also work with textarea components. Use ",[464,564,565],{},"block-start"," or ",[464,568,569],{},"block-end"," for alignment.",[424,572],{"className":573,"name":574},[427],"InputGroupWithTextarea",[518,576,306],{"id":577},"spinner",[444,579,580],{},"Show loading indicators while processing input.",[424,582],{"className":583,"name":584},[427],"InputGroupWithSpinner",[518,586,226],{"id":587},"label",[444,589,590],{},"Add labels within input groups to improve accessibility.",[424,592],{"className":593,"name":594},[427],"InputGroupWithLabel",[518,596,598],{"id":597},"dropdown","Dropdown",[444,600,601],{},"Pair input groups with dropdown menus for complex interactions.",[424,603],{"className":604,"name":605},[427],"InputGroupWithDropdown",[518,607,129],{"id":608},"button-group",[444,610,611],{},"Wrap input groups with button groups to create prefixes and suffixes.",[424,613],{"className":614,"name":615},[427],"InputGroupWithButtonGroup",[518,617,619],{"id":618},"custom-input","Custom Input",[444,621,622,623,626],{},"Add the ",[464,624,625],{},"data-slot=\"input-group-control\""," attribute to your custom input for automatic behavior and focus state handling.",[444,628,629,630,633],{},"No style is applied to the custom input. Apply your own styles using the ",[464,631,632],{},"class"," prop.",[424,635],{"className":636,"name":638},[637,427],"!mb-4","InputGroupWithCustomInput",[456,640,643],{"className":641,"code":642,"language":510,"meta":511},[508],"\u003Cscript setup lang=\"ts\">\nimport { InputGroup, InputGroupAddon, InputGroupButton } from '@/components/ui/input-group'\n\u003C/script>\n\n\u003Ctemplate>\n  \u003Cdiv class=\"grid w-full max-w-sm gap-6\">\n    \u003CInputGroup>\n      \u003Ctextarea\n        data-slot=\"input-group-control\"\n        class=\"flex field-sizing-content min-h-16 w-full resize-none rounded-md bg-transparent px-3 py-2.5 text-base transition-[color,box-shadow] outline-none md:text-sm\"\n        placeholder=\"Autoresize textarea...\"\n      />\n      \u003CInputGroupAddon align=\"block-end\">\n        \u003CInputGroupButton class=\"ml-auto\" size=\"sm\" variant=\"default\">\n          Submit\n        \u003C/InputGroupButton>\n      \u003C/InputGroupAddon>\n    \u003C/InputGroup>\n  \u003C/div>\n\u003C/template>\n",[464,644,642],{"__ignoreMap":462},[430,646,648],{"id":647},"api-reference","API Reference",[518,650,652],{"id":651},"inputgroup","InputGroup",[444,654,655],{},"The main component that wraps inputs and addons.",[657,658,659,675],"table",{},[660,661,662],"thead",{},[663,664,665,669,672],"tr",{},[666,667,668],"th",{},"Prop",[666,670,671],{},"Type",[666,673,674],{},"Default",[676,677,678],"tbody",{},[663,679,680,685,690],{},[681,682,683],"td",{},[464,684,632],{},[681,686,687],{},[464,688,689],{},"string",[681,691],{},[456,693,696],{"className":694,"code":695,"language":510,"meta":462},[508],"\u003CInputGroup>\n  \u003CInputGroupInput />\n  \u003CInputGroupAddon />\n\u003C/InputGroup>\n",[464,697,695],{"__ignoreMap":462},[518,699,701],{"id":700},"inputgroupaddon","InputGroupAddon",[444,703,704],{},"Displays icons, text, buttons, or other content alongside inputs.",[706,707,709],"callout",{"title":708},"Focus Navigation",[444,710,711,712,714,715,718],{},"For proper focus navigation, the ",[464,713,701],{}," component should be placed\nafter the input. Set the ",[464,716,717],{},"align"," prop to position the addon.",[657,720,721,731],{},[660,722,723],{},[663,724,725,727,729],{},[666,726,668],{},[666,728,671],{},[666,730,674],{},[676,732,733,749],{},[663,734,735,739,744],{},[681,736,737],{},[464,738,717],{},[681,740,741],{},[464,742,743],{},"\"inline-start\" | \"inline-end\" | \"block-start\" | \"block-end\"",[681,745,746],{},[464,747,748],{},"\"inline-start\"",[663,750,751,755,759],{},[681,752,753],{},[464,754,632],{},[681,756,757],{},[464,758,689],{},[681,760],{},[456,762,765],{"className":763,"code":764,"language":510,"meta":462},[508],"\u003CInputGroupAddon align=\"inline-end\">\n  \u003CSearchIcon />\n\u003C/InputGroupAddon>\n",[464,766,764],{"__ignoreMap":462},[444,768,769],{},[770,771,772,773,776,777,566,780,783,784,776,787,566,789,791],"strong",{},"For ",[464,774,775],{},"\u003CInputGroupInput />",", use the ",[464,778,779],{},"inline-start",[464,781,782],{},"inline-end"," alignment. For ",[464,785,786],{},"\u003CInputGroupTextarea />",[464,788,565],{},[464,790,569],{}," alignment.",[444,793,794,795,797,798,801],{},"The ",[464,796,701],{}," component can have multiple ",[464,799,800],{},"InputGroupButton"," components and icons.",[456,803,806],{"className":804,"code":805,"language":510,"meta":462},[508],"\u003CInputGroupAddon>\n  \u003CInputGroupButton>Button\u003C/InputGroupButton>\n  \u003CInputGroupButton>Button\u003C/InputGroupButton>\n\u003C/InputGroupAddon>\n",[464,807,805],{"__ignoreMap":462},[518,809,800],{"id":810},"inputgroupbutton",[444,812,813],{},"Displays buttons within input groups.",[657,815,816,826],{},[660,817,818],{},[663,819,820,822,824],{},[666,821,668],{},[666,823,671],{},[666,825,674],{},[676,827,828,845,862],{},[663,829,830,835,840],{},[681,831,832],{},[464,833,834],{},"size",[681,836,837],{},[464,838,839],{},"\"xs\" | \"icon-xs\" | \"sm\" | \"icon-sm\"",[681,841,842],{},[464,843,844],{},"\"xs\"",[663,846,847,852,857],{},[681,848,849],{},[464,850,851],{},"variant",[681,853,854],{},[464,855,856],{},"\"default\" | \"destructive\" | \"outline\" | \"secondary\" | \"ghost\" | \"link\"",[681,858,859],{},[464,860,861],{},"\"ghost\"",[663,863,864,868,872],{},[681,865,866],{},[464,867,632],{},[681,869,870],{},[464,871,689],{},[681,873],{},[456,875,878],{"className":876,"code":877,"language":510,"meta":462},[508],"\u003CInputGroupButton>\nButton\n\u003C/InputGroupButton>\n\n\u003CInputGroupButton size=\"icon-xs\" aria-label=\"Copy\">\n  \u003CCopyIcon />\n\u003C/InputGroupButton>\n",[464,879,877],{"__ignoreMap":462},[518,881,883],{"id":882},"inputgroupinput","InputGroupInput",[444,885,886,887,890,891,893],{},"Replacement for ",[464,888,889],{},"\u003CInput />"," when building input groups. This component has the input group styles pre-applied and uses the unified ",[464,892,625],{}," for focus state handling.",[657,895,896,906],{},[660,897,898],{},[663,899,900,902,904],{},[666,901,668],{},[666,903,671],{},[666,905,674],{},[676,907,908],{},[663,909,910,914,918],{},[681,911,912],{},[464,913,632],{},[681,915,916],{},[464,917,689],{},[681,919],{},[444,921,922,923,925],{},"All other props are passed through to the underlying ",[464,924,889],{}," component.",[456,927,930],{"className":928,"code":929,"language":510,"meta":462},[508],"\u003CInputGroup>\n  \u003CInputGroupInput placeholder=\"Enter text...\" />\n  \u003CInputGroupAddon>\n    \u003CSearchIcon />\n  \u003C/InputGroupAddon>\n\u003C/InputGroup>\n",[464,931,929],{"__ignoreMap":462},[518,933,935],{"id":934},"inputgrouptextarea","InputGroupTextarea",[444,937,886,938,941,942,893],{},[464,939,940],{},"\u003CTextarea />"," when building input groups. This component has the textarea group styles pre-applied and uses the unified ",[464,943,625],{},[657,945,946,956],{},[660,947,948],{},[663,949,950,952,954],{},[666,951,668],{},[666,953,671],{},[666,955,674],{},[676,957,958],{},[663,959,960,964,968],{},[681,961,962],{},[464,963,632],{},[681,965,966],{},[464,967,689],{},[681,969],{},[444,971,922,972,925],{},[464,973,940],{},[456,975,978],{"className":976,"code":977,"language":510,"meta":462},[508],"\u003CInputGroup>\n  \u003CInputGroupTextarea placeholder=\"Enter message...\" />\n  \u003CInputGroupAddon align=\"block-end\">\n    \u003CInputGroupButton>Send\u003C/InputGroupButton>\n  \u003C/InputGroupAddon>\n\u003C/InputGroup>\n",[464,979,977],{"__ignoreMap":462},{"title":462,"searchDepth":981,"depth":981,"links":982},2,[983,984,985,998],{"id":432,"depth":981,"text":20},{"id":503,"depth":981,"text":504},{"id":516,"depth":981,"text":386,"children":986},[987,989,990,991,992,993,994,995,996,997],{"id":520,"depth":988,"text":521},3,{"id":528,"depth":988,"text":529},{"id":539,"depth":988,"text":125},{"id":549,"depth":988,"text":346},{"id":559,"depth":988,"text":330},{"id":577,"depth":988,"text":306},{"id":587,"depth":988,"text":226},{"id":597,"depth":988,"text":598},{"id":608,"depth":988,"text":129},{"id":618,"depth":988,"text":619},{"id":647,"depth":981,"text":648,"children":999},[1000,1001,1002,1003,1004],{"id":651,"depth":988,"text":652},{"id":700,"depth":988,"text":701},{"id":810,"depth":988,"text":800},{"id":882,"depth":988,"text":883},{"id":934,"depth":988,"text":935},"Display additional information or actions to an input or textarea.","md",null,{"component":132},"---\ntitle: Input Group\ndescription: Display additional information or actions to an input or textarea.\ncomponent: true\nnew: true\n---\n\n::component-preview\n---\nname: InputGroupDemo\nclass: '[&_.preview]:p-4'\n---\n::\n\n## Installation\n\n::code-tabs\n\n::tabs-list\n\n  ::tabs-trigger{value=\"cli\"}\n  CLI\n  ::\n\n  ::tabs-trigger{value=\"manual\"}\n  Manual\n  ::\n\n::\n\n::tabs-content{value=\"cli\"}\n\n```bash\nnpx shadcn-vue@latest add input-group\n```\n\n::\n\n::tabs-content{value=\"manual\"}\n  ::steps\n    ::step\n    Install the following dependencies:\n    ::\n\n    ```bash\n    npm install reka-ui\n    ```\n\n    ::step\n    Copy and paste the [GitHub source code](https://github.com/unovue/shadcn-vue/tree/dev/apps/v4/registry/new-york-v4/ui/input-group) into your project.\n    ::\n\n    ::step\n    Update the import paths to match your project setup.\n    ::\n  ::\n::\n\n::\n\n## Usage\n\n```vue showLineNumbers\n\u003Cscript setup lang=\"ts\">\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n  InputGroupText,\n  InputGroupTextarea,\n} from '@/components/ui/input-group'\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CInputGroup>\n    \u003CInputGroupInput placeholder=\"Search...\" />\n    \u003CInputGroupAddon>\n      \u003CSearchIcon />\n    \u003C/InputGroupAddon>\n    \u003CInputGroupAddon align=\"inline-end\">\n      \u003CInputGroupButton>Search\u003C/InputGroupButton>\n    \u003C/InputGroupAddon>\n  \u003C/InputGroup>\n\u003C/template>\n```\n\n## Examples\n\n### Icon\n\n::component-preview\n---\nname: InputGroupWithIcon\nclass: '[&_.preview]:p-4'\n---\n::\n\n### Text\n\nDisplay additional text information alongside inputs.\n\n::component-preview\n---\nname: InputGroupWithText\nclass: '[&_.preview]:p-4'\n---\n::\n\n### Button\n\nAdd buttons to perform actions within the input group.\n\n::component-preview\n---\nname: InputGroupWithButton\nclass: '[&_.preview]:p-4'\n---\n::\n\n### Tooltip\n\nAdd tooltips to provide additional context or help.\n\n::component-preview\n---\nname: InputGroupWithTooltip\nclass: '[&_.preview]:p-4'\n---\n::\n\n### Textarea\n\nInput groups also work with textarea components. Use `block-start` or `block-end` for alignment.\n\n::component-preview\n---\nname: InputGroupWithTextarea\nclass: '[&_.preview]:p-4'\n---\n::\n\n### Spinner\n\nShow loading indicators while processing input.\n\n::component-preview\n---\nname: InputGroupWithSpinner\nclass: '[&_.preview]:p-4'\n---\n::\n\n### Label\n\nAdd labels within input groups to improve accessibility.\n\n::component-preview\n---\nname: InputGroupWithLabel\nclass: '[&_.preview]:p-4'\n---\n::\n\n### Dropdown\n\nPair input groups with dropdown menus for complex interactions.\n\n::component-preview\n---\nname: InputGroupWithDropdown\nclass: '[&_.preview]:p-4'\n---\n::\n\n### Button Group\n\nWrap input groups with button groups to create prefixes and suffixes.\n\n::component-preview\n---\nname: InputGroupWithButtonGroup\nclass: '[&_.preview]:p-4'\n---\n::\n\n### Custom Input\n\nAdd the `data-slot=\"input-group-control\"` attribute to your custom input for automatic behavior and focus state handling.\n\nNo style is applied to the custom input. Apply your own styles using the `class` prop.\n\n::component-preview\n---\nname: InputGroupWithCustomInput\nclass: '!mb-4 [&_.preview]:p-4'\n---\n::\n\n```vue showLineNumbers\n\u003Cscript setup lang=\"ts\">\nimport { InputGroup, InputGroupAddon, InputGroupButton } from '@/components/ui/input-group'\n\u003C/script>\n\n\u003Ctemplate>\n  \u003Cdiv class=\"grid w-full max-w-sm gap-6\">\n    \u003CInputGroup>\n      \u003Ctextarea\n        data-slot=\"input-group-control\"\n        class=\"flex field-sizing-content min-h-16 w-full resize-none rounded-md bg-transparent px-3 py-2.5 text-base transition-[color,box-shadow] outline-none md:text-sm\"\n        placeholder=\"Autoresize textarea...\"\n      />\n      \u003CInputGroupAddon align=\"block-end\">\n        \u003CInputGroupButton class=\"ml-auto\" size=\"sm\" variant=\"default\">\n          Submit\n        \u003C/InputGroupButton>\n      \u003C/InputGroupAddon>\n    \u003C/InputGroup>\n  \u003C/div>\n\u003C/template>\n```\n\n## API Reference\n\n### InputGroup\n\nThe main component that wraps inputs and addons.\n\n| Prop        | Type     | Default |\n| ----------- | -------- | ------- |\n| `class` | `string` |         |\n\n```vue\n\u003CInputGroup>\n  \u003CInputGroupInput />\n  \u003CInputGroupAddon />\n\u003C/InputGroup>\n```\n\n### InputGroupAddon\n\nDisplays icons, text, buttons, or other content alongside inputs.\n\n::callout{title=\"Focus Navigation\"}\nFor proper focus navigation, the `InputGroupAddon` component should be placed\nafter the input. Set the `align` prop to position the addon.\n::\n\n| Prop        | Type                                                             | Default          |\n| ----------- | ---------------------------------------------------------------- | ---------------- |\n| `align`     | `\"inline-start\" \\| \"inline-end\" \\| \"block-start\" \\| \"block-end\"` | `\"inline-start\"` |\n| `class` | `string`                                                         |                  |\n\n```vue\n\u003CInputGroupAddon align=\"inline-end\">\n  \u003CSearchIcon />\n\u003C/InputGroupAddon>\n```\n\n**For `\u003CInputGroupInput />`, use the `inline-start` or `inline-end` alignment. For `\u003CInputGroupTextarea />`, use the `block-start` or `block-end` alignment.**\n\nThe `InputGroupAddon` component can have multiple `InputGroupButton` components and icons.\n\n```vue\n\u003CInputGroupAddon>\n  \u003CInputGroupButton>Button\u003C/InputGroupButton>\n  \u003CInputGroupButton>Button\u003C/InputGroupButton>\n\u003C/InputGroupAddon>\n```\n\n### InputGroupButton\n\nDisplays buttons within input groups.\n\n| Prop        | Type                                                                          | Default   |\n| ----------- | ----------------------------------------------------------------------------- | --------- |\n| `size`      | `\"xs\" \\| \"icon-xs\" \\| \"sm\" \\| \"icon-sm\"`                                      | `\"xs\"`    |\n| `variant`   | `\"default\" \\| \"destructive\" \\| \"outline\" \\| \"secondary\" \\| \"ghost\" \\| \"link\"` | `\"ghost\"` |\n| `class` | `string`                                                                      |           |\n\n```vue\n\u003CInputGroupButton>\nButton\n\u003C/InputGroupButton>\n\n\u003CInputGroupButton size=\"icon-xs\" aria-label=\"Copy\">\n  \u003CCopyIcon />\n\u003C/InputGroupButton>\n```\n\n### InputGroupInput\n\nReplacement for `\u003CInput />` when building input groups. This component has the input group styles pre-applied and uses the unified `data-slot=\"input-group-control\"` for focus state handling.\n\n| Prop        | Type     | Default |\n| ----------- | -------- | ------- |\n| `class` | `string` |         |\n\nAll other props are passed through to the underlying `\u003CInput />` component.\n\n```vue\n\u003CInputGroup>\n  \u003CInputGroupInput placeholder=\"Enter text...\" />\n  \u003CInputGroupAddon>\n    \u003CSearchIcon />\n  \u003C/InputGroupAddon>\n\u003C/InputGroup>\n```\n\n### InputGroupTextarea\n\nReplacement for `\u003CTextarea />` when building input groups. This component has the textarea group styles pre-applied and uses the unified `data-slot=\"input-group-control\"` for focus state handling.\n\n| Prop        | Type     | Default |\n| ----------- | -------- | ------- |\n| `class` | `string` |         |\n\nAll other props are passed through to the underlying `\u003CTextarea />` component.\n\n```vue\n\u003CInputGroup>\n  \u003CInputGroupTextarea placeholder=\"Enter message...\" />\n  \u003CInputGroupAddon align=\"block-end\">\n    \u003CInputGroupButton>Send\u003C/InputGroupButton>\n  \u003C/InputGroupAddon>\n\u003C/InputGroup>\n```\n",{"title":210,"description":1005},"RiUnPkdGBFnBBUx4Gr3kYXekKgZUrgsYtvnjXYBNBY8",[1013,1014],{"title":206,"path":207,"stem":208,"children":-1},{"title":214,"path":215,"stem":216,"children":-1},1775649994134]