# CustomSelect Examples (vue)

```vue
<template>
  <h1>DBCustomSelect Documentation Examples</h1>
  <h2>1. Default Custom Select</h2>
  <DBCustomSelect
    label="Default Custom Select"
    :options="getOptions()"
  ></DBCustomSelect>
  <h2>3. Multiple Select</h2>
  <DBCustomSelect
    label="Multiple Custom Select"
    :multiple="true"
    :options="getOptions()"
  ></DBCustomSelect>
  <h2>4. Disabled State</h2>
  <DBCustomSelect
    label="Disabled Custom Select"
    :disabled="true"
    :options="getOptions()"
  ></DBCustomSelect>
  <h2>5. Validation States</h2>
  <DBCustomSelect
    validMessage="This is a valid selection"
    validation="valid"
    label="Valid Custom Select"
    :options="getOptions()"
  ></DBCustomSelect>
  <DBCustomSelect
    invalidMessage="This is an invalid selection"
    validation="invalid"
    label="Invalid Custom Select"
    :options="getOptions()"
  ></DBCustomSelect>
  <DBCustomSelect
    validation="no-validation"
    label="No Validation Custom Select"
    :options="getOptions()"
  ></DBCustomSelect>
  <h2>6. Change Event Example</h2>
  <DBCustomSelect
    label="Change Event"
    :onChange="(event) => console.log('Change event:', event.target.value)"
    :options="getOptions()"
  ></DBCustomSelect>
  <h2>7. Placeholder Example</h2>
  <DBCustomSelect
    label="Custom Select with Placeholder"
    placeholder="Select an option"
    :options="getOptions()"
  ></DBCustomSelect>
</template>

<script setup lang="ts">
import { DBCustomSelect } from "@db-ux/v-v-core-components";

function getOptions() {
  return [
    {
      value: "1",
      label: "Option 1",
      selected: false,
    },
    {
      value: "2",
      label: "Option 2",
      disabled: true,
    },
    {
      value: "3",
      label: "Option 3",
    },
  ];
}
</script>
```