## 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.

Nos professionnels

Quel est ton profil?

Les incontournables

Vivre en Italie

Vivre en Italie

Quel est ton profil?

Les incontournables

Acheter une maison en Italie

Acheter une maison en Italie

Les incontournables

Travailler en Italie

Type d'assistance

Nos professionnels

Quel est ton profil?

Les incontournables

Vivre en Italie

Vivre en Italie

Quel est ton profil?

Les incontournables

Acheter une maison en Italie

Acheter une maison en Italie

Les incontournables

Travailler en Italie

Type d'assistance

Documentation

Nos professionnels

Quel est ton profil?

Les incontournables

Vivre en Italie

Vivre en Italie

Quel est ton profil?

Les incontournables

Acheter une maison en Italie

Acheter une maison en Italie

Les incontournables

Travailler en Italie

Type d'assistance

Nos professionnels

Quel est ton profil?

Les incontournables

Vivre en Italie

Vivre en Italie

Quel est ton profil?

Les incontournables

Acheter une maison en Italie

Acheter une maison en Italie

Les incontournables

Travailler en Italie

Type d'assistance

Documentation