الگوهای فرم

// Form* ship from their own subpath entry, not the main barrel (RSC compatibility).
import { Form, FormField, FormItem, FormLabel, FormControl, FormMessage } from '@partodata/ui/form'
import { Input, Button } from '@partodata/ui'
import { useForm } from 'react-hook-form'

interface ExampleFormValues {
  username: string
}

export function ExampleForm() {
  const form = useForm<ExampleFormValues>({ defaultValues: { username: '' } })

  function onSubmit(values: ExampleFormValues) {
    console.log(values)
  }

  return (
    <Form {...form}>
      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
        <FormField
          control={form.control}
          name="username"
          render={({ field }) => (
            <FormItem>
              <FormLabel>نام کاربری</FormLabel>
              <FormControl>
                <Input placeholder="نام کاربری خود را وارد کنید" {...field} />
              </FormControl>
              <FormMessage />
            </FormItem>
          )}
        />

        <Button htmlType="submit">ثبت</Button>
      </form>
    </Form>
  )
}

import { useState } from 'react'
import { useForm } from 'react-hook-form'
// Form* ship from their own subpath entry, not the main barrel (RSC compatibility).
import { Form, FormField, FormItem, FormLabel, FormControl, FormMessage } from '@partodata/ui/form'
import { Button, Input, Step, Stepper } from '@partodata/ui'

interface SignupFormValues {
  name: string
  email: string
}

export function MultiStepForm() {
  // Stepper is 0-based: 0 = «اطلاعات پایه».
  const [step, setStep] = useState(0)
  const form = useForm<SignupFormValues>({
    mode: 'onTouched',
    defaultValues: { name: '', email: '' },
  })

  function onSubmit(values: SignupFormValues) {
    console.log(values)
  }

  return (
    <Form {...form}>
      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
        <Stepper activeStep={step}>
          <Step label="اطلاعات پایه" />
          <Step label="اطلاعات تماس" />
          <Step label="بازبینی" />
        </Stepper>

        {/* مرحله ۱ */}
        {step === 0 && (
          <div className="space-y-4">
            <h2 className="text-lg font-semibold">اطلاعات پایه</h2>
            <FormField
              control={form.control}
              name="name"
              rules={{ required: 'نام الزامی است' }}
              render={({ field }) => (
                <FormItem>
                  <FormLabel>نام</FormLabel>
                  <FormControl>
                    <Input placeholder="نام خود را وارد کنید" {...field} />
                  </FormControl>
                  <FormMessage />
                </FormItem>
              )}
            />
            {/* htmlType defaults to "button", so a step change never submits the form */}
            <Button onClick={() => setStep(1)}>مرحله بعد</Button>
          </div>
        )}

        {/* مرحله ۲ */}
        {step === 1 && (
          <div className="space-y-4">
            <h2 className="text-lg font-semibold">اطلاعات تماس</h2>
            <FormField
              control={form.control}
              name="email"
              rules={{ required: 'ایمیل الزامی است' }}
              render={({ field }) => (
                <FormItem>
                  <FormLabel>ایمیل</FormLabel>
                  <FormControl>
                    <Input type="email" dir="ltr" placeholder="example@domain.com" {...field} />
                  </FormControl>
                  <FormMessage />
                </FormItem>
              )}
            />
            <div className="flex gap-2">
              <Button variant="outline" onClick={() => setStep(0)}>قبلی</Button>
              <Button onClick={() => setStep(2)}>مرحله بعد</Button>
            </div>
          </div>
        )}

        {/* مرحله ۳ — ارسال */}
        {step === 2 && (
          <div className="flex gap-2">
            <Button variant="outline" onClick={() => setStep(1)}>قبلی</Button>
            <Button htmlType="submit" variant="primary" isLoading={form.formState.isSubmitting}>
              ثبت
            </Button>
          </div>
        )}
      </form>
    </Form>
  )
}