Record picker

Link one or many related records from any collection — a contact to a company, a post to its author, an order to a customer, a task to a project. Async search (debounced, abortable, paged), recent picks, inline create, a browse dialog for big sets, chips or cards, and ids → labels resolution with a deleted-record state. The kit never knows your API: you pass a RecordSource.

Installation

Usage

import { Field, RecordPicker, type RecordSource } from "@vamos-ui/react";

const companies: RecordSource<Company> = {
  key: "companies",
  search: (q, { signal, cursor }) => api.companies.search({ q, cursor }, { signal }),
  getByIds: (ids, signal) => api.companies.byIds(ids, { signal }),
  getId: (c) => c.id,
  getLabel: (c) => c.name,
  getDescription: (c) => c.domain,
};

<Field label="Company">
  <RecordPicker source={companies} value={companyId} onValueChange={setCompanyId} />
</Field>

Search on the server should fold like the client: in Postgres, unaccent(lower(name)) with a Turkish collation, so “istanbul” finds “İstanbul” and “cagri” finds “Çağrı”.

Using TanStack Query? Wrap it in search: (q, { signal }) => queryClient.fetchQuery({ queryKey: ['companies', q], queryFn: () => api(q, { signal }) }).

clearRecordPickerCache(key?) drops the session caches (after a logout, in tests).

Examples

API