PxVisualSelect

A unified select component that displays visual elements like user icons or color swatches next to options. Useful for assigning teams or color labels.

Visual Variants (Group & Color)

Select Team (variant="group")

Choose a team

Selected value:

Select Color (variant="color")

Choose a color

Selected value:

<script setup lang="ts">
import { ref } from 'vue'
import { PxVisualSelect } from 'praxis-vue-ui'

const selectedGroup = ref(null)
const selectedColor = ref(null)

const groupOptions = [
  { value: 'frontend', name: 'Frontend Team' },
  { value: 'backend', name: 'Backend Team' },
  { value: 'design', name: 'Design Team' },
]

const colorOptions = [
  { id: 1, name: 'Red', color: '#ef4444' },
  { id: 2, name: 'Blue', color: '#3b82f6' },
  { id: 3, name: 'Green', color: '#22c55e' },
]
</script>

<template>
  <div class="flex gap-4">
    <!-- Group variant -->
    <PxVisualSelect
      v-model="selectedGroup"
      :options="groupOptions"
      variant="group"
      label="name"
      placeholder="Choose a team"
    />

    <!-- Color swatch variant -->
    <PxVisualSelect
      v-model="selectedColor"
      :options="colorOptions"
      variant="color"
      label="name"
      placeholder="Choose a color"
    />
  </div>
</template>

Visual Variants

Use the variant prop to change the visual presentation of the options:

• group: Displays a "Users" icon. (Default)
• color: Displays a color swatch (requires each option object to have a color property with a valid hexadecimal or CSS color name).

API Reference

Prop	Type	Default	Description
modelValue	string | number | Record | null | TSParenthesizedType[]	null	—
optionsrequired	VisualOption[]	—	—
variant	"color" | "group"	"group"	—
label	string	"label"	—
reduce	TSFunctionType	(option: any) => option?.id || option?.value || option	—
placeholder	string	""	—
selectClass	string	"vue-select-standard text-gray-400"	—
disabled	boolean	false	—
multiple	boolean	false	—
clearable	boolean	true	—
inputId	string	"px-visual-select"	—
dataTestid	string	"px-visual-select"	—