{"id":23850565,"url":"https://github.com/manojadams/mui-forms","last_synced_at":"2025-09-07T23:31:39.883Z","repository":{"id":56749609,"uuid":"524186851","full_name":"manojadams/mui-forms","owner":"manojadams","description":"Material UI forms using json based schema","archived":false,"fork":false,"pushed_at":"2024-08-12T13:08:05.000Z","size":4011,"stargazers_count":20,"open_issues_count":8,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-12-25T04:32:47.237Z","etag":null,"topics":["forms","material-forms","mui-forms","react","react-forms"],"latest_commit_sha":null,"homepage":"https://mui-forms.vercel.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/manojadams.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-08-12T18:24:11.000Z","updated_at":"2024-11-14T15:55:49.000Z","dependencies_parsed_at":"2024-01-13T02:39:59.815Z","dependency_job_id":"09747c04-0cf8-4832-be22-0fb0d6d30761","html_url":"https://github.com/manojadams/mui-forms","commit_stats":{"total_commits":181,"total_committers":3,"mean_commits":"60.333333333333336","dds":0.2541436464088398,"last_synced_commit":"524e96b4ce6d33f38ea7cf0a1fc3c290e5bdda25"},"previous_names":["manojgetwealthy/metaforms-mui"],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/manojadams%2Fmui-forms","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/manojadams%2Fmui-forms/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/manojadams%2Fmui-forms/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/manojadams%2Fmui-forms/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/manojadams","download_url":"https://codeload.github.com/manojadams/mui-forms/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":232265428,"owners_count":18496970,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["forms","material-forms","mui-forms","react","react-forms"],"created_at":"2025-01-02T22:30:38.667Z","updated_at":"2025-09-07T23:31:39.865Z","avatar_url":"https://github.com/manojadams.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv\u003e\n    \u003cdiv align=\"center\"\u003e\n        \u003ca href=\"https://mui.com/core/\" rel=\"noopener\" target=\"_blank\"\u003e\u003cimg width=\"80\" src=\"https://mui-forms.vercel.app/logos/logo.png\" alt=\"MUI Forms logo\"\u003e\u003c/a\u003e\n    \u003c/div\u003e\n  \u003cp align=\"center\"\u003eCreate advanced material forms\u003c/p\u003e\n\u003c/div\u003e\n\n## About\nCreate beautiful advanced forms with a JSON-based schema\n  \n## Advantages and features\n- Material UI components\n- Built-in layouting\n- Responsive\n- Support for custom components\n- Easily define field relationships and build advanced forms\n- Load data from API\n- Extensible\n- Simple forms\n- Wizard forms\n- Stepper forms\n- Mobile-ready\n- Production-ready\n\n## Installation\n\n```bash\nnpm install mui-forms\n```\n\n## Documentation\nVisit the following page for detailed documentation: https://mui-forms.vercel.app\n\n## Basic Usage\n\n### 1. Define your JSON schema\n```typescript\nconst exampleSchema = {\n    \"fields\": [{\n        \"name\": \"first_name\",\n        \"meta\": {\n            \"displayType\": \"text\",\n            \"displayName\": \"First Name\"\n        }\n    }, {\n        \"name\": \"last_name\",\n        \"meta\": {\n            \"displayType\": \"text\",\n            \"displayName\": \"Last Name\"\n        }\n    }]\n}\n```\n### 2. Usage\n\n```tsx\nimport React from 'react';\nimport MuiForms from 'mui-forms';\nimport exampleSchema from '\u003cexample-schema.json\u003e';\n\nexport function MyForm() {\n    return (\n        \u003cMuiForms\n            schema={exampleSchema}\n            onSubmit={(formData) =\u003e {\n              // submit data\n            }}\n        /\u003e\n    );\n}\n```\n\n## Input Properties\n\n| Name               | Description           |\n| ------------------ | ---------------------------------------- |\n| className          | Name of class attribute assigned to the root form element |\n| name               | The name of the form  |\n| config             | Configuration options for the form. [Read more](https://mui-forms.vercel.app/config)  |\n| data               | Contains initial form data values when the form is loaded. [Read more](https://mui-forms.vercel.app/preload-data)  |\n| schema             | JSON-based schema for rendering the form. [Read more](https://mui-forms.vercel.app/schema)  |\n| controls           | Custom fields. [Read more](https://mui-forms.vercel.app/custom-fields/about)  |\n| components         | Custom template components mapped with schema using displayType property as template. [Read more](https://mui-forms.vercel.app/custom-fields/custom-components)  |\n| pageNumber         | The default tab on opening the form (grouped form) |\n| lastPageNumber     | The last page number will exclude any tabs that appear after the lastPageNumber tab |\n| onChange           | A function that will be called whenever the value of a field changes. The second parameter provided to this function contains the complete form data. |\n| onError            | A function that will be called whenever there is an error with a field. |\n| onNext             | A function that will be called when when the user attempts to navigate to the next section of a grouped form |\n| onPrevious         | A function that will be called when when the user attempts to navigate to the previous section of a grouped form |\n| onSubmit           | A function that will be called when the form is submitted |\n| changeResponseMode | Value: \"form-data\", \"section-data\", \"default\". \u003cbr /\u003e **`form-data`**: onChange event will pass all the form data as a second parameter. \u003cbr /\u003e**`section-data`**: onChange event will pass all the section data as a second parameter |\n| nextResponseMode   | Value: \"form-data\", \"page-data\" \u003cbr/\u003e **`form-data`**: onNext event will send all the form data (onNext). \u003cbr /\u003e **`page-data`**: onNext event will send all the date of the current page. \u003cbr/\u003e `Note`: onNext is triggered on click of **Next** button |\n\n\n## Mandatory properties\n- schema\n- onSubmit\n\n## Schema details\n[Check out details here https://mui-forms.vercel.app/schema](https://mui-forms.vercel.app/schema)\n\n## Change logs\n- [fix #111: auth headers](https://github.com/manojadams/mui-forms/issues/111)\n\n## Contributions\n\nTo contribute, you can fork the repo, make your changes and submit a PR/MR to the master branch.\n\nYou can contribute in many ways:\n- Work on features/enhancements\n- Work on bug fixes\n- Improve on existing functionalities\n- Improve documentation\n- Add more examples/improve existing example\n- Participate in discussions\n- Provide your valuable feedback/suggestions.\n\n## Give a ⭐️ if you liked this project!\n\n## License\n\nMIT © [manojadams](https://github.com/manojadams)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmanojadams%2Fmui-forms","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmanojadams%2Fmui-forms","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmanojadams%2Fmui-forms/lists"}