50:I[707087,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"RegistryDependencies"] 51:I[512940,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"Installation"] 52:I[314491,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"FilesView"] 53:Tda0,"use client"; import React from "react"; import MultipleSelector, { Option, } from "@/app/registry/spectrumui/multiple-selector-dependencies"; import { H4 } from "@/app/registry/spectrumui/heading-with-anchor"; const OPTIONS: Option[] = [ { label: "nextjs", value: "nextjs" }, { label: "React", value: "react" }, { label: "Remix", value: "remix" }, { label: "Vite", value: "vite" }, { label: "Nuxt", value: "nuxt" }, { label: "Vue", value: "vue" }, { label: "Svelte", value: "svelte" }, { label: "Angular", value: "angular" }, { label: "Ember", value: "ember" }, { label: "Gatsby", value: "gatsby" }, { label: "Astro", value: "astro" }, ]; const GROUP_OPTIONS: Option[] = [ { label: "nextjs", value: "nextjs", group: "React" }, { label: "React", value: "react", group: "React" }, { label: "Remix", value: "remix", group: "React" }, { label: "shadcn-ui", value: "shadcn-ui", group: "React" }, { label: "mui", value: "mui", group: "React" }, { label: "Vite", value: "vite", group: "Vue" }, { label: "Nuxt", value: "nuxt", group: "Vue" }, { label: "Vue", value: "vue", group: "Vue" }, { label: "Quasar", value: "quasar", group: "Vue" }, { label: "Angular", value: "angular", group: "Angular" }, { label: "Material UI", value: "material-ui", group: "Angular" }, { label: "Ng-zorro", value: "ng-zorro", group: "Angular" }, ]; const mockSearch = (value: string): Option[] => { return OPTIONS.filter((option) => option.value.includes(value)); }; const mockSearchGroup = (value: string): Option[] => { return GROUP_OPTIONS.filter((option) => option.value.includes(value)); }; const MultipleSelectorWithSyncSearch = () => { return (

Sync search

{ const res = mockSearch(value); return res; }} placeholder="trying to search 'a' to get more options..." emptyIndicator={

no results found.

} />

Creatable

{ const res = mockSearch(value); return res; }} placeholder="trying to search 'a' to get more options..." creatable emptyIndicator={

no results found.

} />

GroupBy

{ const res = mockSearchGroup(value); return res; }} placeholder="trying to search 'a' to get more options..." groupBy="group" creatable emptyIndicator={

no results found.

} />

Debounce

{ const res = mockSearch(value); return res; }} placeholder="trying to search 'a' to get more options..." delay={1000} emptyIndicator={

no results found.

} />

); }; export default MultipleSelectorWithSyncSearch; 4c:["$","div",null,{"className":"flex flex-col gap-12","children":[["$","div",null,{"className":"pt-10 flex flex-col gap-4","children":[["$","ul",null,{"className":"flex gap-2 flex-wrap","children":[]}],["$","$L50",null,{"registryDependencies":["@spectrumui/multiple-selector-dependencies","@spectrumui/heading-with-anchor"]}]]}],["$","$L51",null,{"sourceUrl":"https://ui.spectrumhq.in/r/multiple-selector-with-sync-search.json","proxyUrl":"https://shadcnregistry.com/r/spectrumui/multiple-selector-with-sync-search","itemId":"@spectrumui/multiple-selector-with-sync-search"}],["$","section",null,{"className":"flex flex-col gap-4","id":"files","children":[["$","h2",null,{"className":"text-lg md:text-2xl font-bold font-mono","children":"Files"}],["$","$L52",null,{"files":[{"path":"app/registry/multiple-selector/usage/multiple-selector-with-sync-search.tsx","content":"$53","type":"registry:component","target":"components/spectrumui/multiple-selector-with-sync-search.tsx"}]}]]}],"$L54"]}]

Multiple Selector With Sync Search And Creatable And Group

Installation

Files

components

Styles