RecordPicker

Measured live on app.attio.com's Tasks page ("Edit task" → "Add record"): a "Search..." row, then a FLAT list mixed across every object type (a person result sat first, ahead of several companies, with no section headers — unlike the mention picker's own grouped Users/Records shape, crisp#646). Attio's own live search took a moment to resolve, showing a centred spinner

• "Loading..." row meanwhile (loading). TaskEditPopover composes this behind its own "Add record" chip.

Installation

npm install @crisp-ui-kit/crisp

Props

Notes

• Person rows. Pass avatar: { name, src? } on a record for a round initials or photo tile in place of icon, the way AssigneePicker draws a person. Add secondary for the muted line after the name (an email or a position), and selected to show a check on a record that is already linked.

• Long names (0.69.0). The name keeps its width, capped at 60% of the row so a very long name still ends in an ellipsis, and the muted secondary text takes the remaining width and truncates first (crisp#1325), as Attio and Linear do.

• Create footer. Pass createLabel (for example "Create employee") and onCreate to add Attio's trailing create row under a 1px separator. The footer is one more keyboard step after the last record. crisp does not generate the noun, so write the whole phrase yourself.

• RecordPickerRecord.icon is consumer-supplied, per-record — crisp has no built-in object-type-to-icon mapping (the same reasoning TaskList's own record/meta slots use).

• emptyLabel's default ("No records") is inferred by symmetry with AssigneePicker's own measured "No users" — Attio's own empty-results case for this specific picker wasn't independently re-measured, so treat the exact copy as a placeholder to override if it matters.