"use client"; import * as React from "react"; import { cn } from "@kineticui/core"; import { SearchIcon, XIcon } from "@kineticui/icons"; export type SearchInputProps = Omit, "type" | "onChange"> & { value?: string; onValueChange?: (value: string) => void; /** Press this key anywhere on the page to focus the field. Default "/". Set null to disable. */ shortcut?: string | null; /** Rounded pill style. */ pill?: boolean; /** Text on the right, e.g. "12 results". */ meta?: React.ReactNode; }; /** Search field with clear button, focus shortcut and an optional result count. */ export const SearchInput = React.forwardRef( ({ value, onValueChange, shortcut = "/", pill, meta, className, placeholder = "Search…", ...props }, ref) => { const [internal, setInternal] = React.useState(""); const current = value ?? internal; const inner = React.useRef(null); React.useImperativeHandle(ref, () => inner.current!); React.useEffect(() => { if (!shortcut) return; const onKey = (e: KeyboardEvent) => { const t = e.target as HTMLElement; if (e.key === shortcut && !/input|textarea|select/i.test(t.tagName) && !t.isContentEditable) { e.preventDefault(); inner.current?.focus(); } }; window.addEventListener("keydown", onKey); return () => window.removeEventListener("keydown", onKey); }, [shortcut]); const set = (v: string) => { if (value === undefined) setInternal(v); onValueChange?.(v); }; return ( set(e.target.value)} onKeyDown={(e) => { if (e.key === "Escape" && current) { e.preventDefault(); set(""); } }} className="h-full min-w-0 flex-1 bg-transparent text-sm text-foreground outline-none placeholder:text-subtle [&::-webkit-search-cancel-button]:hidden" {...props} /> {meta ? {meta} : null} {current ? ( ) : shortcut ? ( {shortcut} ) : null} ); }, ); SearchInput.displayName = "SearchInput";

Search Input

Installation

Exports