# Switch Examples (vue)

```vue
<template>
  <h1>DBSwitch Documentation Examples</h1>
  <h2>1. Default Switch</h2>
  <DBSwitch label="Default Switch"></DBSwitch>
  <h2>2. Visual Aid</h2>
  <DBSwitch label="Switch with Visual Aid" :visualAid="true"></DBSwitch>
  <DBSwitch label="Switch without Visual Aid" :visualAid="false"></DBSwitch>
  <h2>3. Sizes</h2>
  <DBSwitch size="small" label="Small Switch"></DBSwitch>
  <DBSwitch size="medium" label="Medium Switch"></DBSwitch>
  <h2>4. Validation States</h2>
  <DBSwitch validation="valid" label="Valid Switch"></DBSwitch>
  <DBSwitch validation="invalid" label="Invalid Switch"></DBSwitch>
  <DBSwitch validation="no-validation" label="No Validation Switch"></DBSwitch>
  <h2>5. Disabled State</h2>
  <DBSwitch label="Disabled Switch" :disabled="true"></DBSwitch>
  <h2>6. Icon Support</h2>
  <DBSwitch icon="check" label="Switch with Icon"></DBSwitch>
  <DBSwitch iconLeading="user" label="Switch with Leading Icon"></DBSwitch>
  <DBSwitch iconTrailing="arrow" label="Switch with Trailing Icon"></DBSwitch>
  <h2>7. Change Event Example</h2>
  <DBSwitch
    label="Change Event"
    :onChange="(event) => console.log('Change event:', event.target.checked)"
  ></DBSwitch>
</template>

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