Lookup
A form field for picking one record from a long list, like a product or an account, through a searchable table in a wide Modal.
Master
Click the field or the lookup button: search, page through the table and click a row to pick it. The × clears the pick.
Usage
Use Lookup when the choice is a record from a list too long or too detailed for a Select: products, accounts, contracts, users. It is one component: pass label, the table's columns and rows, and value with onChange. The field shows the picked record's name, a × to clear it and a lookup button at the end; clicking the field or the button opens a Modal (xl) titled Lookup: label, with a folder icon, a search box with a Search button, the kit Table and Pagination under it. Clicking a row, or its name, picks it and closes the Modal; the × on the Modal closes it without a change. Search looks through every text value of each row. See contracts/lookup.json for the full contract. A label set at the start goes back on top of the field when the box around it is narrower than 554px, since a 234px label column would leave too little of the field to type in. multiple turns the same dialog into a picker for many records: rows get checkboxes, clicking a row ticks it, ticks stay while people search and page, and the footer's strong brand Button hands them all to onConfirm. With trigger button a kit Button opens it instead of a field, for adding a batch of records to a list or grid.
Do's
- Picking one record from a long list that people need to search and compare: products, accounts, contracts.
- The choice needs more than a name to tell records apart, like an ID, type, level or status.
- Adding several records at once to a list or grid, like a batch of products: multiple with trigger button.
Don'ts
- Do not use it for a short list of plain options. Use Select.
- Do not use it for a path through nested levels. Use Cascader.
- Do not build a local lookup dialog, table picker or search field with a button. Use Lookup.
- Do not use raw hex.
- Do not build a Modal with a selectable Table, or a Drawer of checkboxes, to pick many records. Use Lookup with multiple.
<Lookup
label="Product"
columns={productColumns}
rows={products}
onChange={setProductId}
required
trigger="field"
/>