\n );\n});\n\nexport default FieldBase;\n```\n\nThis component is a base for all fields, handling common properties like `label`, `placeholder`, and `value`. It also manages the input's state and validation.\n\nYou can then create specific field components like `TextField.jsx` or `NumberField.jsx` that extend this base component.\n\n```jsx title=\"src/components/fields/TextField.jsx\"\nimport FieldBase from \"./FieldBase\";\n\nconst TextField = (props) => {\n return ;\n};\n\nexport default TextField;\n```\n\nBefore using your fields, you need to register them.\n\nWe recommend creating a `registerFields.tsx` (or `.jsx`) file where you define all your form fields in one place. Then, wrap this registration logic in your root component, such as `App`.\n\nFor better performance, you can use **lazy loading** to register fields only when necessary.\n\nHere’s a basic structure:\n\n```jsx title=\"src/components/fields/registerFields.jsx\"\nimport Register from \"react-form-krafter\";\n\nconst COMPONENTS = [\n {\n type: \"text\",\n render: lazy(() => import(\"./TextField\")),\n },\n {\n type: \"number\",\n render: lazy(() => import(\"./NumberField\")),\n },\n];\n\nconst App = () => {\n return (\n {/* Your app components */}\n );\n};\nexport default App;\n```\n\n### Creating a Form\n\nNow that your fields are registered, you can create a form using those components.\n\nTo do this, define the fields you want to use in your form. \nWe recommend following the structure below:\n\n```jsx title=\"src/pages/FirstForm/fields.js\"\nexport const BASIC_FIELDS_EXAMPLE = [\n {\n name: \"name\",\n label: \"Name Field\",\n placeholder: \"Enter name\",\n required: true,\n disabled: false,\n type: \"text\",\n initialValue: \"\",\n },\n {\n name: \"age\",\n label: \"Age Field\",\n placeholder: \"Enter age\",\n required: true,\n disabled: false,\n type: \"number\",\n initialValue: 0,\n },\n];\n```\n\nImport your field definitions and render the form using the `Form` component from `react-form-krafter`.\n\nYou can use any validation library, but `zod` pairs especially well for schema-based validation.\n\n```jsx title=\"src/pages/FirstForm/index.jsx\"\nimport { Form } from \"react-form-krafter\";\nimport { BASIC_FIELDS_EXAMPLE } from \"./fields\";\nimport { z } from \"zod\";\n\nconst schema = z.object({\n name: z.string().min(1, \"Name is required\"),\n age: z.number().min(0, \"Age must be a positive number\"),\n});\n\nconst FirstForm = () => {\n const formApi = useRef(null);\n\n return (\n {\n if (values.success) {\n alert(\"Form submitted successfully!\");\n } else {\n alert(\"Form submission failed. Check errors.\");\n }\n console.log(\"Form submitted:\", values);\n }}\n >\n {(formValue) => (\n
\n
\n \n \n
\n\n
Current State:
\n
{JSON.stringify(formValue.fieldsState, null, 2)}
\n
\n )}\n \n );\n};\n\nexport default FirstForm;\n```\n\nThe `formApi` ref allows you to access methods like `reset()` and `requestSubmit()` (and others described in the docs), giving you programmatic control over the form's state and behavior.\n\nAlso, you are able to access the current state of the form through `formValue.fieldsState`, which provides insights into the values and validation status of each field.\n\nIf you add a child component to the form, you will be able to access the same values provided by the `Form` component, allowing you to create more complex interactions or display additional information based on the form state.\n\n## Learn more\nTo dive deeper into `react-form-krafter`, read our official documentation [here](https://react-form-krafter.vercel.app/docs/category/basics).","readmeFilename":"README.md"}