FormMultiSelectList

A compact multi-select component that combines a select dropdown with a tag/badge display of selected items. Styled for use inside form layouts.

Usage

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

const tags = [
  { id: 1, name: 'Urgent' },
  { id: 2, name: 'Follow-up' },
  { id: 3, name: 'Reviewed' },
]
const selected = ref([])
</script>

<template>
  <FormMultiSelectList
    v-model="selected"
    :options="tags"
    label="Tags"
  />
</template>

Props

Prop	Type	Default	Description
modelValue	unknown[]	[]	Array of selected values. Use with v-model.
optionsrequired	unknown[]	—	Available options for the dropdown.
label	string	undefined	Label displayed above the select.
placeholder	string	'Select...'	Placeholder for the dropdown.
disabled	boolean	false	Disables the component.

Emits

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