# Input Component

shadcn-nuxt Input component with TypeScript support and variants.

## Features

- **Two-way binding** - Full v-model support
- **Variants** - Default and error states
- **Sizes** - Small, default, and large
- **TypeScript** - Full type safety
- **All HTML input types** - text, email, password, number, etc.

## Basic Usage

```vue
<script setup lang="ts">
import { ref } from 'vue'
import { Input } from '@/components/ui/input'

const email = ref('')
</script>

<template>
  <Input v-model="email" type="email" placeholder="Enter your email" />
</template>
```

## With VeeValidate Form

```vue
<script setup lang="ts">
import { useForm } from 'vee-validate'
import { toTypedSchema } from '@vee-validate/zod'
import { z } from 'zod'
import {
  FormField,
  FormItem,
  FormLabel,
  FormControl,
  FormMessage,
} from '@/components/ui/form'
import { Input } from '@/components/ui/input'

const formSchema = toTypedSchema(
  z.object({
    email: z.string().email('Please enter a valid email'),
  })
)

const form = useForm({
  validationSchema: formSchema,
})
</script>

<template>
  <form @submit="form.handleSubmit((values) => console.log(values))">
    <FormField v-slot="{ field }" name="email">
      <FormItem>
        <FormLabel>Email</FormLabel>
        <FormControl>
          <Input
            v-bind="field"
            type="email"
            placeholder="you@example.com"
          />
        </FormControl>
        <FormMessage />
      </FormItem>
    </FormField>
  </form>
</template>
```

## Variants

```vue
<!-- Default -->
<Input v-model="value" />

<!-- Error state (use with form validation) -->
<Input v-model="value" variant="error" />
```

## Sizes

```vue
<!-- Small -->
<Input v-model="value" size="sm" />

<!-- Default -->
<Input v-model="value" size="default" />

<!-- Large -->
<Input v-model="value" size="lg" />
```

## Input Types

```vue
<!-- Text (default) -->
<Input v-model="text" type="text" />

<!-- Email -->
<Input v-model="email" type="email" />

<!-- Password -->
<Input v-model="password" type="password" />

<!-- Number -->
<Input v-model="age" type="number" />

<!-- Date -->
<Input v-model="date" type="date" />

<!-- Search -->
<Input v-model="query" type="search" />
```

## Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| modelValue | string \| number | undefined | The input value |
| type | string | 'text' | HTML input type |
| placeholder | string | undefined | Placeholder text |
| disabled | boolean | false | Disable the input |
| required | boolean | false | Mark as required |
| name | string | undefined | Input name attribute |
| id | string | undefined | Input ID attribute |
| autocomplete | string | undefined | Autocomplete attribute |
| variant | 'default' \| 'error' | 'default' | Visual variant |
| size | 'sm' \| 'default' \| 'lg' | 'default' | Input size |
| class | string | undefined | Additional CSS classes |

## Events

| Event | Payload | Description |
|-------|---------|-------------|
| update:modelValue | string \| number | Emitted when value changes |