nyuchimzizi
Mzizi — an open-architecture project of the Bundu Foundation, operated and developed by Nyuchi. Built on the Five African Minerals palette.
Built by Nyuchi Africav4.0.39
Text input with async suggestion dropdown, loading states, and keyboard navigation.
No interactive demo is registered for this component yet — the source is shown directly.
"use client"
import * as React from "react"
import { Loader2 } from "@/lib/icons"
import { cn } from "@/lib/utils"
interface AutocompleteProps extends Omit<React.ComponentProps<"input">, "value" | "onChange"> {
value: string
onChange: (value: string) => void
onSearch?: (query: string) => void | Promise<void>
suggestions?: string[]
loading?: boolean
}
function Autocomplete({
className,
value,
onChange,
onSearch,
suggestions = [],
loading = false,
placeholder,
...props
}: AutocompleteProps) {
const [open, setOpen] = React.useState(false)
const [activeIndex, setActiveIndex] = React.useState(-1)
const inputRef = React.useRef<HTMLInputElement>(null)
const listRef = React.useRef<HTMLUListElement>(null)
React.useEffect(() => {
if (value) {
onSearch?.(value)
setOpen(true)
} else {
setOpen(false)
}
setActiveIndex(-1)
}, [value, onSearch])
const handleSelect = React.useCallback(
(suggestion: string) => {
onChange(suggestion)
setOpen(false)
inputRef.current?.focus()
},
[onChange]
)
const handleKeyDown = React.useCallback(
(e: React.KeyboardEvent) => {
if (!open || suggestions.length === 0) return
if (e.key === "ArrowDown") {
e.preventDefault()
setActiveIndex((prev) => (prev + 1) % suggestions.length)
} else if (e.key === "ArrowUp") {
e.preventDefault()
setActiveIndex((prev) => (prev <= 0 ? suggestions.length - 1 : prev - 1))
} else if (e.key === "Enter" && activeIndex >= 0) {
e.preventDefault()
handleSelect(suggestions[activeIndex])
} else if (e.key === "Escape") {
setOpen(false)
}
},
[open, suggestions, activeIndex, handleSelect]
)
const showDropdown = open && (suggestions.length > 0 || loading)
return (
<div data-slot="autocomplete" data-portal="https://design.nyuchi.com/components/autocomplete" className={cn("relative", className)}>
<div className="relative">
<input
ref={inputRef}
type="text"
data-slot="autocomplete-input"
role="combobox"
aria-expanded={showDropdown}
aria-autocomplete="list"
aria-controls="autocomplete-list"
aria-activedescendant={
activeIndex >= 0 ? `autocomplete-option-${activeIndex}` : undefined
}
className={cn(
"h-12 w-full min-w-0 rounded-full border border-input bg-input/30 px-3 py-1 text-base transition-colors outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 md:text-sm"
)}
placeholder={placeholder}
value={value}
onChange={(e) => onChange(e.target.value)}
onKeyDown={handleKeyDown}
onFocus={() => value && suggestions.length > 0 && setOpen(true)}
onBlur={() => setTimeout(() => setOpen(false), 200)}
{...props}
/>
{loading && (
<Loader2 className="absolute top-1/2 right-3 size-4 -translate-y-1/2 animate-spin text-muted-foreground" />
)}
</div>
{showDropdown && (
<ul
ref={listRef}
id="autocomplete-list"
role="listbox"
className="absolute z-50 mt-1 max-h-60 w-full overflow-auto rounded-[var(--radius-xl,17px)] bg-popover p-1 text-sm shadow-lg ring-1 ring-foreground/10"
>
{suggestions.map((suggestion, index) => (
<li
key={suggestion}
id={`autocomplete-option-${index}`}
role="option"
aria-selected={index === activeIndex}
className={cn(
"cursor-pointer rounded-[var(--radius-md,12px)] px-3 py-2 transition-colors",
index === activeIndex
? "bg-muted text-foreground"
: "text-foreground hover:bg-muted/50"
)}
onMouseDown={() => handleSelect(suggestion)}
onMouseEnter={() => setActiveIndex(index)}
>
{suggestion}
</li>
))}
{loading && suggestions.length === 0 && (
<li className="px-3 py-2 text-muted-foreground">Searching...</li>
)}
</ul>
)}
</div>
)
}
export { Autocomplete, type AutocompleteProps }
The variants, sizes, and props surfaced by the registry. Each is sourced from the Supabase component_docs table.
Hit the registry API live and see the JSON the shadcn CLI consumes when it installs this component.
/api/v1/ui/autocompletenpx shadcn@latest add https://mzizi.dev/api/v1/ui/autocompletecomponents/ui/autocomplete.tsx