Search fieldforms

Search input with icon, clear button, IME-safe Enter submit, optional debounced value changes and a keyboard shortcut hint.

설치

pnpm

pnpm dlx shadcn@4.23.0 add @uikit/search-field

의존 아이템input-group kbd locale style

Debounced

Query: empty

search-field-debounced.tsx

"use client";
import * as React from "react";import { SearchField } from "@/components/ui/search-field";
export default function SearchFieldDebounced() {  const [query, setQuery] = React.useState("");  return (    <div className="flex w-80 flex-col gap-2">      <SearchField aria-label="Filter rooms" debounceMs={300} onValueChange={setQuery} />      <p className="text-sm text-muted-foreground">Query: {query || "empty"}</p>    </div>  );}