{
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
"name": "combobox",
"title": "Combobox",
"description": "Searchable select with single or multiple choice, chips and groups; built on Base UI.",
"dependencies": [
"@base-ui/react",
"lucide-react"
],
"registryDependencies": [
"@ikas/button",
"@ikas/input-group",
"@ikas/utils"
],
"files": [
{
"path": "registry/ui/combobox.tsx",
"content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Combobox as ComboboxPrimitive } from \"@base-ui/react\"\nimport { CheckIcon, ChevronDownIcon, XIcon } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput } from \"@/components/ui/input-group\"\n\n/** Searchable select on Base UI: pass `items`, render them with ComboboxList. `multiple` turns on chips. */\nconst Combobox = ComboboxPrimitive.Root\n\nfunction ComboboxValue({ ...props }: ComboboxPrimitive.Value.Props) {\n return \n}\n\nfunction ComboboxTrigger({ className, children, ...props }: ComboboxPrimitive.Trigger.Props) {\n return (\n \n {children}\n \n \n )\n}\n\nfunction ComboboxClear({ className, ...props }: ComboboxPrimitive.Clear.Props) {\n return (\n }\n className={cn(className)}\n {...props}\n >\n \n \n )\n}\n\ntype ComboboxInputProps = ComboboxPrimitive.Input.Props & {\n /** Chevron button that opens the list. */\n showTrigger?: boolean\n /** Clear button, shown while a value is selected. */\n showClear?: boolean\n}\n\n/** Text field that filters the list; looks like Input. */\nfunction ComboboxInput({\n className,\n children,\n disabled = false,\n showTrigger = true,\n showClear = false,\n ...props\n}: ComboboxInputProps) {\n return (\n \n } {...props} />\n \n {showTrigger && (\n \n \n \n )}\n {showClear && }\n \n {children}\n \n )\n}\n\nfunction ComboboxContent({\n className,\n side = \"bottom\",\n sideOffset = 6,\n align = \"start\",\n alignOffset = 0,\n anchor,\n ...props\n}: ComboboxPrimitive.Popup.Props &\n Pick) {\n return (\n \n \n \n \n \n )\n}\n\nfunction ComboboxList({ className, ...props }: ComboboxPrimitive.List.Props) {\n return (\n \n )\n}\n\nfunction ComboboxItem({ className, children, ...props }: ComboboxPrimitive.Item.Props) {\n return (\n \n {children}\n }\n >\n \n \n \n )\n}\n\nfunction ComboboxGroup({ className, ...props }: ComboboxPrimitive.Group.Props) {\n return \n}\n\nfunction ComboboxLabel({ className, ...props }: ComboboxPrimitive.GroupLabel.Props) {\n return (\n \n )\n}\n\nfunction ComboboxCollection({ ...props }: ComboboxPrimitive.Collection.Props) {\n return \n}\n\nfunction ComboboxEmpty({ className, ...props }: ComboboxPrimitive.Empty.Props) {\n return (\n \n )\n}\n\nfunction ComboboxSeparator({ className, ...props }: ComboboxPrimitive.Separator.Props) {\n return (\n \n )\n}\n\n/** Field that holds the chips of a multiple combobox; pass its ref to ComboboxContent `anchor`. */\nfunction ComboboxChips({\n className,\n ...props\n}: React.ComponentPropsWithRef & ComboboxPrimitive.Chips.Props) {\n return (\n \n )\n}\n\ntype ComboboxChipProps = ComboboxPrimitive.Chip.Props & {\n /** Small x button that removes the chip. */\n showRemove?: boolean\n}\n\nfunction ComboboxChip({ className, children, showRemove = true, ...props }: ComboboxChipProps) {\n return (\n \n {children}\n {showRemove && (\n }\n className=\"size-5 rounded-sm text-muted-foreground hover:text-foreground\"\n data-slot=\"combobox-chip-remove\"\n >\n \n \n )}\n \n )\n}\n\nfunction ComboboxChipsInput({ className, ...props }: ComboboxPrimitive.Input.Props) {\n return (\n \n )\n}\n\n/** Ref for ComboboxChips, passed to ComboboxContent `anchor` so the list matches the field. */\nfunction useComboboxAnchor() {\n return React.useRef(null)\n}\n\nexport {\n Combobox,\n ComboboxChip,\n ComboboxChips,\n ComboboxChipsInput,\n ComboboxClear,\n ComboboxCollection,\n ComboboxContent,\n ComboboxEmpty,\n ComboboxGroup,\n ComboboxInput,\n ComboboxItem,\n ComboboxLabel,\n ComboboxList,\n ComboboxSeparator,\n ComboboxTrigger,\n ComboboxValue,\n useComboboxAnchor,\n type ComboboxChipProps,\n type ComboboxInputProps,\n}\n",
"type": "registry:ui"
}
],
"docs": "https://builders.ikas.com/tr/docs/app-development/ui-kit/components/combobox",
"categories": [
"primitives",
"forms"
],
"type": "registry:ui"
}