form · Normal DOM + Twenty Remote DOM

RecordPicker

Inline picker — search input, alphabet bar, scrollable list of records.

Generic over the record type. Caller passes `getId` and `getName`; default avatar is the hashed-letter tile (same palette as EntityChip). The selection is controlled (`selectedId` + `onSelect`); the caller decides when to mount/unmount the picker.

Install

Pull from the workspace packages (already available if you ran pnpm add):

ts
import { RecordPicker } from '@8maverik8/twenty-design';

Examples

Product picker (16 items, alphabet filter)

All
A
C
D
I
N
O
T
Z
Advanced Export
Creomate · Bundle (WebAPI + SQL + Webhook) · 1024 SC
Creomate · Bundle (WebAPI + SQL + Webhook) · 128 SC
Creomate · Bundle (WebAPI + SQL + Webhook) · 16 SC
Creomate · Bundle (WebAPI + SQL + Webhook) · 192 SC
Creomate · Bundle (WebAPI + SQL + Webhook) · 24 SC
Creomate · Bundle (WebAPI + SQL + Webhook) · 256 SC
Creomate · Bundle (WebAPI + SQL + Webhook) · 32 SC
Creomate · Bundle (WebAPI + SQL + Webhook) · 48 SC
Diagnostic Suite
Integration Lab
Notion Sync
OAPPS 3CX for Zendesk · Professional
Telemetry Pipeline
Zendesk Bridge
tsx
<RecordPicker<Product>
  records={products}
  selectedId={selectedId}
  onSelect={(p) => setSelectedId(p.id)}
  getId={(p) => p.id}
  getName={(p) => p.name}
  searchPlaceholder="Search products..."
/>

Anatomy

SearchCase-insensitive substring match against the name. Clears the alphabet filter when active.
Alphabet barQuick first-letter filter. "All" resets. Hidden when there are no records.
ListOne row per record with avatar + name. Scrollable past `maxHeight` (default 240px).

Guidelines

✓
Place inside the body of a LineItemCard when picking a related record on a line.Inline picker keeps focus inside the same card — no popup chrome to fight.
✕
Use it for free-text inputs that happen to autocomplete.For autocomplete + create-new, use the Combobox primitive instead. RecordPicker is select-only.