SelectListField

A single-select or multi-select field backed by a searchable dropdown. Wraps vue-select with Praxis styling and an optional required label.

Usage

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

const options = ['Option A', 'Option B', 'Option C']
const selected = ref(null)
</script>

<template>
  <SelectListField
    v-model="selected"
    :options="options"
    label="Category"
    :required="true"
  />
</template>

Props

Prop	Type	Default	Description
modelValue	unknown	null	Currently selected value. Use with v-model.
optionsrequired	unknown[]	—	Array of options to display in the dropdown.
label	string	'name'	Property name to use as display label for object options.
placeholder	string	''	Placeholder text shown when no option is selected.
required	boolean	false	Shows required asterisk on the label.
disabled	boolean	false	Disables the dropdown.
multiple	boolean	false	Enables multi-select mode.
reduce	(option) => unknown	undefined	Function to extract the emitted value from a selected option object.

Emits

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