4e: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"] 4f: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"] 50: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"] 51:T20e8,import { useCallback, useMemo, type ComponentProps, type ReactNode, } from "react"; import { Command as CommandPrimitive } from "cmdk"; import { Check } from "lucide-react"; import { Popover, PopoverAnchor, PopoverContent, } from "@/components/ui/popover"; import { Command, CommandEmpty, CommandGroup, CommandItem, CommandList, } from "@/components/ui/command"; import { InputGroup, InputGroupAddon, InputGroupInput, } from "@/components/ui/input-group"; import { Skeleton } from "@/components/ui/skeleton"; import { cn } from "@/lib/utils"; import { useControlledState } from "@/hooks/use-controlled-state"; import { useFilteredOptions, type SelectionOption, } from "@/hooks/use-filtered-options"; type MultiSelectProps = { /** Full list of options to display. */ items: SelectionOption[]; /** Controlled array of currently selected values. */ value: T[]; /** Called with the full updated selection array after each toggle. */ onValueChange: (value: T[]) => void; /** Controlled open state of the dropdown. Omit to let the component manage it internally. */ open?: boolean; /** Called whenever the open state changes. */ onOpenChange?: (open: boolean) => void; /** Controlled search query. Omit to let the component manage query state internally. */ query?: string; /** Called whenever the search query changes. */ onQueryChange?: (query: string) => void; /** * Custom renderer for each list item. * Receives the option and a boolean indicating whether it is currently selected. * When omitted a default label + checkmark layout is used. */ renderOption?: (option: SelectionOption, selected: boolean) => ReactNode; /** Placeholder shown in the search input when empty. @default "Search..." */ placeholder?: string; /** Content shown when no options match the current query. @default "No results found" */ emptyContent?: ReactNode; /** * Content shown in place of the option list while `isLoading` is `true`. * Defaults to a single skeleton bar. */ loadingContent?: ReactNode; /** * Custom filter predicate. Receives each option and the current query string. * Replaces the default case-insensitive label match when provided. */ filterFn?: (item: SelectionOption, query: string) => boolean; /** * Skip local filtering entirely. * Use when `items` are already filtered server-side for the current query. * @default false */ disableLocalFilter?: boolean; /** Render the loading skeleton in place of the option list. */ isLoading?: boolean; /** Clear the search query after each selection toggle. @default true */ clearQueryOnSelect?: boolean; /** Close the dropdown immediately after each selection toggle. @default false */ closeAfterSelect?: boolean; /** Content rendered as a leading addon inside the input (e.g. a search icon or label). */ startAddon?: ReactNode; /** Content rendered as a trailing addon inside the input (e.g. a selected-count badge or clear button). */ endAddon?: ReactNode; } & ComponentProps; /** * Multi-select combobox that toggles values in and out of a selection array. * * **Required:** `value`, `onValueChange`, `items` * * Supports controlled `open` and `query` state, async loading, custom option rendering, * and custom filtering. Embed icons or actions inside the input via `startAddon` / `endAddon`. */ export function MultiSelect({ items, value, onValueChange, open: openProp, onOpenChange, query: queryProp, onQueryChange, renderOption, placeholder = "Search...", emptyContent = "No results found", loadingContent, filterFn, disableLocalFilter = false, isLoading, clearQueryOnSelect = true, closeAfterSelect = false, startAddon, endAddon, ...props }: MultiSelectProps) { const [values, setValues] = useControlledState({ value, defaultValue: [], onChange: onValueChange, }); const [open, setOpen] = useControlledState({ value: openProp, defaultValue: false, onChange: onOpenChange, }); const [query, setQuery] = useControlledState({ value: queryProp, defaultValue: "", onChange: onQueryChange, }); const selectedSet = useMemo(() => new Set(values), [values]); const filteredItems = useFilteredOptions({ items, query, filterFn, disableLocalFilter, }); const toggleValue = useCallback( (nextValue: string) => { const v = nextValue as T; const next = selectedSet.has(v) ? values.filter((item) => item !== v) : [...values, v]; setValues(next); if (clearQueryOnSelect) { setQuery(""); } if (closeAfterSelect) { setOpen(false); } }, [ values, selectedSet, setValues, clearQueryOnSelect, setQuery, closeAfterSelect, setOpen, ], ); return (

{startAddon && ( {startAddon} )} setOpen(true)} onKeyDown={(e) => { if (e.key === "Escape") { if (open) { setOpen(false); } else { setQuery(""); } return; } setOpen(true); }} > setOpen(true)} /> {endAddon && ( {endAddon} )} {!open && } { if ( event.target instanceof Element && event.target.hasAttribute("cmdk-input") ) { event.preventDefault(); } }} {...props} > {isLoading ? ( {loadingContent ?? (

)} ) : filteredItems.length ? ( {filteredItems.map((item) => { const isSelected = selectedSet.has(item.value); return ( e.preventDefault()} > {renderOption ? ( renderOption(item, isSelected) ) : ( <> {item.label} )} ); })} ) : ( {emptyContent} )}

); } 52:T53e,import { useMemo } from "react"; export type SelectionOption = { /** Unique identifier for this option, used as the cmdk `value`. */ value: T; /** Display string shown in the list and the search input. */ label: string; /** When `true`, the item renders but cannot be selected. @default false */ disabled?: boolean; }; type UseFilteredOptionsProps = { items: SelectionOption[]; query: string; disableLocalFilter?: boolean; filterFn?: (item: SelectionOption, query: string) => boolean; }; /** * Filters a `SelectionOption` list against a search query. * * Returns the full list when `disableLocalFilter` is `true` or `query` is blank. * Applies `filterFn` when provided; otherwise uses a case-insensitive substring * match on `label`. */ export function useFilteredOptions({ items, query, disableLocalFilter = false, filterFn, }: UseFilteredOptionsProps) { return useMemo(() => { if (disableLocalFilter || !query.trim()) { return items; } if (filterFn) { return items.filter((item) => filterFn(item, query)); } const normalizedQuery = query.toLowerCase(); return items.filter((item) => item.label.toLowerCase().includes(normalizedQuery), ); }, [items, query, disableLocalFilter, filterFn]); } 4a:["$","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":[["$","li","cmdk",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/cmdk","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"text-xs font-medium","children":"cmdk"}]]}]}],["$","li","lucide-react",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"text-xs font-medium","children":"lucide-react"}]]}]}]]}],["$","$L4e",null,{"registryDependencies":["popover","command","input","skeleton","utils","https://kaui-shadcn-registry.vercel.app/r/use-controlled-state.json"]}]]}],["$","$L4f",null,{"sourceUrl":"https://kaui-shadcn-registry.vercel.app/r/multi-select.json","proxyUrl":"https://shadcnregistry.com/r/kaui/multi-select","itemId":"@kaui/multi-select"}],["$","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"}],["$","$L50",null,{"files":[{"path":"src/registry/base/multi-select/components/multi-select.tsx","content":"$51","type":"registry:component","target":"components/ui/multi-select.tsx"},{"path":"src/registry/base/use-filtered-options/hooks/use-filtered-options.ts","content":"$52","type":"registry:hook","target":"hooks/use-filtered-options.ts"}]}]]}],"$L53"]}]

Multi Select

Installation

Files

components

hooks

Styles