Record Picker

Install

pnpm exec vegastack-design verify record-picker

pnpm dlx shadcn@4.21.0 add @vegastack/record-picker

Usage

import { RecordPicker } from "@/components/ui/record-picker";

<PopoverContent size="lg" className="p-0">
  <RecordPicker
    kinds={[
      { id: "page", noun: "Pages", icon: <FileText /> },
      { id: "table", noun: "Tables", icon: <Table2 /> },
    ]}
    search={(q, { kind, cursor, signal }) =>
      api.search({ q, kind, cursor }, { signal })
    }
    recents={recent}
    onPick={(item) => link(item)}
  />
</PopoverContent>;

Scope

One way to pick records, whatever their kind: a relation field, a block's source, a "Link to…" dialog. The picker knows no kinds — the app passes them with their nouns and icons, and its own search loader (debounced, abortable and paged through useAsyncSearch). People have PeoplePicker; a place to move something has DestinationPicker.

Anatomy

Examples

In a popover

Type to search; the kind filter narrows it ("All" by default); recents show while the box is empty; results group by kind. A record with a disabledReason shows why and can't be picked.

In a dialog, picking several

RecordPickerDialog with multiple: the dialog starts from value (the records picked before), rows toggle with a check, and Done reports the whole set through onConfirm (onValueChange follows each toggle). value holds records, not keys, so an earlier pick survives a search that no longer shows it. While a new search is on its way, Enter can't pick a row from the last one.

API Reference

RecordPickerDialog

Accessibility

• The search box drives a grouped listbox; a refused row is aria-disabled and reads its reason.
• Loading, errors and "Load more" sit outside the listbox, in a status row.

Do / Don't