# Input Examples (vue)

```vue
<template>
  <h1>DBInput Documentation Examples</h1>
  <h2>1. Default Input</h2>
  <DBInput label="Enter text here"></DBInput>
  <h2>2. Input Types</h2>
  <DBInput type="text" label="Text Input"></DBInput>
  <DBInput type="email" label="Email Input"></DBInput>
  <DBInput type="password" label="Password Input"></DBInput>
  <DBInput type="number" label="Number Input"></DBInput>
  <h2>3. Sizes</h2>
  <DBInput size="small" label="Small Input"></DBInput>
  <DBInput size="medium" label="Medium Input"></DBInput>
  <h2>4. Icon Support</h2>
  <DBInput icon="search" label="Search Input"></DBInput>
  <DBInput iconLeading="user" label="Leading Icon"></DBInput>
  <DBInput iconTrailing="check" label="Trailing Icon"></DBInput>
  <h2>5. Validation States</h2>
  <DBInput validation="valid" label="Valid Input"></DBInput>
  <DBInput validation="invalid" label="Invalid Input"></DBInput>
  <DBInput validation="no-validation" label="No Validation"></DBInput>
  <h2>6. Disabled State</h2>
  <DBInput label="Disabled Input" :disabled="true"></DBInput>
  <h2>7. Custom Class</h2>
  <DBInput label="Custom Class"></DBInput>
  <h2>8. Placeholder Examples</h2>
  <DBInput placeholder="Enter text here" label="With Placeholder"></DBInput>
  <DBInput placeholder="Search here" label="Search Placeholder"></DBInput>
  <h2>9. Input Event Example</h2>
  <DBInput
    label="Input Event"
    :onInput="(event) => console.log('Input event:', event.target.value)"
  ></DBInput>
  <h2>10. Message Property Example</h2>
  <DBInput
    label="Input with Message"
    message="This is a helper message."
  ></DBInput>
</template>

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