SelectableList

A dual-pane list component combining a searchable select/dropdown on top with a table of selected items below. Supports infinite scroll, avatar display, color pickers per item, and additional custom fields.

Basic Usage

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

const options = [
  { id: 1, name: 'Alice Johnson' },
  { id: 2, name: 'Bob Smith' },
  { id: 3, name: 'Carol Williams' },
]
const selected = ref([])
</script>

<template>
  <SelectableList
    title="Team Members"
    :options="options"
    :selected-items="selected"
    @update:selected-items="selected = $event"
  />
</template>

Props

Props

Prop	Type	Default	Description
optionsrequired	SelectableItem[]	—	Available items to select from.
selectedItemsrequired	SelectableItem[]	—	Currently selected items. Display in the table below the select.
titlerequired	string	—	Label shown above the select input.
isRequired	boolean	false	Marks the field as required.
placeholder	string	'Choose item'	Select input placeholder text.
labelField	string	'name'	Object property to use as display label.
valueField	string	'id'	Object property to use as unique key.
showColorPicker	boolean	false	Shows a color picker column in the selected items table.
columns	string[]	['Color', 'Name', 'Actions']	Column headers for the selected items table.
additionalFields	AdditionalField[]	[]	Extra editable fields per selected item (text, select, or input type).
disabled	boolean	false	Disables the select input.
showButtonDelete	boolean	true	Shows the delete button per row in the selected items table.
isInfinity	boolean	false	Enables infinite scroll mode on the select dropdown.
hasMore	boolean	false	Indicates more items available to load (used with isInfinity).
loadingScroll	boolean	false	Shows a spinner at the bottom of the dropdown when loading more.
loadMoreScroll	() => Promise<void>	undefined	Async function called when the user scrolls to the bottom of the dropdown.
searchFunction	(query: string) => void	undefined	Custom search handler. Called on input change instead of local filtering.
showAvatar	boolean	false	Shows a BaseAvatar in each option row.

Emits

Emits

Event	Payload	Description
update:selectedItems	SelectableItem[]	Emitted when an item is added or removed from the selected list.
update:options	SelectableItem[]	Emitted when the options list is modified (e.g. infinite scroll).