AvatarSelect

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

Usage

<script setup>
import { ref } from 'vue'
import { AvatarSelect } 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>
  <AvatarSelect
    v-model="selected"
    :options="users"
    label="Assign To"
    placeholder="Select a team member..."
  />
</template>

Props

Prop	Type	Default	Description
modelValue	unknown	null	Currently selected user. Use with v-model.
optionsrequired	object[]	—	Array of user objects. Must have a name property for avatar initials.
label	string	undefined	Field label.
placeholder	string	'Select...'	Dropdown placeholder.
disabled	boolean	false	Disables the select.
required	boolean	false	Marks as required.
reduce	(option) => unknown	option => option.id	Value extractor.

Emits

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