56:I[967375,["/_next/static/chunks/3ckbpegu9q9ur.js","/_next/static/chunks/1_jku4_6alchp.js","/_next/static/chunks/1cao8p34cgb9l.js","/_next/static/chunks/0gb-hq220d-q1.js","/_next/static/chunks/307b0d7_-l8ov.js","/_next/static/chunks/2ss2d4ljalpvv.js","/_next/static/chunks/102bhs-_2b_jk.js","/_next/static/chunks/2noxq-mzpkvlt.js","/_next/static/chunks/2-av8qbdy921o.js","/_next/static/chunks/1gfnpo-kbrgdg.js","/_next/static/chunks/04rn7q6euirxd.js","/_next/static/chunks/16f4ye_7sg8ze.js","/_next/static/chunks/0_flz1ct-rwqc.js","/_next/static/chunks/2p2d9kprspnui.js","/_next/static/chunks/1_vaj_35ura1j.js","/_next/static/chunks/3f22myid-4d16.js","/_next/static/chunks/3ak3gn4a-qb9d.js","/_next/static/chunks/1f-fn600c6u2d.js","/_next/static/chunks/1xurg2yjw6nn0.js","/_next/static/chunks/1atwru86-87mp.js","/_next/static/chunks/0n8ol4ghx3r1m.js","/_next/static/chunks/3hb3264wtdgb6.js","/_next/static/chunks/1ogmdgw5gdw4g.js","/_next/static/chunks/3p0_83imucjop.js","/_next/static/chunks/33hve1zeusmw9.js","/_next/static/chunks/005p7b-se12os.js","/_next/static/chunks/363oc3ruev0ms.js","/_next/static/chunks/2bw-bzvne2y0g.js","/_next/static/chunks/3i1p9egb1a_i2.js","/_next/static/chunks/34sbp0om_ey1_.js","/_next/static/chunks/0as5oi19_2nlm.js","/_next/static/chunks/37wolvk0s3m6y.js","/_next/static/chunks/20ic7w-m57yq3.js","/_next/static/chunks/07sx-7-1j02r7.js","/_next/static/chunks/0xss3e0j1j2ij.js","/_next/static/chunks/28vq4e0uhfx74.js","/_next/static/chunks/25lla0-by52bb.js","/_next/static/chunks/03dxm6c5maad_.js","/_next/static/chunks/2itykhpw8u24x.js","/_next/static/chunks/2faghb7lpozlp.js","/_next/static/chunks/36ks0pkf1gbxw.js","/_next/static/chunks/3qsvsk7ozp9pj.js","/_next/static/chunks/1p07gq89setzo.js","/_next/static/chunks/0ikczh2zh0a6j.js","/_next/static/chunks/1l0m-8u7by6ha.js","/_next/static/chunks/1w6xrgwfs0f4_.js","/_next/static/chunks/29kj24m1uwyi-.js","/_next/static/chunks/3q173uyb0g7ko.js","/_next/static/chunks/2a61tmtsd673h.js","/_next/static/chunks/0xs63vjz34wku.js","/_next/static/chunks/2-y5ee6gelwxe.js","/_next/static/chunks/26ikik3t6f6fw.js","/_next/static/chunks/1rh449i_1a5xa.js","/_next/static/chunks/0797_45iu-h5i.js","/_next/static/chunks/2n70c-xls3pq-.js","/_next/static/chunks/00p35b8orat3u.js","/_next/static/chunks/11ld918a_baiw.js","/_next/static/chunks/2-_4cztar64tz.js","/_next/static/chunks/0454gz3pfyvx3.js","/_next/static/chunks/2q3x74849l3fd.js","/_next/static/chunks/0qjd-b72op646.js","/_next/static/chunks/36shnfx3_o948.js","/_next/static/chunks/1d7nsq_5g_big.js","/_next/static/chunks/0dzhg54mvwua1.js","/_next/static/chunks/2f_zg4gs-6tv7.js","/_next/static/chunks/17jy5br_8kzt3.js","/_next/static/chunks/311usk2jjn_8y.js","/_next/static/chunks/3o3rrzci14rjg.js","/_next/static/chunks/18wimvbt1z7wq.js","/_next/static/chunks/3v54547sd60-p.js","/_next/static/chunks/1f5jt9aal10zf.js","/_next/static/chunks/2e9o1gndun_sg.js","/_next/static/chunks/2x_ongd0h9ukp.js","/_next/static/chunks/4509zhkbsyzan.js","/_next/static/chunks/131qt4mq3fidi.js","/_next/static/chunks/02c-xz0_co7qo.js","/_next/static/chunks/0xfydac8pw6yn.js","/_next/static/chunks/3t0077z_g-qmh.js","/_next/static/chunks/394-m1fu5ypg8.js","/_next/static/chunks/3o7gm8owisfq-.js","/_next/static/chunks/2oowq17xzhnea.js","/_next/static/chunks/1i_-v9yed-h9p.js","/_next/static/chunks/2cp0l6c79zgfy.js","/_next/static/chunks/3a6owzh8z4qw_.js","/_next/static/chunks/09l2d6nypdev4.js","/_next/static/chunks/0cdma-wr_zk-j.js","/_next/static/chunks/3jndn-nkbova0.js","/_next/static/chunks/1ok6zzjwjxi95.js","/_next/static/chunks/2nd3qqdb8g9wb.js","/_next/static/chunks/41f22_8ae8-p6.js","/_next/static/chunks/1ajwicasp25i-.js","/_next/static/chunks/02-pretaa4ehy.js","/_next/static/chunks/2mn8r32xtmeoh.js","/_next/static/chunks/25b5fc53la32l.js","/_next/static/chunks/3lnir799fxdpy.js"],"DocsCopyPage"] 21:["$","div",null,{"data-slot":"docs","className":"flex scroll-mt-24 items-stretch pb-8 text-[1.05rem] sm:text-[15px] xl:w-full","children":[["$","div",null,{"className":"flex min-w-0 flex-1 flex-col","children":[["$","div",null,{"className":"h-(--top-spacing) shrink-0"}],["$","div",null,{"className":"mx-auto flex w-full max-w-160 min-w-0 flex-1 flex-col gap-6 px-4 py-6 text-foreground md:px-0 lg:py-8 dark:text-foreground","children":[["$","div",null,{"className":"flex flex-col gap-2","children":["$","div",null,{"className":"flex flex-col gap-2","children":[["$","div",null,{"className":"flex items-center justify-between md:items-start","children":[["$","h1",null,{"className":"scroll-m-24 text-3xl font-semibold tracking-tight sm:text-3xl","children":"Tags Input"}],["$","div",null,{"className":"docs-nav flex items-center gap-2","children":[["$","div",null,{"className":"hidden sm:block","children":["$","$L56",null,{"page":"---\ntitle: Tags Input\ndescription: Tag inputs render tags inside an input, followed by an actual text input.\nbase: vue\ncomponent: true\n---\n\n\n\n## Installation\n\n\n\n\n Command\n Manual\n\n\n\n```bash\nnpx shadcn@latest add @force-ui-vue/tags-input\n```\n\n\n\n\n\n\n\nCopy and paste the following code into your project.\n\n\n\nUpdate the import paths to match your project setup.\n\n\n\n\n\n\n\n## Examples\n\n### Tags with Listbox\n\n\n","url":"https://forceui.public.prd.shared.perforce.com/docs/components/vue/tags-input"}]}],["$","div",null,{"className":"ml-auto flex gap-2","children":[["$","$L4e",null,{"href":"/docs/components/vue/tabs","children":[["$","svg",null,{"ref":"$undefined","xmlns":"http://www.w3.org/2000/svg","width":24,"height":24,"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":2,"strokeLinecap":"round","strokeLinejoin":"round","className":"tabler-icon tabler-icon-arrow-left ","children":["$undefined",["$","path","svg-0",{"d":"M5 12l14 0"}],["$","path","svg-1",{"d":"M5 12l6 6"}],["$","path","svg-2",{"d":"M5 12l6 -6"}],"$undefined"]}],["$","span",null,{"className":"sr-only","children":"Previous"}]],"data-slot":"button","data-variant":"secondary","data-size":"icon","className":"inline-flex shrink-0 items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-all outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=size-])]:size-4 bg-secondary text-secondary-foreground hover:bg-secondary/80 extend-touch-target size-8 shadow-none md:size-7","ref":null}],["$","$L4e",null,{"href":"/docs/components/vue/textarea","children":[["$","span",null,{"className":"sr-only","children":"Next"}],["$","svg",null,{"ref":"$undefined","xmlns":"http://www.w3.org/2000/svg","width":24,"height":24,"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":2,"strokeLinecap":"round","strokeLinejoin":"round","className":"tabler-icon tabler-icon-arrow-right ","children":["$undefined",["$","path","svg-0",{"d":"M5 12l14 0"}],["$","path","svg-1",{"d":"M13 18l6 -6"}],["$","path","svg-2",{"d":"M13 6l6 6"}],"$undefined"]}]],"data-slot":"button","data-variant":"secondary","data-size":"icon","className":"inline-flex shrink-0 items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-all outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=size-])]:size-4 bg-secondary text-secondary-foreground hover:bg-secondary/80 extend-touch-target size-8 shadow-none md:size-7","ref":null}]]}]]}]]}],"$L57"]}]}],"$L58","$L59"]}]]}],"$L5a"]}]

Tags Input

Installation#

Examples#

Tags with Listbox#

Installation

Examples

Tags with Listbox