PxAsyncSelect

A searchable select that emits a scrolling event when the user scrolls near the bottom of the dropdown, so you can load and append the next page yourself. It doesn't call any load-more function for you — hasMore and loading are display-only flags you control.

Usage

Demo

Scroll down to load more...

Selected: None
Total loaded: 3

<script setup>
import { ref } from 'vue'
import { PxAsyncSelect } from 'praxis-vue-ui'

const options = ref([/* initial page */])
const hasMore = ref(true)
const loading = ref(false)

// Called on the 'scrolling' event — you decide when/how to fetch more
const loadMore = async () => {
  if (!hasMore.value || loading.value) return
  loading.value = true
  const newItems = await api.getNextPage()
  options.value.push(...newItems)
  loading.value = false
}
</script>

<template>
  <PxAsyncSelect
    v-model="selected"
    :options="options"
    :has-more="hasMore"
    :loading="loading"
    placeholder="Search providers..."
    @scrolling="loadMore"
  />
</template>

Props

Prop	Type	Default	Description
modelValue	string | number | object | null	null	Currently selected value. Use with v-model.
options	unknown[]	[]	Current page of loaded options.
hasMore	boolean	false	Display-only flag — doesn't change behavior, use it to decide whether to fetch more on @scrolling.
loading	boolean	false	Shows a loading state while true.
placeholder	string	''	Placeholder text.
label	string	'name'	Property name read from each option for its display text.
reduce	(option) => unknown	undefined	Value extractor function.
disabled	boolean	false	Disables the select.
multiple	boolean	false	Allows selecting more than one option.
clearable	boolean	true	Shows a button to clear the current selection.

Emits

Event	Payload	Description
update:modelValue	unknown	Emitted on selection change.
scrolling	—	Emitted (debounced) when the user scrolls near the bottom of the dropdown — this is your cue to load the next page.
search	string	Emitted with the current search query as the user types.
open	—	Emitted when the dropdown opens.
select	unknown	Emitted with the selected item.