RemoteSelect

When to use

Use RemoteSelect when options come from an API and the dataset is too large to load at once, such as stores, customers, products, or employees. It debounces text search, loads additional pages on scroll, and resolves selected labels when an edit form opens.

Use Select for a fixed in-memory list, Combobox for searching a consumer-provided array, or CountrySelect for its built-in country and region data. RemoteSelect builds on Combobox but delegates filtering and pagination to the server.

Import

Props

Events

Example

Basic usage with debounced search and scroll pagination:

Edit-form label hydration when the value is not on the first page:

Multiple selection:

Usage guidelines

• The list virtualizes automatically once 100 candidates have accumulated — remote paging appends page by page, so this switches on after enough pages. Only visible options stay in the DOM, and row height is estimated at a fixed 32px without per-item measurement. The default single-line label is exactly 32px, so nothing changes for it. If renderOption draws multi-line rows or avatars, placement starts drifting somewhere past the tenth page — nothing throws, and the first pages never reproduce it. Pass virtualized={false} for that usage.
• `resolveValue` is required in edit forms. An existing value may be on a later page or excluded by the current query. Only resolveValue can obtain its label; without it, the field displays the raw ID. Keep it separate from fetcher: one batch-fetches rows by primary key, while the other searches pages by keyword.
• Forward `signal` from `fetcher` to fetch or Axios. The component discards stale responses by request sequence even without cancellation, but uncancelled requests still occupy connections during rapid typing.
• Render multiple-selection chips in `value` order. ComboboxChipRemove associates each chip with selectedValue[index]; reordering custom output can remove the wrong item. The built-in rendering already preserves value order.
• There is no second local filter because the underlying Combobox uses filter={null}. Results are entirely server-defined; if fetcher ignores query, typing does not search.
• Closing the popup ends the search session: the query is cleared and the first page loads again on the next open, matching remote el-select behavior. Keep fetcher free of side effects beyond idempotent caching for identical parameters.
• Pagination works without total by assuming a page with at least pageSize rows may have a successor. This can cause one final empty request, so return total when the API provides it.

Related

Combobox · Select · CountrySelect · Cascader · ProTable