ReferenceInput

Chooses a related record by its foreign key.

Installation

pnpm dlx shadcn@latest add @chelone/reference-input

Chooses a related record by its foreign key.

Props

PropTypeDefaultDescription
childrenReactElement<unknown, string | JSXElementConstructor<any>>—The child input rendered against the reference choices context. Defaults to `<AutocompleteInput>`.
debounceMsnumber—Debounce delay (ms) for filter-driven choices refetches.
filterFilterPayload—Permanent filter merged OVER the dynamic filter for every choices fetch.
lookupKeystring—The field on the referenced record the value matches. `"id"` (default) resolves the selected record via `getMany`; any other key resolves it via `getList({ filter: { [lookupKey]: value } })`.
pagenumber—Choices page (1-based).
perPagenumber—Choices per page.
referencestring—The referenced resource choices are fetched from (e.g. `"companies"`).
sortSortPayload—Sort applied to the choices query.
sourcestring—The FK field on the current record (e.g. `"company_id"`).
validateundefined—`<ReferenceInput>` does not accept a validate prop — set `validate` on the child input instead (the child owns the form binding).