UI component
Autocomplete
Autocomplete helps people find the right record quickly with async search, optional pagination, and a controlled selected value.
Installation
Install the package in your app.
pnpm add @rapidset/rapidkitUsage
Import components from the package entrypoint.
import { Autocomplete } from '@rapidset/rapidkit';Examples
Preview the component and copy the snippet.
API Reference
Commonly used props at a glance.
| Prop | Description |
|---|---|
| name | Keeps the field identifiable in forms and change handlers. |
| value | Controls the selected item id from your page or form state. |
| searchOptions | Fetches matching items with query, page, and page size values. |
| onSelectOption | Receives the chosen item or null when the field is cleared. |
| getOptionById | Hydrates an existing value when you already know the selected id. |
| renderOption | Lets you add richer labels, icons, or metadata to each result row. |
Accessibility
The field follows combobox patterns, keeps label text connected to the input, and supports keyboard navigation through the result list.
Integration notes
This component stays API-agnostic. Keep your data fetching in your app layer and pass the async callbacks in as props.
Optional access rules
If your app supplies access rules, Autocomplete can stay hidden when the field should not be visible or visible-but-disabled when it should be read only.