https://ark-plus.vercel.app/examples/combobox-with-tags-input

1<!DOCTYPE html><!--Q12Yl3AaYFNn3PXLzVniX--><html lang="en" class="__variable_ed3508"><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="preload" href="/_next/static/media/7b0b24f36b1a6d0b-s.p.woff2" as="font" crossorigin="" type="font/woff2"/><link rel="stylesheet" href="/_next/static/css/acd6ed5029e9f59e.css" data-precedence="next"/><link rel="preload" as="script" fetchPriority="low" href="/_next/static/chunks/webpack-1860bd109006eeb5.js"/>

1<script src="/_next/static/chunks/c7879cf7-9458ccb5b50d2054.js" async=""></script>

1<script src="/_next/static/chunks/131-66f622822b0e8f38.js" async=""></script>

1<script src="/_next/static/chunks/main-app-d6aceee579de65e1.js" async=""></script>

1<script src="/_next/static/chunks/app/layout-e0ee704688a40219.js" async=""></script>

1<script src="/_next/static/chunks/101-21de346f45c433e4.js" async=""></script>

1<script src="/_next/static/chunks/app/examples/%5Bid%5D/page-d698aa39219cf98a.js" async=""></script>

1<meta name="next-size-adjust" content=""/>

1<script src="/_next/static/chunks/polyfills-42372ed130431b0a.js" noModule=""></script>

1</head><body><div hidden=""><!--$--><!--/$--></div>

1<script>((a,b,c,d,e,f,g,h)=>{let i=document.documentElement,j=["light","dark"];function k(b){var c;(Array.isArray(a)?a:[a]).forEach(a=>{let c="class"===a,d=c&&f?e.map(a=>f[a]||a):e;c?(i.classList.remove(...d),i.classList.add(f&&f[b]?f[b]:b)):i.setAttribute(a,b)}),c=b,h&&j.includes(c)&&(i.style.colorScheme=c)}if(d)k(d);else try{let a=localStorage.getItem(b)||c,d=g&&"system"===a?window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light":a;k(d)}catch(a){}})("class","theme","system",null,["light","dark"],null,true,true)</script>

1<!--$!--><template data-dgst="BAILOUT_TO_CLIENT_SIDE_RENDERING"></template><!--/$--><div class="d_flex flex-d_column ai_center jc_flex-start bg_bg.default min-h_md p_8"><div dir="ltr" data-scope="combobox" data-part="root" data-empty="" id="_R_15fiv5ulb_" class="tagsInput__root tagsInput__root--size_md max-w_sm combobox__root combobox__root--size_md"><label data-scope="combobox" data-part="label" dir="ltr" for="_R_15fiv5ulbH1_" id="combobox:_R_35fiv5ulb_:label" class="combobox__label combobox__label--size_md">Country</label><div id="_R_15fiv5ulbH2_" data-scope="combobox" data-part="control" dir="ltr" data-state="closed" class="tagsInput__control tagsInput__control--size_md combobox__control combobox__control--size_md"><input data-scope="combobox" data-part="input" dir="ltr" data-empty="" id="_R_15fiv5ulbH1_" autoComplete="off" autoCorrect="off" autoCapitalize="none" enterKeyHint="done" placeholder="Add Country" spellCheck="false" type="text" role="combobox" aria-autocomplete="list" aria-controls="combobox:_R_35fiv5ulb_:content" aria-expanded="false" data-state="closed" class="tagsInput__input tagsInput__input--size_md combobox__input combobox__input--size_md" value=""/></div><div data-scope="combobox" data-part="positioner" dir="ltr" id="combobox:_R_35fiv5ulb_:popper" style="position:absolute;isolation:isolate;width:var(--reference-width);pointer-events:none;top:0px;left:0px;transform:translate3d(0, -100vh, 0);z-index:var(--z-index)" class="combobox__positioner combobox__positioner--size_md"><div data-scope="combobox" data-part="content" dir="ltr" id="combobox:_R_35fiv5ulb_:content" role="listbox" tabindex="-1" hidden="" data-state="closed" aria-labelledby="combobox:_R_35fiv5ulb_:label" aria-multiselectable="true" class="combobox__content combobox__content--size_md"><div class="ov_auto max-h_280px ovs-b_contain"><div data-scope="combobox" data-part="item" dir="ltr" id="combobox:_R_35fiv5ulb_:option:ZA" role="option" tabindex="-1" data-state="unchecked" data-value="ZA" class="combobox__item combobox__item--size_md">Zambia</div><div data-scope="combobox" data-part="item" dir="ltr" id="combobox:_R_35fiv5ulb_:option:BN" role="option" tabindex="-1" data-state="unchecked" data-value="BN" class="combobox__item combobox__item--size_md">Benin</div><div data-scope="combobox" data-part="item" dir="ltr" id="combobox:_R_35fiv5ulb_:option:CA" role="option" tabindex="-1" data-state="unchecked" data-value="CA" class="combobox__item combobox__item--size_md">Canada</div><div data-scope="combobox" data-part="item" dir="ltr" id="combobox:_R_35fiv5ulb_:option:US" role="option" tabindex="-1" data-state="unchecked" data-value="US" class="combobox__item combobox__item--size_md">United States</div><div data-scope="combobox" data-part="item" dir="ltr" id="combobox:_R_35fiv5ulb_:option:JP" role="option" tabindex="-1" data-state="unchecked" data-value="JP" class="combobox__item combobox__item--size_md">Japan</div><div data-scope="combobox" data-part="item" dir="ltr" id="combobox:_R_35fiv5ulb_:option:NG" role="option" tabindex="-1" data-state="unchecked" data-value="NG" class="combobox__item combobox__item--size_md">Nigeria</div><div data-scope="combobox" data-part="item" dir="ltr" id="combobox:_R_35fiv5ulb_:option:AL" role="option" tabindex="-1" data-state="unchecked" data-value="AL" class="combobox__item combobox__item--size_md">Albania</div><div data-scope="combobox" data-part="item" dir="ltr" id="combobox:_R_35fiv5ulb_:option:DZ" role="option" tabindex="-1" data-state="unchecked" data-value="DZ" class="combobox__item combobox__item--size_md">Algeria</div><div data-scope="combobox" data-part="item" dir="ltr" id="combobox:_R_35fiv5ulb_:option:AS" role="option" tabindex="-1" data-state="unchecked" data-value="AS" class="combobox__item combobox__item--size_md">American Samoa</div><div data-scope="combobox" data-part="item" dir="ltr" id="combobox:_R_35fiv5ulb_:option:AD" role="option" tabindex="-1" data-state="unchecked" data-value="AD" class="combobox__item combobox__item--size_md">Andorra</div><div data-scope="combobox" data-part="item" dir="ltr" id="combobox:_R_35fiv5ulb_:option:AO" role="option" tabindex="-1" data-state="unchecked" data-value="AO" class="combobox__item combobox__item--size_md">Angola</div><div data-scope="combobox" data-part="item" dir="ltr" id="combobox:_R_35fiv5ulb_:option:AI" role="option" tabindex="-1" data-state="unchecked" data-value="AI" class="combobox__item combobox__item--size_md">Anguilla</div><div data-scope="combobox" data-part="item" dir="ltr" id="combobox:_R_35fiv5ulb_:option:AQ" role="option" tabindex="-1" data-state="unchecked" data-value="AQ" class="combobox__item combobox__item--size_md">Antarctica</div><div data-scope="combobox" data-part="item" dir="ltr" id="combobox:_R_35fiv5ulb_:option:AU" role="option" tabindex="-1" data-state="unchecked" data-value="AU" class="combobox__item combobox__item--size_md">Australia</div><div data-scope="combobox" data-part="item" dir="ltr" id="combobox:_R_35fiv5ulb_:option:AT" role="option" tabindex="-1" data-state="unchecked" data-value="AT" class="combobox__item combobox__item--size_md">Austria</div><div data-scope="combobox" data-part="item" dir="ltr" id="combobox:_R_35fiv5ulb_:option:AZ" role="option" tabindex="-1" data-state="unchecked" data-value="AZ" class="combobox__item combobox__item--size_md">Azerbaijan</div><div data-scope="combobox" data-part="item" dir="ltr" id="combobox:_R_35fiv5ulb_:option:BS" role="option" tabindex="-1" data-state="unchecked" data-value="BS" class="combobox__item combobox__item--size_md">Bahamas</div><div data-scope="combobox" data-part="item" dir="ltr" id="combobox:_R_35fiv5ulb_:option:BH" role="option" tabindex="-1" data-state="unchecked" data-value="BH" class="combobox__item combobox__item--size_md">Bahrain</div><div data-scope="combobox" data-part="item" dir="ltr" id="combobox:_R_35fiv5ulb_:option:MG" role="option" tabindex="-1" data-state="unchecked" data-value="MG" class="combobox__item combobox__item--size_md">

1Madagascar</div><div data-scope="combobox" data-part="item" dir="ltr" id="combobox:_R_35fiv5ulb_:option:MW" role="option" tabindex="-1" data-state="unchecked" data-value="MW" class="combobox__item combobox__item--size_md">Malawi</div><div data-scope="combobox" data-part="item" dir="ltr" id="combobox:_R_35fiv5ulb_:option:MY" role="option" tabindex="-1" data-state="unchecked" data-value="MY" class="combobox__item combobox__item--size_md">Malaysia</div><div data-scope="combobox" data-part="item" dir="ltr" id="combobox:_R_35fiv5ulb_:option:MV" role="option" tabindex="-1" data-state="unchecked" data-value="MV" class="combobox__item combobox__item--size_md">Maldives</div><div data-scope="combobox" data-part="item" dir="ltr" id="combobox:_R_35fiv5ulb_:option:ML" role="option" tabindex="-1" data-state="unchecked" data-value="ML" class="combobox__item combobox__item--size_md">Mali</div><div data-scope="combobox" data-part="item" dir="ltr" id="combobox:_R_35fiv5ulb_:option:MT" role="option" tabindex="-1" data-state="unchecked" data-value="MT" class="combobox__item combobox__item--size_md">Malta</div><div data-scope="combobox" data-part="item" dir="ltr" id="combobox:_R_35fiv5ulb_:option:TG" role="option" tabindex="-1" data-state="unchecked" data-value="TG" class="combobox__item combobox__item--size_md">Togo</div><div data-scope="combobox" data-part="item" dir="ltr" id="combobox:_R_35fiv5ulb_:option:TK" role="option" tabindex="-1" data-state="unchecked" data-value="TK" class="combobox__item combobox__item--size_md">Tokelau</div><div data-scope="combobox" data-part="item" dir="ltr" id="combobox:_R_35fiv5ulb_:option:TO" role="option" tabindex="-1" data-state="unchecked" data-value="TO" class="combobox__item combobox__item--size_md">Tonga</div><div data-scope="combobox" data-part="item" dir="ltr" id="combobox:_R_35fiv5ulb_:option:TT" role="option" tabindex="-1" data-state="unchecked" data-value="TT" class="combobox__item combobox__item--size_md">Trinidad and Tobago</div><div data-scope="combobox" data-part="item" dir="ltr" id="combobox:_R_35fiv5ulb_:option:TN" role="option" tabindex="-1" data-state="unchecked" data-value="TN" class="combobox__item combobox__item--size_md">Tunisia</div></div></div></div></div></div><!--$--><!--/$-->

1<script src="/_next/static/chunks/webpack-1860bd109006eeb5.js" id="_R_" async=""></script>

1<script>(self.__next_f=self.__next_f||[]).push([0])</script>

1<script>self.__next_f.push([1,"1:\"$Sreact.fragment\"\n2:I[6921,[\"177\",\"static/chunks/app/layout-e0ee704688a40219.js\"],\"ThemeProvider\"]\n3:\"$Sreact.suspense\"\n4:I[8019,[\"177\",\"static/chunks/app/layout-e0ee704688a40219.js\"],\"ColorMode\"]\n5:I[5204,[],\"\"]\n6:I[2642,[],\"\"]\n8:I[433,[],\"OutletBoundary\"]\na:I[9884,[],\"AsyncMetadataOutlet\"]\nc:I[433,[],\"ViewportBoundary\"]\ne:I[433,[],\"MetadataBoundary\"]\n10:I[3536,[],\"\"]\n:HL[\"/_next/static/media/7b0b24f36b1a6d0b-s.p.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/css/acd6ed5029e9f59e.css\",\"style\"]\n"])</script>

1<script>self.__next_f.push([1,"0:{\"P\":null,\"b\":\"Q12Yl3AaYFNn3PXLzVniX\",\"p\":\"\",\"c\":[\"\",\"examples\",\"combobox-with-tags-input\"],\"i\":false,\"f\":[[[\"\",{\"children\":[\"examples\",{\"children\":[[\"id\",\"combobox-with-tags-input\",\"d\"],{\"children\":[\"__PAGE__\",{}]}]}]},\"$undefined\",\"$undefined\",true],[\"\",[\"$\",\"$1\",\"c\",{\"children\":[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/acd6ed5029e9f59e.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}]],[\"$\",\"html\",null,{\"lang\":\"en\",\"className\":\"__variable_ed3508\",\"suppressHydrationWarning\":true,\"children\":[[\"$\",\"head\",null,{}],[\"$\",\"body\",null,{\"children\":[\"$\",\"$L2\",null,{\"attribute\":\"class\",\"children\":[[\"$\",\"$3\",null,{\"children\":[\"$\",\"$L4\",null,{}]}],[\"$\",\"$L5\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L6\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[[\"$\",\"title\",null,{\"children\":\"404: This page could not be found.\"}],[\"$\",\"div\",null,{\"style\":{\"fontFamily\":\"system-ui,\\\"Segoe UI\\\",Roboto,Helvetica,Arial,sans-serif,\\\"Apple Color Emoji\\\",\\\"Segoe UI Emoji\\\"\",\"height\":\"100vh\",\"textAlign\":\"center\",\"display\":\"flex\",\"flexDirection\":\"column\",\"alignItems\":\"center\",\"justifyContent\":\"center\"},\"children\":[\"$\",\"div\",null,{\"children\":[[\"$\",\"style\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}\"}}],[\"$\",\"h1\",null,{\"className\":\"next-error-h1\",\"style\":{\"display\":\"inline-block\",\"margin\":\"0 20px 0 0\",\"padding\":\"0 23px 0 0\",\"fontSize\":24,\"fontWeight\":500,\"verticalAlign\":\"top\",\"lineHeight\":\"49px\"},\"children\":404}],[\"$\",\"div\",null,{\"style\":{\"display\":\"inline-block\"},\"children\":[\"$\",\"h2\",null,{\"style\":{\"fontSize\":14,\"fontWeight\":400,\"lineHeight\":\"49px\",\"margin\":0},\"children\":\"This page could not be found.\"}]}]]}]}]],[]],\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]]}]}]]}]]}],{\"children\":[\"examples\",[\"$\",\"$1\",\"c\",{\"children\":[null,[\"$\",\"$L5\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L6\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]]}],{\"children\":[[\"id\",\"combobox-with-tags-input\",\"d\"],[\"$\",\"$1\",\"c\",{\"children\":[null,[\"$\",\"$L5\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L6\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]]}],{\"children\":[\"__PAGE__\",[\"$\",\"$1\",\"c\",{\"children\":[\"$L7\",null,[\"$\",\"$L8\",null,{\"children\":[\"$L9\",[\"$\",\"$La\",null,{\"promise\":\"$@b\"}]]}]]}],{},null,false]},null,false]},null,false]},null,false],[\"$\",\"$1\",\"h\",{\"children\":[null,[[\"$\",\"$Lc\",null,{\"children\":\"$Ld\"}],[\"$\",\"meta\",null,{\"name\":\"next-size-adjust\",\"content\":\"\"}]],[\"$\",\"$Le\",null,{\"children\":[\"$\",\"div\",null,{\"hidden\":true,\"children\":[\"$\",\"$3\",null,{\"fallback\":null,\"children\":\"$Lf\"}]}]}]]}],false]],\"m\":\"$undefined\",\"G\":[\"$10\",[]],\"s\":false,\"S\":true}\n"])</script>

1<script>self.__next_f.push([1,"11:I[2870,[\"101\",\"static/chunks/101-21de346f45c433e4.js\",\"566\",\"static/chunks/app/examples/%5Bid%5D/page-d698aa39219cf98a.js\"],\"PreloadChunks\"]\n7:[\"$\",\"div\",null,{\"ref\":\"$undefined\",\"className\":\"d_flex flex-d_column ai_center jc_flex-start bg_bg.default min-h_md p_8\",\"children\":[[\"$\",\"$L11\",null,{\"moduleIds\":\"$undefined\"}],\"$L12\"]}]\n"])</script>

1<script>self.__next_f.push([1,"13:I[6929,[\"101\",\"static/chunks/101-21de346f45c433e4.js\",\"566\",\"static/chunks/app/examples/%5Bid%5D/page-d698aa39219cf98a.js\"],\"default\"]\n12:[\"$\",\"$L13\",null,{}]\n"])</script>

1<script>self.__next_f.push([1,"d:[[\"$\",\"meta\",\"0\",{\"charSet\":\"utf-8\"}],[\"$\",\"meta\",\"1\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}]]\n9:null\n"])</script>

1<script>self.__next_f.push([1,"b:{\"metadata\":[],\"error\":null,\"digest\":\"$undefined\"}\n"])</script>

1<script>self.__next_f.push([1,"f:\"$b:metadata\"\n"])</script>

1</body></html>