## Form Creation with Validation You can easily build dynamic and validated forms using the *DynamicFormInput* component, which is tightly integrated with the **React Hook Form** library. Each input field is defined via a simple JSON structure, and the form behavior (validation, error handling, submission) is handled automatically. --- ### Core Concept The form is powered by: - *DynamicFormInput*: the main component that renders each input field - *useEditItem*: a custom hook that provides: - *register*: bind input fields - *control*: for controlled components - *onSubmit*: submission logic - *handleCancel*: reset or cancel action - *isLoading*: submit button state --- ### Form Example (as a Full Page) Below is an example of how to create a page that includes a fully working dynamic form: import { DynamicFormInput } from "@/components/forms/DynamicFormInput"; import { Button, Card, CardBody, CardTitle } from "@/components/ui"; import { Icon } from "@/components/icon"; import { useEditItem } from "@/hooks/useEditItem"; import { useGlobalState } from "@/hooks/useGlobalState"; import { Toaster } from "@/components/ui/toaster"; import { cn } from "@/lib/utils"; import { v4 as uuidv4 } from "uuid"; export default function PageRoute() { const { register, control, onSubmit, isLoading, handleCancel, } = useEditItem(); const { dictionary } = useGlobalState(); return ( {model?.title}

{Array.isArray(items?.model?.items) && items.model.items.map((item, index) => ( ))}

); } ### item Field Requirements Each form input (item) should include the following fields: - *type*: input type (e.g. "text", "textarea", "select", "checkbox") - *key*: unique identifier used by react-hook-form - *value*: default or initial value - *status*: input status (e.g. "editable", "readonly", "disabled") - readonly: true or false for read-only behavior ### Advanced Features - Validation rules can be configured in *validationService.ts* - Error messages are handled and shown automatically - Autocompletion and right-side actions (like shortcut links) are supported - Toaster integration allows you to notify users on save, success, or failure >This form system provides a clean, reusable, and scalable solution for building admin interfaces or complex user forms — without writing repetitive JSX for inputs.

Documentation

Documentation