GroupSelect

A select dropdown that renders grouped options with clear section headers. Built on vue-select with custom group rendering.

Usage

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

const groups = [
  { name: 'Physicians', children: [{ id: 1, name: 'Dr. Alice' }, { id: 2, name: 'Dr. Bob' }] },
  { name: 'Nurses', children: [{ id: 3, name: 'Carol RN' }, { id: 4, name: 'David RN' }] },
]
const selected = ref(null)
</script>

<template>
  <GroupSelect
    v-model="selected"
    :options="groups"
    label="Provider"
    placeholder="Select a provider..."
  />
</template>

Props

Prop	Type	Default	Description
modelValue	unknown	null	Selected value. Use with v-model.
optionsrequired	GroupOption[]	—	Grouped options. Each group has a name and children array.
label	string	undefined	Field label text.
placeholder	string	''	Dropdown placeholder.
disabled	boolean	false	Disables the select.
reduce	(option) => unknown	option => option.id	Value extractor function.

Emits

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