Select

Dropdown selector with keyboard navigation. The panel opens with ease-out animation, options support hover highlight and arrow key navigation.

Basic Usage

Value: null

<script setup>
import { ref } from 'vue'
const value = ref(null)
const options = [
  { label: 'Apple', value: 'apple' },
  { label: 'Banana', value: 'banana' }
]
</script>

<template>
  <ASelect v-model="value" :options="options" placeholder="Choose a fruit" />
</template>

Clearable

Set clearable to show a clear button when a value is selected.

<ASelect v-model="value" :options="options" clearable />

Disabled Item & Disabled Select

<ASelect :options="options" disabled placeholder="Not selectable" />

Size

<ASelect v-model="value" :options="options" size="sm" />
<ASelect v-model="value" :options="options" size="md" />
<ASelect v-model="value" :options="options" size="lg" />

API

Props

Name	Type	Default	Description
modelValue	string | number | null	null	Currently selected value
options	SelectOption[]	[]	Options array
placeholder	string	'请选择'	Placeholder when nothing selected
disabled	boolean	false	Disable entire select
clearable	boolean	false	Show clear button
size	'sm' | 'md' | 'lg'	'md'	Size

SelectOption

interface SelectOption {
  label: string
  value: string | number
  disabled?: boolean
}

Emits

Name	Parameters	Description
update:modelValue	value	Selected value changed
change	(value, option)	Selection changed, returns full option object

Keyboard Interaction

Key	Behavior
Space / Enter	Open panel; confirm highlighted item when open
ArrowDown / ArrowUp	Move highlight, skip disabled items
Escape	Close panel
Tab	Close panel and focus next element

Accessibility

• Trigger uses native <button>, aria-haspopup="listbox" and aria-expanded reflect state
• Panel uses role="listbox", options use role="option" with aria-selected
• Disabled items exposed via aria-disabled
• Auto-closes on outside click or Escape