Skip to content

Search Field

The inset input with an orange Search… placeholder and the pixel magnifier at its end.

Installation

npx shadcn@latest add https://osrsui.com/r/search-field.json

Usage

import { SearchField } from "@/components/ui/search-field"
import { Shortcut } from "@/components/ui/shortcut"

<SearchField aria-label="Search the bank" value={query} onChange={(e) => setQuery(e.target.value)} />

{/* `end` replaces the magnifier: a shortcut hint, a clear button */}
<SearchField aria-label="Search the docs" end={<Shortcut keys={["⌘", "K"]} />} />

It takes every Input prop. Give it an aria-label when there’s no visible label.