Documentation

Form Builder

Compose a form and export the code + Zod schema.

Fields

Choose a field type and click Add field.

Preview

import { useForm, FormProvider } from 'react-hook-form'
import { zodResolver } from '@hookform/resolvers/zod'
import { z } from 'zod'
import InputField from '@/components/ui/InputField'
import TextareaField from '@/components/ui/TextareaField'
import SelectField from '@/components/ui/SelectField'
import CheckboxField from '@/components/ui/CheckboxField'
import RadioGroupField from '@/components/ui/RadioGroupField'
import SwitchField from '@/components/ui/SwitchField'
import DatePickerField from '@/components/ui/DatePickerField'
import FileUploadField from '@/components/ui/FileUploadField'
import { Button } from '@/components/ui/button'

const FormSchema = z.object({
})

export default function MyForm() {
  const methods = useForm({ resolver: zodResolver(FormSchema) })
  const onSubmit = methods.handleSubmit((values) => { console.log(values) })
  return (
    <FormProvider {...methods}>
      <form onSubmit={onSubmit} className="space-y-4">
        <Button type="submit">Submit</Button>
      </form>
    </FormProvider>
  )
}