# Digitexa UI > Open-source, copy-paste React components for dense, warm desktop interfaces (Next.js, Tailwind CSS v4, Radix). Components are installed as source files with the `dx` CLI and styled only with semantic --dx-* tokens. ## combobox Searchable select on Popover and Command, single or multiple with badge chips. Install: `curl -fsSL https://ui.digitexa.com/dx.mjs | node --input-type=module - add combobox` Also adds: badge, command, input, popover, utils, theme npm: lucide-react@^1.61.0 ```tsx import { Combobox } from "@/components/ui/combobox"; ``` ### Example ```tsx import * as React from "react"; import { BugIcon, FolderIcon, PaletteIcon, RocketIcon, ShieldIcon, SparklesIcon, ZapIcon } from "lucide-react"; import { Avatar } from "@/components/ui/avatar"; import { Combobox, type ComboboxOption } from "@/components/ui/combobox"; import { Field, FieldControl, FieldLabel } from "@/components/ui/field"; const members = [ { name: "Ada Lovelace", role: "engineering" }, { name: "Grace Hopper", role: "engineering" }, { name: "Dieter Rams", role: "design" }, { name: "Margaret Hamilton", role: "engineering lead" }, { name: "Susan Kare", role: "design" }, ]; const memberOptions: ComboboxOption[] = members.map((m) => ({ value: m.name.toLowerCase().replace(/\s+/g, "-"), label: m.name, icon: , keywords: [m.role], })); const labelOptions: ComboboxOption[] = [ { value: "bug", label: "Bug", icon: }, { value: "feature", label: "Feature", icon: }, { value: "design", label: "Design", icon: , keywords: ["ui", "ux"] }, { value: "performance", label: "Performance", icon: , keywords: ["speed"] }, { value: "security", label: "Security", icon: }, { value: "release", label: "Release", icon: , keywords: ["ship", "deploy"] }, ]; const projectOptions: ComboboxOption[] = ["Storefront rebuild", "Mobile app v3", "Billing migration", "Design system"].map((p) => ({ value: p, label: p, icon: , })); export default function Demo() { const [owner, setOwner] = React.useState("grace-hopper"); const [labels, setLabels] = React.useState(["bug", "performance"]); return (

Owner Labels Move to project

); } ``` ### Source: ui/combobox.tsx ```tsx "use client"; import * as React from "react"; import { CheckIcon, ChevronsUpDownIcon } from "lucide-react"; import { Badge } from "@/components/ui/badge"; import { Command, CommandEmpty, CommandInput, CommandItem, CommandList } from "@/components/ui/command"; import { inputVariants } from "@/components/ui/input"; import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"; import { cn } from "@/lib/utils"; /* * Searchable select built on Popover + Command. * * * * * Extra props go to the trigger button, so it works inside . */ type ComboboxOption = { value: string; label: string; icon?: React.ReactNode; /** Extra words to match while searching. */ keywords?: string[]; disabled?: boolean; }; type ComboboxBaseProps = Omit, "value" | "defaultValue" | "onChange"> & { options: ComboboxOption[]; placeholder?: string; searchPlaceholder?: string; emptyText?: React.ReactNode; size?: "sm" | "md" | "lg"; /** Popover alignment against the trigger. */ align?: "start" | "center" | "end"; }; type ComboboxSingleProps = ComboboxBaseProps & { multiple?: false; value?: string; defaultValue?: string; onValueChange?: (value: string | undefined) => void; }; type ComboboxMultipleProps = ComboboxBaseProps & { multiple: true; value?: string[]; defaultValue?: string[]; onValueChange?: (value: string[]) => void; /** Chips shown in the trigger before collapsing into "+N". */ maxChips?: number; }; type ComboboxProps = ComboboxSingleProps | ComboboxMultipleProps; type LooseProps = ComboboxBaseProps & { multiple?: boolean; value?: string | string[]; defaultValue?: string | string[]; onValueChange?: (value: string | string[] | undefined) => void; maxChips?: number; }; function Combobox(comboboxProps: ComboboxProps) { const { options, multiple = false, value: valueProp, defaultValue, onValueChange, placeholder = multiple ? "Select options…" : "Select an option…", searchPlaceholder = "Search…", emptyText = "No results", size = "md", align = "start", maxChips = 2, className, disabled, ...props } = comboboxProps as LooseProps; const [open, setOpen] = React.useState(false); const [state, setState] = React.useState(defaultValue); const value = "value" in comboboxProps ? valueProp : state; const values = multiple ? ((value as string[] | undefined) ?? []) : value ? [value as string] : []; const chosen = values.map((v) => options.find((o) => o.value === v)).filter((o): o is ComboboxOption => !!o); function commit(next: string | string[] | undefined) { if (!("value" in comboboxProps)) setState(next); onValueChange?.(next); } function choose(option: ComboboxOption) { if (multiple) { commit(values.includes(option.value) ? values.filter((v) => v !== option.value) : [...values, option.value]); } else { commit(values[0] === option.value ? undefined : option.value); setOpen(false); } } const visible = chosen.slice(0, maxChips); const hidden = chosen.length - visible.length; return ( {emptyText} {options.map((option) => { const checked = values.includes(option.value); return ( choose(option)} className="h-(--dx-control-md) pr-1.5" > {option.icon} {option.label} {checked && (selected)} ); })} ); } export { Combobox, type ComboboxOption, type ComboboxProps, type ComboboxSingleProps, type ComboboxMultipleProps }; ```

Combobox

Installation

Usage

Combobox

Installation

Usage