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>
)
}