Core Selection

/**
 * Currently selected value - similar to input value attribute
 * Listen for changes with 'input' event for v-model support
 */
value: Object | String | null

/**
 * Enable multiple selection mode
 * When true, value should be an array
 */
multiple: Boolean  // default: false

/**
 * Array of available options for selection
 * Can be strings or objects
 */
options: Array  // default: []

/**
 * Disable the entire component
 */
disabled: Boolean  // default: false

/**
 * Show clear button to remove all selections
 */
clearable: Boolean  // default: true

/**
 * Allow deselecting options by clicking them in the dropdown
 */
deselectFromDropdown: Boolean  // default: false

/**
 * Key to use for option labels when options are objects
 */
label: String  // default: 'label'

/**
 * Transform option objects for v-model binding
 * Useful for returning only ID instead of full object
 */
reduce: Function  // default: (option) => option

/**
 * Generate label text for display
 * If option is object, returns option[this.label] by default
 */
getOptionLabel: Function

/**
 * Generate unique identifier for each option
 * Uses option.id if available, otherwise serializes to JSON
 */
getOptionKey: Function

/**
 * Determine if an option is selectable
 * Non-selectable options are displayed but disabled
 */
selectable: Function  // default: (option) => true

/**
 * Sets the id attribute of the input element
 * Useful for form integration and accessibility
 */
inputId: String  // default: null

/**
 * Control whether selected value resets when options change
 * Can be boolean or function for custom logic
 * @param newOptions - New options array
 * @param oldOptions - Previous options array
 * @param selectedValue - Current selected value
 */
resetOnOptionsChange: Boolean | Function  // default: false

/**
 * Select or deselect a given option
 * Handles both single and multiple selection modes
 * @param option - The option to select/deselect
 */
select(option: Object | String): void

/**
 * Remove an option from selection
 * @param option - The option to deselect
 */
deselect(option: Object | String): void

/**
 * Clear all selected values
 */
clearSelection(): void

/**
 * Check if the given option is currently selected
 * @param option - Option to check
 * @returns Whether option is selected
 */
isOptionSelected(option: Object | String): Boolean

/**
 * Check if option can be removed via dropdown
 * @param option - Option to check
 * @returns Whether option can be deselected
 */
isOptionDeselectable(option: Object | String): Boolean

/**
 * Compare two option objects for equality
 * @param a - First option
 * @param b - Second option
 * @returns Whether options are equal
 */
optionComparator(a: Object, b: Object): Boolean

// Computed properties
computed: {
  /**
   * Currently selected options (always returns array)
   */
  selectedValue: Array,
  
  /**
   * Whether any options are selected
   */
  isValueEmpty: Boolean,
  
  /**
   * Whether to show the clear button
   */
  showClearButton: Boolean
}

// Data properties
data: {
  /**
   * Internal value when no value prop is provided
   */
  _value: Array
}

/**
 * Emitted when selected value changes (for v-model)
 * @param value - New selected value
 */
'input': (value: any) => void

/**
 * Emitted before an option is selected  
 * @param option - Option being selected
 */
'option:selecting': (option: Object | String) => void

/**
 * Emitted after an option is selected
 * @param option - Option that was selected
 */
'option:selected': (option: Object | String) => void

/**
 * Emitted before an option is deselected
 * @param option - Option being deselected  
 */
'option:deselecting': (option: Object | String) => void

/**
 * Emitted after an option is deselected
 * @param option - Option that was deselected
 */
'option:deselected': (option: Object | String) => void

<template>
  <v-select 
    v-model="selectedOption"
    :options="options"
    placeholder="Choose one option..."
  />
</template>

<script>
export default {
  data() {
    return {
      selectedOption: null,
      options: ['Option 1', 'Option 2', 'Option 3']
    };
  }
};
</script>

<template>
  <v-select 
    v-model="selectedOptions"
    :options="options"
    multiple
    placeholder="Choose multiple options..."
  />
</template>

<script>
export default {
  data() {
    return {
      selectedOptions: [],
      options: ['Option 1', 'Option 2', 'Option 3']
    };
  }
};
</script>

<template>
  <v-select 
    v-model="selectedUserId"
    :options="users"
    label="name"
    :reduce="user => user.id"
    placeholder="Select a user..."
  />
</template>

<script>
export default {
  data() {
    return {
      selectedUserId: null,
      users: [
        { id: 1, name: 'John Doe', email: 'john@example.com' },
        { id: 2, name: 'Jane Smith', email: 'jane@example.com' }
      ]
    };
  }
};
</script>

<template>
  <v-select 
    v-model="selected"
    :options="products"
    :selectable="isSelectable"
    label="name"
    @option:selected="onProductSelected"
  />
</template>

<script>
export default {
  data() {
    return {
      selected: null,
      products: [
        { id: 1, name: 'Laptop', available: true },
        { id: 2, name: 'Phone', available: false },
        { id: 3, name: 'Tablet', available: true }
      ]
    };
  },
  methods: {
    isSelectable(option) {
      return option.available;
    },
    onProductSelected(product) {
      console.log('Selected product:', product.name);
    }
  }
};
</script>

<template>
  <div>
    <v-select 
      v-model="selected"
      :options="options"
      ref="vSelect"
    />
    <button @click="selectFirst">Select First</button>
    <button @click="clearAll">Clear All</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selected: null,
      options: ['Option 1', 'Option 2', 'Option 3']
    };
  },
  methods: {
    selectFirst() {
      if (this.options.length > 0) {
        this.$refs.vSelect.select(this.options[0]);
      }
    },
    clearAll() {
      this.$refs.vSelect.clearSelection();
    }
  }
};
</script>