Select

A dropdown selector component for selecting a value from a set of options.

?

Name	Category	Description	Type	Default
ghost	? Style	Ghost style with no border or shadow at rest	boolean	false
color	? Style	Select color, accepts preset theme colors or custom hex values	'primary' | 'success' | 'warning' | 'danger' | 'info' | string	—
size	? Size	Select size	'large' | 'small'	—
disabled	? State	Whether disabled	boolean	false
Optiondisabled	? State	Whether disabled	boolean	false
clearable	? Behavior	Whether clearable	boolean	false
filterable	? Behavior	Whether filterable	boolean	false
filter-method	? Behavior	Custom filter method	(query: string) => SelectOptionProps[]	—
remote	? Behavior	Whether to enable remote search	boolean	false
remote-method	? Behavior	Remote search method	(query: string) => Promise<SelectOptionProps[]>	—
id	? Behavior	Native id attribute for the input	string	—
model-value / v-model	? Content	Binding value	string | number	—
options	? Content	Options array, alternative to slot usage	SelectOptionProps[]	[]
placeholder	? Content	Placeholder	string	'Select'
render-label	? Content	Custom option label render function	(option: SelectOptionProps) => VNode | string	—
Optionvalue	? Content	Option value	string | number	—
Optionlabel	? Content	Option label	string	—
change	? Event	Triggered when selected value changes	(value: string | number) => void	—
visible-change	? Event	Triggered when dropdown shows/hides	(visible: boolean) => void	—
clear	? Event	Triggered when value is cleared	() => void	—
focus	? Event	Triggered when the select is focused	(event: FocusEvent) => void	—
blur	? Event	Triggered when the select is blurred	(event: FocusEvent) => void	—
focus	? Expose	Focus the select input	() => void	—
blur	? Expose	Blur the select input	() => void	—

Basic Usage

Basic usage of the select component with <px-option> slot children.

<template>
  <div class="demo-select">
    <px-select v-model="value" placeholder="请选择">
      <px-option label="选项一" value="1" />
      <px-option label="选项二" value="2" />
      <px-option label="选项三" value="3" />
      <px-option label="选项四" value="4" />
    </px-select>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const value = ref('');
</script>

<style scoped>
.demo-select {
  max-width: 300px;
}
</style>

Disabled Options

Use disabled property on individual options to disable certain choices.

<template>
  <div class="demo-select">
    <px-select v-model="value" placeholder="有禁用选项">
      <px-option label="选项一" value="1" />
      <px-option label="选项二（禁用）" value="2" disabled />
      <px-option label="选项三" value="3" />
    </px-select>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const value = ref('');
</script>

<style scoped>
.demo-select {
  max-width: 300px;
}
</style>

Disabled Select

Set disabled on the select component itself to disable the entire dropdown.

<template>
  <div class="demo-select">
    <px-select v-model="value" disabled placeholder="Disabled select">
      <px-option label="选项一" value="1" />
      <px-option label="选项二" value="2" />
      <px-option label="选项三" value="3" />
    </px-select>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const value = ref('1');
</script>

<style scoped>
.demo-select {
  max-width: 300px;
}
</style>

Clearable

Set clearable to allow the user to clear the selected value. Hover to reveal the clear icon.

<template>
  <div class="demo-select">
    <px-select v-model="value" clearable placeholder="Clearable select">
      <px-option label="选项一" value="1" />
      <px-option label="选项二" value="2" />
      <px-option label="选项三" value="3" />
    </px-select>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const value = ref('2');
</script>

<style scoped>
.demo-select {
  max-width: 300px;
}
</style>

Filterable

Set filterable to enable typing to filter options. Supports custom filter-method and remote-method for advanced use cases.

<template>
  <div class="demo-select">
    <px-select v-model="value" filterable placeholder="Type to search">
      <px-option label="Apple" value="apple" />
      <px-option label="Banana" value="banana" />
      <px-option label="Cherry" value="cherry" />
      <px-option label="Grape" value="grape" />
      <px-option label="Orange" value="orange" />
    </px-select>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const value = ref('');
</script>

<style scoped>
.demo-select {
  max-width: 300px;
}
</style>

Ghost Style

Set ghost for a borderless, transparent input that only shows its border on hover or focus — matching the PxInput ghost style.

<template>
  <div class="demo-select">
    <px-select v-model="value" ghost placeholder="Ghost select">
      <px-option label="选项一" value="1" />
      <px-option label="选项二" value="2" />
      <px-option label="选项三" value="3" />
    </px-select>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const value = ref('');
</script>

<style scoped>
.demo-select {
  max-width: 300px;
}
</style>

Select Colors

Use color with a preset theme name (primary, success, warning, danger, info) to color the input border, selected indicator, and highlighted item.

<template>
  <div class="demo-select">
    <px-select v-model="v1" color="primary" placeholder="Primary" :options="options" />
    <px-select v-model="v2" color="success" placeholder="Success" :options="options" />
    <px-select v-model="v3" color="warning" placeholder="Warning" :options="options" />
    <px-select v-model="v4" color="danger" placeholder="Danger" :options="options" />
    <px-select v-model="v5" color="info" placeholder="Info" :options="options" />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const options = [
  { value: '1', label: 'Option A' },
  { value: '2', label: 'Option B' },
  { value: '3', label: 'Option C' },
];

const v1 = ref('');
const v2 = ref('');
const v3 = ref('');
const v4 = ref('');
const v5 = ref('');
</script>

<style scoped>
.demo-select {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 300px;
}
</style>

Custom Colors

Pass any hex color string to color for fully custom theming. Works with both default and ghost styles.

<template>
  <div class="demo-select">
    <h4>Default</h4>
    <px-select v-model="v1" color="#626aef" placeholder="Indigo #626aef" :options="options" />
    <px-select v-model="v2" color="#ff6b9d" placeholder="Pink #ff6b9d" :options="options" />
    <px-select v-model="v3" color="#36cfc9" placeholder="Teal #36cfc9" :options="options" />

    <h4>Ghost</h4>
    <px-select v-model="v4" color="#626aef" ghost placeholder="Indigo ghost" :options="options" />
    <px-select v-model="v5" color="#ff6b9d" ghost placeholder="Pink ghost" :options="options" />
    <px-select v-model="v6" color="#36cfc9" ghost placeholder="Teal ghost" :options="options" />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const options = [
  { value: '1', label: 'Option A' },
  { value: '2', label: 'Option B' },
  { value: '3', label: 'Option C' },
];

const v1 = ref('');
const v2 = ref('');
const v3 = ref('');
const v4 = ref('');
const v5 = ref('');
const v6 = ref('');
</script>

<style scoped>
.demo-select {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 300px;
}
.demo-select h4 {
  margin: 8px 0 0;
}
</style>

Different Sizes

Use size to control the select height and menu item dimensions. Supports large and small.

<template>
  <div class="demo-select">
    <px-select v-model="v1" size="large" placeholder="Large">
      <px-option label="选项一" value="1" />
      <px-option label="选项二" value="2" />
      <px-option label="选项三" value="3" />
    </px-select>
    <px-select v-model="v2" placeholder="Default">
      <px-option label="选项一" value="1" />
      <px-option label="选项二" value="2" />
      <px-option label="选项三" value="3" />
    </px-select>
    <px-select v-model="v3" size="small" placeholder="Small">
      <px-option label="选项一" value="1" />
      <px-option label="选项二" value="2" />
      <px-option label="选项三" value="3" />
    </px-select>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const v1 = ref('');
const v2 = ref('');
const v3 = ref('');
</script>

<style scoped>
.demo-select {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 300px;
}
</style>