Ready to Use form pattern (oldly called `Form Playground`)

pnpm dlx shadcn@latest add input form select radio-group checkbox

pnpm add zod

pnpm add react-hook-form @hookform/resolvers

import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { useTransition } from 'react';

import { Form } from '@/components/ui/form';
import { Button } from '@/components/ui/button';
import { FormTextField } from '@/components/forms/form-text-field';

import { z } from 'zod';

const schema = z.object({
  email: z.string().email(),
  password: z.string().min(6),
});

type FormInput = z.infer<typeof schema>;

export default function ExampleForm() {
  const [isPending, startTransition] = useTransition();

  const form = useForm<FormInput>({
    resolver: zodResolver(schema),
    defaultValues: {
      email: '',
      password: '',
    },
    mode: 'all',
  });

  function onSubmit(data: FormInput) {
    startTransition(async () => {
      // 👉 call API หรือ server action ที่นี่
      // await login(data);

      form.reset();
    });
  }

  return (
    <Form {...form}>
      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
        <FormTextField
          control={form.control}
          name="email"
          type="email"
          label="Email"
          placeholder="john@example.com"
          description="We'll never share your email"
        />

        <FormTextField
          control={form.control}
          name="password"
          type="password"
          label="Password"
          placeholder="••••••••"
        />

        <Button type="submit" disabled={isPending}>
          {isPending ? 'Submitting...' : 'Submit'}
        </Button>
      </form>
    </Form>
  );
}