Select

A customizable dropdown select component. Supports v-model binding, filtering options, and clearable state.

---

Basic Usage

The broadly applicable basic radio v-model takes the value of the currently selected option as its value attribute.

<script setup>
import { ref } from 'vue'
import Select from '@/components/Select/Select.vue'

const value = ref('')
const options = ref([
  { label: 'Option 1', value: 1 },
  { label: 'Option 2', value: 2 },
  { label: 'Option 3', value: 3 }
])
</script>

<template>
  <Select v-model="value" :options="options" placeholder="Please choose" />
</template>

Clearable

You can clear the selector by setting the clearable property.

<script setup>
import { ref } from 'vue'
import Select from '@/components/Select/Select.vue'

const value = ref(2)
const options = ref([
  { label: 'Apple', value: 1 },
  { label: 'Banana', value: 2 },
  { label: 'Orange', value: 3 }
])
</script>

<template>
  <Select 
    v-model="value" 
    :options="options" 
    placeholder="Choose fruits"
    clearable
  />
</template>

Filterable

You can use the filter functionality to quickly find options.

<script setup>
import { ref } from 'vue'
import Select from '@/components/Select/Select.vue'

const value = ref('')
const options = ref([
  { label: 'JavaScript', value: 'js' },
  { label: 'TypeScript', value: 'ts' },
  { label: 'Python', value: 'py' },
  { label: 'Java', value: 'java' }
])
</script>

<template>
  <Select
    v-model="value"
    :options="options"
    placeholder="Fuzzy search"
    filterable
  />
</template>

---

Select Attributes

Name	Description	Type	Default
modelValue	The bound value	string | number	—
options	The options to select from	SelectOption[]	[]
placeholder	Placeholder for the input	string	''
disabled	Disable the select	boolean	false
clearable	Whether to show a clear icon	boolean	false
filterable	Whether to enable option filtering	boolean	false

---

Select Events

Name	Description	Parameters
update:modelValue	Emitted when selected value changes	(value: string | number)
change	Emitted after value changed	(value: string | number)
clear	Emitted when the input is cleared	—
visible-change	Emitted when dropdown visibility toggles	(visible: boolean)

---

Type Definition

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