caliper uidocs
DemoSign inGet Pro

Search

Free

A search field with a clear button and the right keyboard on phones.

Installs components/ui/search.tsxDepends on @radix-ui/react-slot, lucide-reactMotion none in component source
pnpm dlx shadcn@latest add https://caliperui.site/r/search.json

Type to search.

When to use #

Use it for

  • Filtering a list or directory as people type.
  • Pair it with a visible result count.

Skip it when

  • Global search across the app; use a command palette.

Installation #

terminal
pnpm dlx shadcn@latest add https://caliperui.site/r/search.json

Adds its 4 files to components/ui/, each with its own stylesheet, and installs their packages. No account needed. The first part also adds Caliper UI’s tokens; import them once as in Installation.

Usage #

This is the code behind the preview above.

example.tsx
import { useState } from "react"
import { Search } from "@/components/ui/search"

export function DirectorySearch() {
  const [query, setQuery] = useState("");
  return (
    <div className="grid w-full max-w-xs gap-2">
      <Search value={query} onChange={(event) => setQuery(event.currentTarget.value)} onClear={() => setQuery("")} placeholder="Name or role" aria-label="Search the directory" />
      <p role="status" className="text-sm text-muted-foreground">{query ? `Searching for “${query}”.` : "Type to search."}</p>
    </div>
  );
}

API reference #

Accessibility #

It is built on native elements and keeps aria-hidden and aria-label in step with state.

No custom key handling; Tab and the native activation keys do the work.

Motion #

It declares no animation in its component source. Any transition comes from its stylesheet, which uses the duration tokens that collapse to instant under prefers-reduced-motion.