Rotating search input

One search field whose placeholder cycles through the fields it can actually match.

Preview

Interactive examples use the same @flux/ui build as production. Toggle theme in the header for light and dark. Motion tokens and layout patterns live under Motion and Patterns in the sidebar.

Live preview

Installation

Add the package to your app (full Next.js + Tailwind steps on Installation):

npm install @payglocal_ui/flux-ui

Usage

Import

import { RotatingSearchInput } from "@payglocal_ui/flux-ui";

Example

// A grid search usually spans half a dozen fields, and a static "Search"
// placeholder names none of them — so people guess at what is searchable and
// conclude the box is broken when the guess misses. Naming the fields in turn
// costs no space and answers it.
<RotatingSearchInput
  words={["Amount", "Transaction ID", "Email", "Customer name"]}
  onSearch={setQuery}
  ariaLabel="Search transactions"
  className="w-40 sm:w-56"
/>

// onSearch is debounced (300ms by default), so a search that hits the network
// fires once the user pauses rather than once per keystroke.
<RotatingSearchInput words={words} onSearch={runQuery} debounceDelay={500} />