Components › Forms & input › Select › Entity picker

Entity picker

beta

Record reference field: removable record chips plus Add, built on the canonical RecordSelect (server search, recent, create from e-mail).

`apps/web/src/lib/anchored-panel.ts` is gone from origin/main — anchoring moved into the shared Popover (acrm 26de4b54b, AddRefMenu/RecipientInput/AssignPicker/deal-parts); the reference was dropped from this entry. Optional prop `recent` (27 Sep 2026, `RelationDialog`'s entity picker is the first consumer): on an empty/below-minimum query it offers recently opened records of the allowed `types` instead of the "type at least N characters" hint, sourced from `useRecentRecords` (`GET /search/recent` → `record_views`, written server-side when a record's detail loads — real opens, not search clicks). Rows reuse the exact `.acrm-recordselect-opt` markup and `add()` path as a search result; already-selected and locked records are filtered out client-side. Without the prop the picker behaves exactly as before. Debt: `EntityPicker` lives in `apps/web/src/components/EntityPicker.tsx`, not `packages/ui`, so it has no Ladle story — behaviour is covered by `relation-dialog.test` instead. Move it to `packages/ui` to get stories (AD 27 Sep 2026). 3 Oct 2026 (AD): deprecated → beta. The duplicate shell is gone (AddRefMenu removed, 4a9a934e0; ProductPicker on RecordSelect since 1 Oct); it is a composition over RecordSelect, not a second picker. Migrating its consumers would rebuild the same composition each time. Canon after: move into @acrm/ui with stories (Default · States · Composition) + baselines, usage/a11y rewritten. 3 Oct 2026: shell is DS.RecordRefField in @acrm/ui (acrm !4502); EntityPicker / ProductPicker are data wrappers around it, DOM 1:1. Focus returns to Přidat on close. Registry repaired 17 Oct 2026 (review F1): AddRefMenu.tsx is gone from main (file reference dropped). Registry repaired 17 Oct 2026 (review F2): removed classes with no CSS definition and no TSX use on main: .acrm-popover.eref-add-pop.

Used in 13 files · 11 areas · 14× — components/ProductPicker, components/calendar, components/deal, components/dialer, components/mail, components/meetings …

apps/web <EntityPicker> <RecordRefField>.eref-field .eref-add .add-ref .acrm-recordselect-search +4SourceLegacy card Inputs.html
ExamplesCodeUsageAccessibilityChangelog

Import

Not exported from @acrm/ui — <EntityPicker&gt;, &lt;RecordRefField> lives in the app (apps/web/src/components/EntityPicker.tsx). Reuse the CSS classes below, or move the component into the package first.

Props

EntityPicker

No props extracted (not in props.json).

RecordRefField packages/ui/src/components/RecordRefField.tsx

NameTypeDefaultDescription
labelstring—Nadpis pole (.acrm-field-label). Bez něj se kreslí jen tokeny a „Přidat“ bez obalu .acrm-field (ProductPicker vložený do řádku). Jméno listboxu nese panel.ariaLabel.
hideLabelbooleanfalseSkryje viditelný nadpis (řádek railu má svůj klíč vlevo); obal .acrm-field zůstává.
addLabelstring'Přidat'Text afordance (default „Přidat“).
childrenReactNode—Tokeny — typicky <EntityRef removable> / náhled záznamu.
canAddbooleantruefalse = limit dosažen, „Přidat“ se nekreslí.
open *boolean——
onOpenChange *(open: boolean) => void——
panel *Omit<RecordSelectProps, 'anchorRef' | 'value' | 'onClose'>—Panel = RecordSelect v režimu přidávání; kotvu, zavření a value drží pole.

CSS classes

.eref-field.eref-add.add-ref.acrm-recordselect-search.acrm-recordselect-list.acrm-recordselect-opt.acrm-recordselect-empty.mi-opt-ic

Files

Record selectEntity referenceProduct picker