UI component
Search
Search is a compact text field with a leading icon and a string-based change callback for toolbars, headers, and inline filtering.
Installation
Install the package in your app.
pnpm add @rapidset/rapidkitUsage
Import components from the package entrypoint.
import { Search } from '@rapidset/rapidkit';Examples
Preview the component and copy the snippet.
API Reference
Commonly used props at a glance.
| Prop | Description |
|---|---|
| placeholder | Sets the hint text users see before they type. |
| value | Controls the current search text when parent state owns the input. |
| onChange | Receives the next string value directly, without native event plumbing. |
| onKeyDown | Hooks into key handling when the surrounding screen needs shortcuts or command behavior. |
| ariaLabel | Adds a clearer accessible name when the placeholder alone is not enough. |
Accessibility
Search uses a native input, keeps the icon decorative, and supports a custom accessible label when the default placeholder is not descriptive enough.
Integration notes
The component returns a plain string on change so you can connect it quickly to client-side filters or debounced server queries.