# Select Examples (vue)

```vue
<template>
  <h1>DBSelect Documentation Examples</h1>
  <h2>1. Default Select</h2>
  <DBSelect label="Default Select"
    ><option value="1">Option 1</option>
    <option value="2" :disabled="true">Option 2</option></DBSelect
  >
  <h2>2. Options Array</h2>
  <DBSelect label="Select with Options" :options="getOptions()"></DBSelect>
  <h2>3. Multiple Select</h2>
  <DBSelect label="Multiple Select" :multiple="true"
    ><option value="1">Option 1</option>
    <option value="2" :disabled="true">Option 2</option></DBSelect
  >
  <h2>4. Disabled State</h2>
  <DBSelect label="Disabled Select" :disabled="true"
    ><option value="1">Option 1</option>
    <option value="2" :disabled="true">Option 2</option></DBSelect
  >
  <h2>5. Validation States</h2>
  <DBSelect validation="valid" label="Valid Select"
    ><option value="1">Option 1</option>
    <option value="2" :disabled="true">Option 2</option></DBSelect
  >
  <DBSelect validation="invalid" label="Invalid Select"
    ><option value="1">Option 1</option>
    <option value="2" :disabled="true">Option 2</option></DBSelect
  >
  <DBSelect validation="no-validation" label="No Validation Select"
    ><option value="1">Option 1</option>
    <option value="2" :disabled="true">Option 2</option></DBSelect
  >
  <h2>6. Change Event Example</h2>
  <DBSelect
    label="Change Event"
    :onChange="(event) => console.log('Change event:', event.target.value)"
    ><option value="1">Option 1</option>
    <option value="2" :disabled="true">Option 2</option></DBSelect
  >
</template>

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

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