SearchInput

PreviousNext

Search field with clear control and optional debounce.

import { SearchInput } from "@/rl-ui";

<SearchInput value={q} onChange={setQ} placeholder="Search…" />

Examples

Sizes

import { SearchInput } from "@/rl-ui";

<>
<SearchInput size="medium" value="" onChange={setQ} placeholder="Medium" />
<SearchInput size="large" value="" onChange={setQ} placeholder="Large" />
</>

Filled & disabled

import { SearchInput } from "@/rl-ui";

<>
<SearchInput value="Acme" onChange={setQ} placeholder="Search…" />
<SearchInput value="" onChange={setQ} disabled placeholder="Disabled" />
</>

API

PropTypeDefaultDescription
valuestring—Controlled value (required).
onChange(value: string) => void—Fires on each keystroke.
size"medium" | "large""medium"Field height.
placeholderstring—Empty-state hint.
disabledbooleanfalsePrevents interaction.
debounceDelaynumber300Debounce for onDebouncedChange.
onDebouncedChange(value: string) => void—Debounced change handler.
onClear() => void—Clear button callback.