# Checkbox Examples (vue)

```vue
<template>
  <h1>DBCheckbox Documentation Examples</h1>
  <h2>1. Default Checkbox</h2>
  <DBCheckbox label="Default Checkbox"></DBCheckbox>
  <h2>2. Indeterminate State</h2>
  <DBCheckbox label="Indeterminate Checkbox" :indeterminate="true"></DBCheckbox>
  <h2>3. Sizes</h2>
  <DBCheckbox size="small" label="Small Checkbox"></DBCheckbox>
  <DBCheckbox size="medium" label="Medium Checkbox"></DBCheckbox>
  <h2>4. Validation States</h2>
  <DBCheckbox validation="valid" label="Valid Checkbox"></DBCheckbox>
  <DBCheckbox validation="invalid" label="Invalid Checkbox"></DBCheckbox>
  <DBCheckbox
    validation="no-validation"
    label="No Validation Checkbox"
  ></DBCheckbox>
  <h2>5. Disabled State</h2>
  <DBCheckbox label="Disabled Checkbox" :disabled="true"></DBCheckbox>
  <h2>6. Message Property Example</h2>
  <DBCheckbox
    label="Checkbox with Message"
    message="This is a helper message."
  ></DBCheckbox>
  <h2>7. Change Event Example</h2>
  <DBCheckbox
    label="Change Event"
    :onChange="(event) => console.log('Change event:', event.target.checked)"
  ></DBCheckbox>
</template>

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