PxAvatarSelect

A searchable select dropdown where each option displays a PxAvatar with the user's initials alongside their name. Ideal for user/member selection fields.

Usage

Demo

Select a team member...

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

const users = [
  { id: 1, name: 'Alice Johnson', email: 'alice@example.com' },
  { id: 2, name: 'Bob Smith', email: 'bob@example.com' },
]
const selected = ref(null)
</script>

<template>
  <PxAvatarSelect
    v-model="selected"
    :options="users"
    placeholder="Select a team member..."
  />
</template>

Props

Prop	Type	Default	Description
modelValue	unknown	null	Currently selected value(s). Use with v-model.
optionsrequired	T[]	—	Array of option objects.
label	string	'name'	Property name read from each option for its display text and avatar initials.
placeholder	string	''	Dropdown placeholder.
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.
selectClass	string	(preset Tailwind classes)	Custom classes for the select input.
reduce	(option: T) => unknown	option => option.id ?? option.value	Extracts the value stored in modelValue from a selected option.

Emits

Event	Payload	Description
update:modelValue	unknown	Emitted on selection change.