KQ-602 · RECIPIENT/PICK

Recipient Pick

Recent payees drawn as faces. Picking one grows its row item into a chip carrying the full name and handle beside the same disc — a layout animation on glide — while the others shrink and recede on a tween. Typing filters the row and the survivors travel to their new slots through the same FLIP; the row is a listbox where arrows step, Home and End jump, Enter chooses and Escape returns to the field.

KQ-602 · RECIPIENT/PICK

Send to

6 of 6 recents

No payee · 6 shown

Install

One command — the source lands in your repo. Or copy it from the Code tab.

$ pnpm dlx shadcn@latest add @kinetiq/recipient-pick

Props

people: Recipient[]; default —; The recent payees: id, name, handle and tint. Pass a theme token as the tint so both themes read.
value / defaultValue: string | null; default null; Controlled or initial payee id; null is the unpicked row.
onValueChange: (id: string | null) => void; default —; Fires from the press or key that chose or cleared.
query / defaultQuery: string; default ""; Controlled or initial filter text.
onQueryChange: (query: string) => void; default —; Fires from the field's input event.
max: number; default 6; Faces drawn before the row stops; the count line says how many matched.
label: string; default "Send to"; Visible field label and the row's group name.
placeholder: string; default "Name or handle"; Field placeholder.

Prop	Type	Default	Description
people	Recipient[]	—	The recent payees: id, name, handle and tint. Pass a theme token as the tint so both themes read.
value / defaultValue	string \| null	null	Controlled or initial payee id; null is the unpicked row.
onValueChange	(id: string \| null) => void	—	Fires from the press or key that chose or cleared.
query / defaultQuery	string	""	Controlled or initial filter text.
onQueryChange	(query: string) => void	—	Fires from the field's input event.
max	number	6	Faces drawn before the row stops; the count line says how many matched.
label	string	"Send to"	Visible field label and the row's group name.
placeholder	string	"Name or handle"	Field placeholder.