# Form Components

shadcn-nuxt Form components with VeeValidate integration.

## Components

- **FormField** - Wraps vee-validate Field component for validation
- **FormItem** - Container for form fields with proper spacing
- **FormLabel** - Label with error state styling
- **FormControl** - Wrapper for input elements with accessibility
- **FormMessage** - Error message display with animations
- **FormDescription** - Help text for form fields

## Usage Example

```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,
  FormDescription,
} from '@/components/ui/form'
import { Input } from '@/components/ui/input'
import { Button } from '@/components/ui/button'

const formSchema = toTypedSchema(
  z.object({
    email: z.string().email('Please enter a valid email'),
    password: z.string().min(8, 'Password must be at least 8 characters'),
  })
)

const form = useForm({
  validationSchema: formSchema,
})

const onSubmit = form.handleSubmit((values) => {
  console.log('Form submitted:', values)
})
</script>

<template>
  <form @submit="onSubmit" class="space-y-6">
    <!-- Email Field -->
    <FormField v-slot="{ field }" name="email">
      <FormItem>
        <FormLabel>Email</FormLabel>
        <FormControl>
          <Input
            type="email"
            placeholder="you@example.com"
            v-bind="field"
          />
        </FormControl>
        <FormDescription>
          We'll never share your email with anyone else.
        </FormDescription>
        <FormMessage />
      </FormItem>
    </FormField>

    <!-- Password Field -->
    <FormField v-slot="{ field }" name="password">
      <FormItem>
        <FormLabel>Password</FormLabel>
        <FormControl>
          <Input
            type="password"
            placeholder="Enter your password"
            v-bind="field"
          />
        </FormControl>
        <FormMessage />
      </FormItem>
    </FormField>

    <Button type="submit">Submit</Button>
  </form>
</template>
```

## Features

- **VeeValidate Integration** - Full validation support with error messages
- **Accessibility** - Proper ARIA attributes and label associations
- **Error State** - Automatic error styling for labels and inputs
- **Animations** - Smooth transitions for error messages
- **TypeScript** - Full type safety
- **Responsive** - Mobile-first design

## Input Variants

The Input component supports multiple variants and sizes:

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

<!-- Error state -->
<Input v-model="value" variant="error" />

<!-- Sizes -->
<Input v-model="value" size="sm" />
<Input v-model="value" size="default" />
<Input v-model="value" size="lg" />

<!-- Types -->
<Input type="text" />
<Input type="email" />
<Input type="password" />
<Input type="number" />
```