Search input
Updated
SearchInput is a search field in the input group's ink frame, with a pixel magnifier. ⌘K (or Ctrl+K) anywhere on the page focuses it, shown as a key hint while it's empty, and a Clear button takes the hint's place once there's a query. Like the charts, it takes your theme's ink and paper, light or dark, and needs no Tailwind.
Example
⌘K
import "@/components/dithercharts/controls.css"
import { SearchInput } from "@/components/dithercharts/search-input"
<SearchInput label="Search charts" placeholder="Revenue, churn…" onValueChange={(query) => setQuery(query)} />
<SearchInput label="Filter series" shortcut={false} />Install
Controls install with DitherCharts Pro. See Installation to log in, then import controls.css once, e.g. in your root layout.
npx dithercharts add search-input
Props
It renders a native element, so every other attribute that element takes passes through.
| Prop | Type | Default | Description |
|---|---|---|---|
| labelrequired | Type ReactNode | Default – | The caption above the field, and its accessible name. |
| value | Type string | Default – | The query, for a controlled field; pair it with onValueChange. |
| defaultValue | Type string | Default "" | The query at first, for an uncontrolled field. |
| onValueChange | Type (value: string) => void | Default – | Called with the query as it's typed or cleared. |
| shortcut | Type boolean | Default true | ⌘K (or Ctrl+K) anywhere on the page focuses the field, shown as a key hint while it's empty. |
| hint | Type ReactNode | Default – | Help text under the field, read after its label. |
| error | Type ReactNode | Default – | An error under the field; it also marks the field invalid. |