4d: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"] 4e: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"] 4f: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"] 50:T2ce1,import { useCallback, useEffect, useMemo, useState, type ComponentProps, type ReactNode, } from "react"; import { Command as CommandPrimitive } from "cmdk"; import { Check, X } from "lucide-react"; import { Popover, PopoverAnchor, PopoverContent, } from "@/components/ui/popover"; import { Command, CommandEmpty, CommandGroup, CommandItem, CommandList, } from "@/components/ui/command"; import { Skeleton } from "@/components/ui/skeleton"; import { cn } from "@/lib/utils"; import { useControlledState } from "@/hooks/use-controlled-state"; import type { SelectionOption } from "@/hooks/use-filtered-options"; import { useOptionMap } from "@/hooks/use-option-map"; import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, } from "@/components/ui/input-group"; export type ComboboxGroup = { /** Optional heading rendered above this group of options. */ label?: string; items: SelectionOption[]; }; const FOOTER_ITEM_VALUE = "__kaui_combobox_footer__"; function isGrouped( items: SelectionOption[] | ComboboxGroup[], ): items is ComboboxGroup[] { return items.length > 0 && "items" in (items[0] as object); } type ComboboxProps = { /** Currently selected option, or `null` when nothing is selected. */ selected: SelectionOption | null; /** Called when the selection changes. Receives `null` on deselect. */ onSelectedChange: (value: SelectionOption | null) => void; /** * Options to display. Accepts a flat `SelectionOption[]` or a * `ComboboxGroup[]` to render items under labeled headings. */ items: SelectionOption[] | ComboboxGroup[]; /** * 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; /** Controlled search query. Omit to let the component manage query state internally. */ query?: string; /** Called whenever the search query changes. */ onQueryChange?: (query: string) => 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; /** Skip client-side filtering. Use when items are already filtered server-side. */ disableLocalFilter?: boolean; /** Custom filter predicate. Replaces the default case-insensitive label match. */ filterFn?: (item: SelectionOption, query: string) => boolean; /** 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 skeleton bar. */ loadingContent?: ReactNode; /** Show the loading state in place of the option list. @default false */ isLoading?: boolean; /** Close the dropdown immediately after an option is selected. @default false */ closeAfterSelect?: boolean; /** Disable the entire combobox. @default false */ disabled?: boolean; /** Show a built-in clear button when an option is selected. @default false */ clearable?: 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 status indicator). */ endAddon?: ReactNode; /** * A persistent CommandItem pinned to the bottom of the list. * Fully keyboard-navigable (arrow keys + Enter) unlike emptyContent. * Shown whenever the dropdown is open, regardless of whether items exist. */ footerItem?: { label: ReactNode; onSelect: () => void }; } & ComponentProps; /** * Single-select combobox with an inline search input and a dropdown option list. * * **Required:** `selected`, `onSelectedChange`, `items` * * Supports controlled `open` and `query` state, async loading, grouped options, * custom option rendering, and custom filtering. */ export function Combobox({ selected, onSelectedChange, items, renderOption, query: queryProp, onQueryChange, open: openProp, onOpenChange, disableLocalFilter, filterFn, placeholder = "Search...", emptyContent = "No results found.", loadingContent, isLoading = false, closeAfterSelect = false, disabled = false, clearable = false, startAddon, endAddon, footerItem, ...props }: ComboboxProps) { const [query, setQuery] = useControlledState({ value: queryProp, defaultValue: "", onChange: onQueryChange, }); const [open, setOpen] = useControlledState({ value: openProp, defaultValue: false, onChange: onOpenChange, }); // Controlled highlighted item — starts empty so the first item is not // auto-focused when the dropdown opens. Resets on close so the next open // is also clean. const [highlightedValue, setHighlightedValue] = useState(""); useEffect(() => { if (!open) setHighlightedValue(""); }, [open]); const groups = useMemo( (): ComboboxGroup[] => !items.length ? [] : isGrouped(items) ? items : [{ items: items as SelectionOption[] }], [items], ); const allOptions = useMemo(() => groups.flatMap((g) => g.items), [groups]); const optionMap = useOptionMap(allOptions); const filteredGroups = useMemo((): ComboboxGroup[] => { if (disableLocalFilter || !query.trim()) return groups; const pred = filterFn ?? ((item: SelectionOption, q: string) => item.label.toLowerCase().includes(q.toLowerCase())); return groups .map((g) => ({ ...g, items: g.items.filter((item) => pred(item, query)), })) .filter((g) => g.items.length > 0); }, [groups, query, disableLocalFilter, filterFn]); const hasItems = filteredGroups.length > 0; const handleSelect = useCallback( (selectedValue: string) => { const option = optionMap.get(selectedValue as T); if (!option) return; if (selected?.value === option.value) { onSelectedChange(null); setQuery(""); } else { onSelectedChange(option); setQuery(option.label); if (closeAfterSelect) setOpen(false); } }, [ optionMap, selected?.value, onSelectedChange, setQuery, closeAfterSelect, setOpen, ], ); const handleClear = useCallback(() => { onSelectedChange(null); setQuery(""); }, [onSelectedChange, setQuery]); const handleBlur = (e: React.FocusEvent) => { if (e.relatedTarget?.hasAttribute("cmdk-list")) return; if (selected) setQuery(selected.label); }; const renderItem = (item: SelectionOption) => ( e.preventDefault()} > {renderOption ? ( renderOption(item, selected?.value === item.value) ) : ( <> {item.label} )} ); const footerCommandItem = footerItem ? ( e.preventDefault()} > {footerItem.label} ) : null; return (

{startAddon && ( {startAddon} )} !disabled && setOpen(true)} onKeyDown={(e) => { if (disabled) return; if (e.key === "Escape") { if (open) { setOpen(false); } else { setQuery(""); } return; } setOpen(true); }} onBlur={handleBlur} > !disabled && setOpen(true)} /> {((clearable && !!selected) || !!endAddon) && ( {clearable && selected && ( { e.preventDefault(); handleClear(); }} > )} {endAddon} )} {!open && } e.preventDefault()} onInteractOutside={(e) => { if ( e.target instanceof Element && e.target.hasAttribute("cmdk-input") ) { e.preventDefault(); } }} {...props} > {isLoading ? (

{loadingContent ?? }

) : hasItems ? ( <> {filteredGroups.map((group, index) => ( {group.items.map(renderItem)} ))} {footerCommandItem && ( {footerCommandItem} )} ) : footerItem ? ( <>

{emptyContent}

{footerCommandItem} ) : ( {emptyContent} )}

); } 51: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]); } 49:["$","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"}]]}]}]]}],["$","$L4d",null,{"registryDependencies":["popover","command","input","skeleton","utils","https://kaui-shadcn-registry.vercel.app/r/use-controlled-state.json"]}]]}],["$","$L4e",null,{"sourceUrl":"https://kaui-shadcn-registry.vercel.app/r/combobox.json","proxyUrl":"https://shadcnregistry.com/r/kaui/combobox","itemId":"@kaui/combobox"}],["$","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"}],["$","$L4f",null,{"files":[{"path":"src/registry/base/combobox/components/combobox.tsx","content":"$50","type":"registry:component","target":"components/ui/combobox.tsx"},{"path":"src/registry/base/combobox/hooks/use-option-map.ts","content":"import { useMemo } from \"react\";\nimport type { SelectionOption } from \"@/hooks/use-filtered-options\";\n\n/** Memoised `Map` for O(1) option lookup after a cmdk selection. */\nexport function useOptionMap(items: SelectionOption[]) {\n return useMemo(\n () => new Map(items.map((item) => [item.value, item])),\n [items],\n );\n}\n","type":"registry:hook","target":"hooks/use-option-map.ts"},{"path":"src/registry/base/use-filtered-options/hooks/use-filtered-options.ts","content":"$51","type":"registry:hook","target":"hooks/use-filtered-options.ts"}]}]]}],"$L52"]}]

Combobox

Installation

Files

components

hooks

Styles