Form Builder

Preview

Usage

"use client"

import { useForm } from "react-hook-form"
import {
  CancelButton,
  FormBuilder,
  SubmitButton,
} from "@/components/ui/form-builder"

type FormValues = {
  name: string
  email: string
  role: string
  active: boolean
}

const formBuilder = [
  { fieldType: "input", name: "name", label: "Name", required: true },
  { fieldType: "input", name: "email", label: "Email", type: "email" },
  {
    fieldType: "select",
    name: "role",
    label: "Role",
    placeholder: "Select a role",
    options: [
      { value: "admin", label: "Admin" },
      { value: "member", label: "Member" },
    ],
  },
  { fieldType: "checkbox", name: "active", label: "Active" },
]

export function UserForm() {
  const form = useForm<FormValues>({
    defaultValues: { name: "", email: "", role: "", active: true },
    mode: "onChange",
  })

  return (
    <FormBuilder form={form} formBuilder={formBuilder}>
      <CancelButton>Cancel</CancelButton>
      <SubmitButton>Save</SubmitButton>
    </FormBuilder>
  )
}

Variants and options