{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "combobox", "title": "Combobox", "description": "A combobox component.", "dependencies": [ "@hugeicons/react", "@hugeicons/core-free-icons" ], "registryDependencies": [ "@cubby-ui/label", "@cubby-ui/scroll-area", "@cubby-ui/elevated" ], "files": [ { "path": "registry/default/combobox/combobox.tsx", "content": "\"use client\";\r\n\r\nimport * as React from \"react\";\r\nimport { cn } from \"@/lib/utils\";\r\nimport {\r\n elevatedSurface,\r\n type SurfaceLevel,\r\n} from \"@/registry/default/lib/elevated\";\r\nimport { Label } from \"@/registry/default/label/label\";\r\nimport {\r\n ScrollArea,\r\n type ScrollAreaProps,\r\n} from \"@/registry/default/scroll-area/scroll-area\";\r\nimport { Combobox as BaseCombobox } from \"@base-ui/react/combobox\";\r\n\r\nimport { HugeiconsIcon } from \"@hugeicons/react\";\r\nimport {\r\n ArrowDown01Icon,\r\n Cancel01Icon,\r\n Tick02Icon,\r\n} from \"@hugeicons/core-free-icons\";\r\nconst useComboboxFilter = BaseCombobox.useFilter;\r\nconst useComboboxFilteredItems = BaseCombobox.useFilteredItems;\r\n\r\n// Shared styling for the start/end addon containers. `pointer-events-none` lets\r\n// clicks on decorative content (icons, spinners) fall through to the InputGroup,\r\n// whose Base UI mousedown handler focuses the input; interactive children opt\r\n// back in so buttons/links inside an addon still receive their own clicks.\r\nconst comboboxAddonClassName = cn(\r\n \"text-muted-foreground pointer-events-none flex shrink-0 items-center\",\r\n \"[&_svg:not([class*='size-'])]:size-4\",\r\n \"[&_:is(button,a,input,select,textarea,label,[role=button])]:pointer-events-auto\",\r\n);\r\n\r\nconst ComboboxContext = React.createContext<{\r\n id: string;\r\n /** The mounted ComboboxChips element, if any, used to anchor the popup. */\r\n chipsElement: HTMLDivElement | null;\r\n setChipsElement: (element: HTMLDivElement | null) => void;\r\n} | null>(null);\r\n\r\nfunction Combobox(\r\n props: BaseCombobox.Root.Props,\r\n): React.JSX.Element {\r\n const id = React.useId();\r\n const [chipsElement, setChipsElement] = React.useState(\r\n null,\r\n );\r\n\r\n const contextValue = React.useMemo(\r\n () => ({ id, chipsElement, setChipsElement }),\r\n [id, chipsElement],\r\n );\r\n\r\n return (\r\n \r\n \r\n \r\n );\r\n}\r\n\r\nfunction ComboboxInput({\r\n id: idProp,\r\n className,\r\n inputClassName,\r\n showTrigger = true,\r\n showClear = true,\r\n variant = \"default\",\r\n start,\r\n end,\r\n ...props\r\n}: BaseCombobox.Input.Props & {\r\n showTrigger?: boolean;\r\n showClear?: boolean;\r\n variant?: \"default\" | \"elevated\";\r\n /** Content pinned to the start (leading edge) of the field, e.g. a search icon. */\r\n start?: React.ReactNode;\r\n /** Content pinned to the end of the field, before Clear and Trigger, e.g. a loading spinner. */\r\n end?: React.ReactNode;\r\n /** Class applied to the inner ``. `className` styles the field wrapper. */\r\n inputClassName?: string;\r\n}) {\r\n const context = React.use(ComboboxContext);\r\n const id = idProp ?? context?.id;\r\n\r\n return (\r\n // The wrapper carries the field chrome (border, bg, height, focus ring) so\r\n // start/end/clear/trigger lay out as flex siblings instead of overlapping\r\n // the input via absolute positioning + hand-tuned padding.\r\n \r\n {start != null && (\r\n \r\n {start}\r\n \r\n )}\r\n \r\n {end != null && (\r\n
\r\n {end}\r\n
\r\n )}\r\n {(showClear || showTrigger) && (\r\n
\r\n {showClear && }\r\n {showTrigger && }\r\n
\r\n )}\r\n \r\n );\r\n}\r\n\r\nfunction ComboboxChipInput({\r\n id: idProp,\r\n className,\r\n ...props\r\n}: BaseCombobox.Input.Props) {\r\n const context = React.use(ComboboxContext);\r\n const id = idProp ?? context?.id;\r\n\r\n return (\r\n \r\n );\r\n}\r\n\r\nfunction ComboboxTrigger({\r\n className,\r\n children,\r\n ...props\r\n}: BaseCombobox.Trigger.Props) {\r\n return (\r\n \r\n {children ?? (\r\n \r\n )}\r\n \r\n );\r\n}\r\n\r\nfunction ComboboxIcon({\r\n className,\r\n ...props\r\n}: React.ComponentProps) {\r\n return (\r\n \r\n );\r\n}\r\n\r\nfunction ComboboxClear({ className, ...props }: BaseCombobox.Clear.Props) {\r\n return (\r\n \r\n \r\n \r\n );\r\n}\r\n\r\nfunction ComboboxValue({ ...props }: BaseCombobox.Value.Props) {\r\n return ;\r\n}\r\n\r\nfunction ComboboxPortal({ ...props }: BaseCombobox.Portal.Props) {\r\n return ;\r\n}\r\n\r\nfunction ComboboxBackdrop({\r\n className,\r\n ...props\r\n}: BaseCombobox.Backdrop.Props) {\r\n return (\r\n \r\n );\r\n}\r\n\r\nfunction ComboboxPositioner({\r\n className,\r\n ...props\r\n}: BaseCombobox.Positioner.Props) {\r\n return (\r\n \r\n );\r\n}\r\n\r\nfunction ComboboxPopupPrimitive({\r\n className,\r\n level = 3,\r\n shadowLevel = 3,\r\n ...props\r\n}: BaseCombobox.Popup.Props & {\r\n /** Surface elevation level for the popup bg (1-8). Bump when nesting inside a Dialog. Defaults to 3. */\r\n level?: SurfaceLevel;\r\n /** Shadow weight (1-8). Pinned to 3 by default so the combobox reads the same regardless of nesting depth. */\r\n shadowLevel?: SurfaceLevel;\r\n}) {\r\n return (\r\n \r\n );\r\n}\r\n\r\nfunction ComboboxArrow({ className, ...props }: BaseCombobox.Arrow.Props) {\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n \r\n );\r\n}\r\n\r\nfunction ComboboxStatus({ className, ...props }: BaseCombobox.Status.Props) {\r\n return (\r\n \r\n );\r\n}\r\n\r\nfunction ComboboxEmpty({ className, ...props }: BaseCombobox.Empty.Props) {\r\n return (\r\n \r\n );\r\n}\r\n\r\nfunction ComboboxList({\r\n className,\r\n nativeScroll = false,\r\n fadeEdges = true,\r\n scrollbarGutter = false,\r\n persistScrollbar,\r\n hideScrollbar,\r\n ...props\r\n}: BaseCombobox.List.Props &\r\n Pick<\r\n ScrollAreaProps,\r\n | \"nativeScroll\"\r\n | \"fadeEdges\"\r\n | \"scrollbarGutter\"\r\n | \"persistScrollbar\"\r\n | \"hideScrollbar\"\r\n >) {\r\n return (\r\n \r\n \r\n \r\n );\r\n}\r\n\r\nfunction ComboboxVirtualizedList({\r\n className,\r\n children,\r\n scrollRef,\r\n totalSize,\r\n emptyMessage = \"No results found.\",\r\n fadeEdges = \"y\",\r\n nativeScroll = false,\r\n ...props\r\n}: Omit, \"ref\"> &\r\n Pick & {\r\n scrollRef: (element: HTMLDivElement | null) => void;\r\n totalSize: number;\r\n emptyMessage?: React.ReactNode;\r\n }) {\r\n return (\r\n <>\r\n \r\n {emptyMessage}\r\n \r\n \r\n \r\n \r\n {children}\r\n \r\n \r\n \r\n \r\n );\r\n}\r\n\r\nfunction ComboboxCollection({ ...props }: BaseCombobox.Collection.Props) {\r\n return ;\r\n}\r\n\r\nfunction ComboboxRow({ className, ...props }: BaseCombobox.Row.Props) {\r\n return (\r\n \r\n );\r\n}\r\n\r\nfunction ComboboxItem({\r\n className,\r\n children,\r\n ref,\r\n ...props\r\n}: BaseCombobox.Item.Props & {\r\n ref?: React.Ref;\r\n}) {\r\n return (\r\n \r\n
{children}
\r\n \r\n }\r\n />\r\n \r\n );\r\n}\r\n\r\nfunction ComboboxItemIndicator({\r\n className,\r\n ...props\r\n}: BaseCombobox.ItemIndicator.Props) {\r\n return (\r\n \r\n );\r\n}\r\n\r\nfunction ComboboxGroup({ className, ...props }: BaseCombobox.Group.Props) {\r\n return (\r\n \r\n );\r\n}\r\n\r\nfunction ComboboxGroupLabel({\r\n className,\r\n ...props\r\n}: BaseCombobox.GroupLabel.Props) {\r\n return (\r\n \r\n );\r\n}\r\n\r\nfunction ComboboxSeparator({\r\n className,\r\n ...props\r\n}: BaseCombobox.Separator.Props) {\r\n return (\r\n \r\n );\r\n}\r\n\r\nfunction ComboboxChips({\r\n className,\r\n variant = \"default\",\r\n ...props\r\n}: BaseCombobox.Chips.Props & { variant?: \"default\" | \"elevated\" }) {\r\n const context = React.use(ComboboxContext);\r\n\r\n return (\r\n \r\n );\r\n}\r\n\r\nfunction ComboboxChip({ className, ...props }: BaseCombobox.Chip.Props) {\r\n return (\r\n \r\n );\r\n}\r\n\r\nfunction ComboboxChipRemove({\r\n className,\r\n ...props\r\n}: BaseCombobox.ChipRemove.Props) {\r\n return (\r\n \r\n );\r\n}\r\n\r\nfunction ComboboxPopup({\r\n className,\r\n children,\r\n side,\r\n align,\r\n sideOffset = 6,\r\n alignOffset,\r\n collisionBoundary,\r\n collisionPadding,\r\n sticky,\r\n positionMethod,\r\n backdrop = false,\r\n level,\r\n shadowLevel,\r\n ...props\r\n}: BaseCombobox.Popup.Props & {\r\n /** Which side of the anchor to align against. Defaults to Base UI's \"bottom\". */\r\n side?: BaseCombobox.Positioner.Props[\"side\"];\r\n /** Alignment of the popup relative to its anchor. Defaults to Base UI's \"center\". */\r\n align?: BaseCombobox.Positioner.Props[\"align\"];\r\n sideOffset?: BaseCombobox.Positioner.Props[\"sideOffset\"];\r\n alignOffset?: BaseCombobox.Positioner.Props[\"alignOffset\"];\r\n collisionBoundary?: BaseCombobox.Positioner.Props[\"collisionBoundary\"];\r\n collisionPadding?: BaseCombobox.Positioner.Props[\"collisionPadding\"];\r\n sticky?: BaseCombobox.Positioner.Props[\"sticky\"];\r\n positionMethod?: BaseCombobox.Positioner.Props[\"positionMethod\"];\r\n backdrop?: boolean;\r\n /** Surface elevation level for the popup bg (1-8). Defaults to 3. */\r\n level?: SurfaceLevel;\r\n /** Shadow weight (1-8). Defaults to 3. */\r\n shadowLevel?: SurfaceLevel;\r\n}) {\r\n const context = React.use(ComboboxContext);\r\n\r\n return (\r\n \r\n {backdrop && }\r\n {/*\r\n * Only anchor to the chips wrapper when chips are actually mounted.\r\n * Otherwise pass no anchor so Base UI uses its default: the InputGroup\r\n * (full field width) for a standard input, or the trigger for the\r\n * input-inside-popup pattern. Forcing an anchor here would pin the popup\r\n * to the narrower inner .\r\n */}\r\n \r\n \r\n {children}\r\n \r\n \r\n \r\n );\r\n}\r\n\r\nfunction ComboboxLabel({\r\n className,\r\n ...props\r\n}: React.ComponentProps) {\r\n const context = React.use(ComboboxContext);\r\n\r\n return