Forms

Handle forms elegantly with Nuxt UI form components.

Form Components

<script setup>
const form = ref({
  name: '',
  email: '',
  role: 'user',
  newsletter: false
})

async function onSubmit() {
  console.log('Form submitted:', form.value)
}
</script>

<template>
  <UForm :state="form" @submit="onSubmit">
    <UFormGroup label="Name" name="name">
      <UInput v-model="form.name" />
    </UFormGroup>

    <UFormGroup label="Email" name="email">
      <UInput v-model="form.email" type="email" />
    </UFormGroup>

    <UFormGroup label="Role" name="role">
      <USelect
        v-model="form.role"
        :options="['user', 'admin', 'moderator']"
      />
    </UFormGroup>

    <UCheckbox v-model="form.newsletter" label="Subscribe to newsletter" />

    <UButton type="submit">
      Submit
    </UButton>
  </UForm>
</template>

Validation with Zod

import { z } from 'zod'

const schema = z.object({
  name: z.string().min(2),
  email: z.string().email(),
  age: z.number().min(18)
})

const form = ref({
  name: '',
  email: '',
  age: 0
})

<template>
  <UForm :schema="schema" :state="form" @submit="onSubmit">
    <!-- Form fields -->
  </UForm>
</template>

Form States

<template>
  <UInput v-model="value" :loading="isLoading" />
  <UInput v-model="value" :disabled="isDisabled" />
  <UInput v-model="value" :error="hasError" />
</template>

Nuxt UI forms are powerful and integrate seamlessly with validation libraries!