Usage

You can build your forms using one of the following approaches, depending on the complexity and control you need:

1. Using the Form Component The easiest and fastest way to build a form. Simply pass a fields configuration and other required data, and the Form component will handle the internal logic and render the fields for you. Best for simple and straightforward forms.

2. Using the FormContent Component With FormContent, you’ll need to set up the react-hook-form logic yourself, giving you greater control over the form's behavior. You'll still benefit from the automatic field rendering mechanism provided by the component. Ideal for forms that require moderate customization.

3. Using the FormField Component The most flexible option for building forms. This approach gives you complete control over rendering and logic while leveraging pre-built field components. Perfect for complex forms with highly specific requirements.

Form

const handleSubmit = (data) => {
  // Send data to Backend
}

return (
  <Form
    fields={FIELDS}
    onFormSubmit={handleSubmit}
    validationSchema={ZodSchema}
    isSubmitting={isLoading}
  />
)

FormContent

const methods = useForm({
  resolver: zodResolver(ZodSchema)
})

const handlePrefillClick = () => {
  setValue('recipient_name', `${user?.first_name} ${user?.last_name}`)
}

const handleFormSubmission = (data) => {
  // Send data to Backend
}

return (
  <FormProvider {...methods}>
    <Box>
      <FormContent
        fields={[PAYMENT_INPUT_FIELDS]}
        showPrimaryButton={false}
      />
      <Box>
        <FormContent
          className='flex-1'
          fields={[SUBMIT_ORDER_FIELD]}
          showPrimaryButton={false}
        />
        <Button
          onClick={handlePrefillClick}
          variant='plain'
        >
          Same as name
        </Button>
      </Box>
      <h4>Full address</h4>
      <FormContent
        fields={ADDRESS_INPUTS}
        showPrimaryButton={false}
      />
      <p>
        <strong>Important:</strong> Note text
      </p>
      <Button onClick={handleSubmit(handleFormSubmission)}>Submit</Button>
    </Box>
  </FormProvider>
)

Standalone fields

const methods = useForm({
  resolver: zodResolver(ZodSchema)
})

const handleFormSubmission = (data) => {
   // Send data to Backend
}

return (
   <FormProvider {...methods}>
      <FormField
         type="input"
         data={{
            id: 'name',
            name: 'name',
            label: 'First name *',
            type: 'text',
         }}
      />
      <FormField
         type="input"
         data={{
            id: 'surname',
            name: 'surname',
            label: 'Last name *',
            type: 'text',
         }}
      />
      <FormField
         type="select"
         data={{
         id: 'priority',
         name: 'priority',
         label: 'Priority Level *',
         options: [
            { label: 'High', value: 'high' },
            { label: 'Medium', value: 'medium' },
            { label: 'Low', value: 'low' }
         ]}}
      />
      <Button onClick={handleSubmit(handleFormSubmission)}>Submit</Button>
    </FormProvider>
  </div>
)