Aurora Combobox

aurora-dinglebear-ai/aurora-combobox

UnverifiedComponent

Searchable selection control for large option sets like gateways, models, branches, and files.

Install it

npx shadcn@latest add https://raw.githubusercontent.com/dinglebear-ai/aurora/main/aurora-combobox.json

Source

registry/aurora/ui/combobox.tsxraw.githubusercontent.com/dinglebear-ai/aurora/main/aurora-combobox.json · first 6 KB

1"use client"
2 
3import * as React from "react"
4import { Check, ChevronsUpDown, Search } from "lucide-react"
5import { cn } from "@/lib/utils"
6import { Button } from "./button"
7import { Input } from "./input"
8import { Listbox } from "./listbox"
9import { isNavigationKey, nextEnabledIndex } from "@/registry/aurora/lib/widget-interactions"
10 
11export interface ComboboxOption {
12  value: string
13  label: string
14  description?: string
15}
16 
17export interface ComboboxProps {
18  options: ComboboxOption[]
19  value?: string
20  defaultValue?: string
21  onValueChange?: (value: string) => void
22  /** Trigger label shown when nothing is selected. */
23  placeholder?: string
24  /** Placeholder for the in-dropdown search field. */
25  searchPlaceholder?: string
26  emptyMessage?: string
27  /** Render the dropdown open on first paint (uncontrolled). */
28  defaultOpen?: boolean
29  className?: string
30}
31 
32function Combobox({ options, value, defaultValue, onValueChange, placeholder = "Search...", searchPlaceholder = "Search...", emptyMessage = "No results found.", defaultOpen = false, className }: ComboboxProps) {
33  const controlled = value !== undefined
34  const [internalValue, setInternalValue] = React.useState(defaultValue ?? "")
35  const [query, setQuery] = React.useState("")
36  const [open, setOpen] = React.useState(defaultOpen)
37  const [activeIndex, setActiveIndex] = React.useState(-1)
38  const current = controlled ? value : internalValue
39  const selected = options.find((option) => option.value === current)
40  const filtered = options.filter((option) => `${option.label} ${option.description ?? ""}`.toLowerCase().includes(query.toLowerCase()))
41  const containerRef = React.useRef<HTMLDivElement>(null)
42  const triggerRef = React.useRef<HTMLButtonElement>(null)
43  const inputRef = React.useRef<HTMLInputElement>(null)
44  const listboxId = React.useId()
45 
46  const close = React.useCallback((restoreFocus = false) => {
47    // Move focus before unmounting the popup. Deferring this until the next
48    // animation frame lets the focused input disappear first, which briefly
49    // drops focus to <body> and breaks the combobox focus-return contract.
50    if (restoreFocus) triggerRef.current?.focus()
51    setOpen(false)
52    setQuery("")
53    setActiveIndex(-1)
54  }, [])
55 
56  const openAt = React.useCallback((edge: "first" | "last" = "first") => {
57    setOpen(true)
58    const index = edge === "first" ? 0 : Math.max(0, filtered.length - 1)
59    setActiveIndex(filtered.length > 0 ? index : -1)
60// … truncated

What it pulls in

npm packages

lucide-react@^0.487.0

Other registry items

@aurora/aurora-tokens
@aurora/aurora-button
@aurora/aurora-input
@aurora/aurora-listbox

Files it writes

registry/aurora/ui/combobox.tsx
registry/aurora/lib/widget-interactions.ts

More from aurora

All 176 items

Same registry, same kind — the ones you would have found next
Component	Registry	Kind	Access	Installs
Aurora Accordionaurora-accordion	aurora	Components	Unverified	2 deps
Aurora Alert Dialogaurora-alert-dialog	aurora	Components	Unverified	2 deps
Aurora Aspect Ratioaurora-aspect-ratio	aurora	Components	Unverified	no deps
Aurora Avataraurora-avatar	aurora	Components	Unverified	1 dep
Aurora Badgeaurora-badge	aurora	Components	Unverified	2 deps
Aurora Banneraurora-banner	aurora	Components	Unverified	1 dep
Aurora Breadcrumbaurora-breadcrumb	aurora	Components	Unverified	2 deps
Aurora Buttonaurora-button	aurora	Components	Unverified	2 deps