FormField

<script setup lang="ts">
import { ref } from 'vue'

const state = ref({
  email: ''
})
</script>

<template>
  <UFormField
    label="Email Address"
    name="email"
    description="We'll never share your email"
    help="Enter a valid email address"
  >
    <UInput v-model="state.email" type="email" />
  </UFormField>
</template>

<script setup lang="ts">
import { z } from 'zod'
import { ref } from 'vue'

const schema = z.object({
  email: z.string().email('Invalid email address'),
  password: z.string().min(8, 'Password must be at least 8 characters')
})

const state = ref({
  email: '',
  password: ''
})
</script>

<template>
  <UForm :schema="schema" :state="state">
    <UFormField 
      label="Email" 
      name="email"
      required
    >
      <UInput v-model="state.email" />
    </UFormField>
    
    <UFormField 
      label="Password" 
      name="password"
      required
      help="Must be at least 8 characters"
    >
      <UInput v-model="state.password" type="password" />
    </UFormField>
  </UForm>
</template>

<template>
  <UFormField
    label="Username"
    name="username"
    error="This username is already taken"
  >
    <UInput v-model="state.username" />
  </UFormField>
  
  <!-- Conditionally show error -->
  <UFormField
    label="Email"
    name="email"
    :error="customError || undefined"
  >
    <UInput v-model="state.email" />
  </UFormField>
</template>

<script setup lang="ts">
// This field will show errors for addresses.home, addresses.work, etc.
const addressPattern = /^addresses\./
</script>

<template>
  <UFormField
    label="Addresses"
    name="addresses"
    :error-pattern="addressPattern"
  >
    <!-- nested address inputs -->
  </UFormField>
</template>

<template>
  <UFormField
    label="Username"
    name="username"
    eager-validation
  >
    <UInput v-model="state.username" />
  </UFormField>
</template>

<template>
  <UFormField label="Small" size="sm">
    <UInput />
  </UFormField>
  
  <UFormField label="Medium" size="md">
    <UInput />
  </UFormField>
  
  <UFormField label="Large" size="lg">
    <UInput />
  </UFormField>
</template>

<template>
  <UFormField
    label="Name"
    orientation="horizontal"
  >
    <UInput v-model="state.name" />
  </UFormField>
</template>

<template>
  <UFormField name="terms">
    <template #label="{ label }">
      <div class="flex items-center gap-2">
        <UIcon name="i-heroicons-information-circle" />
        <span>{{ label }}</span>
      </div>
    </template>
    
    <template #description="{ description }">
      <p class="italic">{{ description }}</p>
    </template>
    
    <template #error="{ error }">
      <div class="flex items-center gap-1">
        <UIcon name="i-heroicons-exclamation-triangle" />
        <span>{{ error }}</span>
      </div>
    </template>
    
    <UCheckbox />
  </UFormField>
</template>