Components
Combobox
macOS 26 Combo Box — an editable, searchable select. Text-field trigger + chevron, opening a frosted Command list.
The macOS 26 Combo Box: an Input-styled trigger with a trailing chevron that opens a frosted Popover holding a searchable Command list. Assembled from Input + Popover + Command, mirroring the kit's composite (Text Field + Menu Button). Unlike a plain Select, the list is filterable. Five control sizes via the shared Input geometry.
Installation
npx shadcn add https://acrylic-ui.vercel.app/r/combobox.jsonUsage
"use client"import * as React from "react"import { Combobox } from "@/registry/acrylic/combobox"const frameworks = [ { value: "next", label: "Next.js" }, { value: "remix", label: "Remix" }, { value: "astro", label: "Astro" }, { value: "vite", label: "Vite" }, { value: "nuxt", label: "Nuxt" },]export default function ComboboxDemo() { const [value, setValue] = React.useState("") return ( <div className="w-full max-w-[240px]"> <Combobox options={frameworks} value={value} onValueChange={setValue} placeholder="Select framework…" searchPlaceholder="Search framework…" /> </div> )}import { Combobox } from "@/components/acrylic/combobox"
const options = [
{ value: "next", label: "Next.js" },
{ value: "vite", label: "Vite" },
]
<Combobox options={options} value={value} onValueChange={setValue} />Sizes
mini · small · medium (default) · large · xl — the trigger reuses the
Input control sizes (heights 16/20/24/28/36).
mini
small
medium
large
xl
"use client"import * as React from "react"import { Combobox } from "@/registry/acrylic/combobox"const sizes = ["mini", "small", "medium", "large", "xl"] as constconst fruit = [ { value: "apple", label: "Apple" }, { value: "banana", label: "Banana" }, { value: "cherry", label: "Cherry" }, { value: "grape", label: "Grape" },]// The five macOS control sizes — the Combobox trigger reuses the Input geometry.export default function ComboboxShowcase() { const [value, setValue] = React.useState<Record<string, string>>({}) return ( <div className="flex flex-col gap-3"> {sizes.map((size) => ( <div key={size} className="flex items-center gap-3"> <span className="w-14 shrink-0 text-xs text-muted-foreground">{size}</span> <Combobox size={size} options={fruit} value={value[size]} onValueChange={(v) => setValue((s) => ({ ...s, [size]: v }))} placeholder="Fruit…" className="max-w-[220px]" /> </div> ))} </div> )}Notes
- Built on
@radix-ui/react-popover+cmdkfor accessible keyboard nav and filtering; the list surface is the acrylic Popover, the items the acrylic Command. - The trigger is styled with
inputVariantsso it matches the Input exactly. - Pass
sizeto scale the trigger;contentClassNameto style the dropdown.