PxSelect

A robust, fully native, and highly customizable select/combobox component. Replaces external libraries while offering features like search, multi-select with chips, dynamic reducers, custom slots, and keyboard navigation.

Basic Usage

Single Select

Single Select

Select a fruit

Selected Value:

<script setup>
import { ref } from 'vue'

const selected = ref(null)
const options = [
  { id: 1, label: 'Apple' },
  { id: 2, label: 'Banana' },
  { id: 3, label: 'Cherry' }
]
</script>

<template>
  <PxSelect 
    v-model="selected" 
    :options="options" 
    placeholder="Select a fruit" 
  />
</template>

Multi Select & Search

Set multiple to true to enable chip-based multi-selection, and searchable to true to enable a search input within the dropdown.

Multi-Select & Search

Select fruits...

Selected Values:

[]

<PxSelect 
  v-model="selectedMultiple" 
  :options="options" 
  :multiple="true" 
  :searchable="true" 
  placeholder="Select fruits..." 
/>

API Reference

Prop	Type	Default	Description
modelValue	any	—	The value of the select
optionsrequired	any[]	() => []	Array of options to select from
label	string	—	The label text
error	string	—	An error message. Changes select to error state.
hint	string	—	Hint text to display below the select
placeholder	string	'Select...'	Placeholder text
disabled	boolean	false	Native disabled state
required	boolean	false	Mark field as required
optionLabel	string	'label'	Property to use as the label if options are objects
optionValue	string | TSParenthesizedType	—	Property to use as the value if options are objects. Can be a string key or a reduce function. If not provided, the whole object is returned.
multiple	boolean	false	Allow multiple selections
searchable	boolean	false	Enable search input
clearable	boolean	false	Allow clearing the selection
filterBy	TSFunctionType	—	Custom filter function