PxSchemaMultiSelect

A multi-select dropdown that reveals extra sub-fields for each selected option. Backed by a field.options[0].options list for the dropdown, and field.components for the sub-fields shown per selection (matched by key).

Usage

Demo

Select...

Selected: None

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

const field = {
  search: true,
  options: [
    {
      options: [
        { label: 'Urgent', value: 'urgent' },
        { label: 'Follow-up', value: 'follow_up' },
        { label: 'Reviewed', value: 'reviewed' },
      ],
    },
  ],
  components: [
    { key: 'urgent', label: 'Urgent', components: [{ type: 'static_text', label: 'Flag for immediate attention' }] },
    { key: 'follow_up', label: 'Follow-up', components: [{ key: 'follow_up_days', type: 'integer', label: 'Days', value: 7, placeholder: 'Days until follow-up' }] },
    { key: 'reviewed', label: 'Reviewed', components: [{ type: 'static_text', label: 'Marked as reviewed' }] },
  ],
}
const selected = ref([])
</script>

<template>
  <PxSchemaMultiSelect v-model="selected" :field="field" />
</template>

Props

Prop	Type	Default	Description
fieldrequired	object	—	Field definition. `field.options[0].options` supplies the dropdown options; `field.components` supplies the sub-fields shown per selected option, matched by key.
modelValue	unknown[]	[]	Array of selected option values. Use with v-model.

Emits

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