Inputs / Search Input

Search Input

<SearchInput />Stable

The canonical search input. Leading magnifier, conditional trailing clear button, focus return on clear, native browser chrome suppressed. Pair with SearchInputPopover when results should surface in a dropdown rather than render inline on the page.

import { SearchInput, SearchInputPopover } from "@/components/upnext";

Playground

Edit any prop in the inspector — preview and code update together. Hover any color for hex + token.

Preview

Code

import { SearchInput } from "@/components/upnext";


<SearchInput />

Variants

import { SearchInput } from "@/components/upnext";


<SearchInput
  className="w-80"
  placeholder="Search recruits"
  aria-label="Search recruits"
/>


// Just the input. Type to see the clear button slide in on the right.
// The component is uncontrolled here — typing updates its internal state,
// and the clear button resets it.

Source

The wrapper is a thin re-export; the actual styling lives in the shadcn primitive.