GroupedMultiSelect

A multi-select dropdown with grouped options, checkboxes, color swatches, duration badges, and a "Select All" header. Built on top of vue-select with full custom rendering.

Basic Usage

Demo

Loading...

Selected IDs: []

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

const selected = ref([])
const options = [
  {
    id: 'design',
    name: 'Design',
    activities: [
      { id: 1, name: 'UI Design', color: '3b82f6', duration: 60 },
      { id: 2, name: 'Prototyping', color: '8b5cf6', duration: 45 },
    ]
  },
  // ...
]
</script>

<template>
  <GroupedMultiSelect
    v-model="selected"
    :options="options"
    placeholder="Select activities..."
  />
</template>

Pre-selected Values

Pre-selected

UI Design

Frontend Dev

Loading...

<GroupedMultiSelect
  v-model="selected"
  :options="options"
  placeholder="Select activities..."
/>

Without Duration & Color

Simplified

Loading...

<GroupedMultiSelect
  v-model="selected"
  :options="options"
  :show-duration="false"
  :show-color="false"
  :show-select-all="false"
/>

Props

Props

Prop	Type	Default	Description
modelValue	(string | number | object)[]	[]	Array of selected IDs. Use with v-model.
optionsrequired	GroupOption[]	—	Grouped options array. Each group has id/name and an activities or children array.
label	string	'label'	Property name to use as display label for options (e.g. 'name' or 'label').
reduce	(option) => unknown	option.id ?? option.value	Function to extract the value emitted from each selected option.
placeholder	string	''	Placeholder text shown when no items are selected.
disabled	boolean	false	Disables the entire select.
showSelectAll	boolean	true	Shows a 'Select All' header row with checkbox and count badge.
showDuration	boolean	true	Shows duration badges (in minutes) next to each child option.
showColor	boolean	true	Shows color dot swatches next to options with a color property.
useCombinedId	boolean	false	Uses groupId_childId as the unique key to prevent ID conflicts across groups.
selectClass	string	'vue-select-standard text-gray-400'	CSS class passed to the vue-select root element.

Emits

Emits

Event	Payload	Description
update:modelValue	unknown[]	Emitted when selection changes. Returns array of reduced values (IDs by default).

Option Interfaces

interface GroupOption {
  id?: string | number
  name: string
  label?: string
  color?: string
  activities?: ActivityOption[]   // or use children[]
  children?: ActivityOption[]
}

interface ActivityOption {
  id?: string | number
  name: string
  label?: string
  color?: string
  duration?: number               // shown as "X min" badge
}