Overview
The AuthForm component provides a complete, pre-built authentication form with support for OAuth providers, multiple field types (text, email, password, checkbox, select, OTP), validation, and customizable styling.
Basic usage
<template>
<UAuthForm
title="Sign in to your account"
:fields="[
{ name: 'email', type: 'email', label: 'Email', placeholder: 'Enter your email' },
{ name: 'password', type: 'password', label: 'Password', placeholder: 'Enter your password' }
]"
:submit="{ label: 'Sign in' }"
@submit="handleSubmit"
/>
</template>
<script setup lang="ts">
function handleSubmit(event: any) {
console.log('Form submitted:', event.data)
}
</script>
With OAuth providers
<template>
<UAuthForm
icon="i-lucide-lock"
title="Create an account"
description="Get started with Nuxt UI"
:providers="[
{ label: 'Continue with GitHub', icon: 'i-simple-icons-github', color: 'neutral' },
{ label: 'Continue with Google', icon: 'i-simple-icons-google', color: 'neutral' }
]"
separator="or continue with email"
:fields="fields"
:submit="{ label: 'Sign up' }"
/>
</template>
With validation
<template>
<UAuthForm
:fields="fields"
:schema="schema"
:submit="{ label: 'Sign in' }"
@submit="onSubmit"
/>
</template>
<script setup lang="ts">
import { z } from 'zod'
const schema = z.object({
email: z.string().email('Invalid email'),
password: z.string().min(8, 'Must be at least 8 characters')
})
const fields = [
{ name: 'email', type: 'email', label: 'Email', placeholder: '[email protected]' },
{ name: 'password', type: 'password', label: 'Password', placeholder: 'Enter password' }
]
function onSubmit(event: any) {
console.log(event.data)
}
</script>
Props
Icon displayed above the title. Supports any Iconify icon.
The title text displayed in the form header.
Description text displayed below the title.
Array of form fields to render. Each field can be of type: text, email, password, checkbox, select, or otp.
Array of OAuth provider buttons displayed at the top of the form.
separator
string | SeparatorProps
default:"'or'"
Text or separator configuration displayed between providers and fields.
Submit button configuration. Default: { label: 'Continue', block: true }
Validation schema (Zod, Yup, Valibot, etc.)
Custom validation function.
Loading state for the submit button.
Field types
The fields prop accepts an array of field objects. Each field can have the following types:
Text/Email/Password fields
{
name: string
type: 'text' | 'email' | 'password' | 'number' | 'tel' | 'url'
label?: string
placeholder?: string
icon?: string
required?: boolean
}
Checkbox fields
{
name: string
type: 'checkbox'
label?: string
description?: string
required?: boolean
}
Select fields
{
name: string
type: 'select'
label?: string
placeholder?: string
items: any[]
required?: boolean
}
OTP fields
{
name: string
type: 'otp'
label?: string
length?: number
placeholder?: string
}
Events
submit
(event: FormSubmitEvent) => void
Emitted when the form is submitted successfully with validated data.
Slots
Replace the entire header section (icon, title, description).
Replace just the description.
Replace the OAuth providers section.
Replace the submit button.
Replace a specific field by name. Example: #email-field.