my2/app/components/ui/form

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

<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:

<!-- 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" />