Form

'use client'
 
import { useForm } from 'react-hook-form'

interface FormData {
  email: string
  password: string
}
 
function LoginForm() {
  const form = useForm<FormData>()
 
  const onSubmit = (data: FormData) => {
    console.log(data)
  }
 
  return (
    <Form {...form}>
      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
        <FormField
          control={form.control}
          name="email"
          render={({ field }) => (
            <FormItem>
              <FormLabel>メールアドレス</FormLabel>
              <FormControl>
                <Input type="email" {...field} />
              </FormControl>
              <FormMessage />
            </FormItem>
          )}
        />
        <FormField
          control={form.control}
          name="password"
          render={({ field }) => (
            <FormItem>
              <FormLabel>パスワード</FormLabel>
              <FormControl>
                <Input type="password" {...field} />
              </FormControl>
              <FormDescription>8文字以上で入力してください</FormDescription>
              <FormMessage />
            </FormItem>
          )}
        />
        <Button type="submit">ログイン</Button>
      </form>
    </Form>
  )
}

import { zodResolver } from '@hookform/resolvers/zod'
import * as z from 'zod'
 
const schema = z.object({
  email: z.string().email('有効なメールアドレスを入力してください'),
  password: z.string().min(8, '8文字以上で入力してください'),
})
 
const form = useForm({
  resolver: zodResolver(schema),
})