{"id":15662822,"url":"https://github.com/awran5/react-material-ui-step-form","last_synced_at":"2025-07-03T14:07:42.475Z","repository":{"id":47297453,"uuid":"229878517","full_name":"awran5/react-material-ui-step-form","owner":"awran5","description":"React Material UI multi steps form with basic form validation logic.","archived":false,"fork":false,"pushed_at":"2023-04-27T06:56:57.000Z","size":1828,"stargazers_count":25,"open_issues_count":5,"forks_count":22,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-05-05T23:09:34.501Z","etag":null,"topics":["form-validation-react","material-ui","material-ui-form","react","react-form","react-hooks","reactjs","steps"],"latest_commit_sha":null,"homepage":"https://react-material-ui-step-form.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/awran5.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"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":"2019-12-24T05:46:37.000Z","updated_at":"2025-01-22T10:16:23.000Z","dependencies_parsed_at":"2024-10-23T08:25:25.177Z","dependency_job_id":"06239a9a-3e86-4f15-b304-b04f689b7817","html_url":"https://github.com/awran5/react-material-ui-step-form","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/awran5/react-material-ui-step-form","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/awran5%2Freact-material-ui-step-form","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/awran5%2Freact-material-ui-step-form/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/awran5%2Freact-material-ui-step-form/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/awran5%2Freact-material-ui-step-form/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/awran5","download_url":"https://codeload.github.com/awran5/react-material-ui-step-form/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/awran5%2Freact-material-ui-step-form/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":263339939,"owners_count":23451518,"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":["form-validation-react","material-ui","material-ui-form","react","react-form","react-hooks","reactjs","steps"],"created_at":"2024-10-03T13:34:37.799Z","updated_at":"2025-07-03T14:07:42.444Z","avatar_url":"https://github.com/awran5.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Material-UI Step Form\n\nReact Material UI multi step form with basic form `onChange` validation logic. inspired by [Traversy Media](https://www.youtube.com/watch?v=zT62eVxShsY) tutorial and using Material-ui [checkout](https://material-ui.com/getting-started/templates/checkout/) free template.\n\n\u003chr /\u003e\n\n![screenshot](./screenshot.gif)\n\n### Instructions\n\n- Download or clone the repo:\n\n```sh\ngit clone https://github.com/awran5/react-material-ui-step-form.git\n```\n\n### Dependencies\n\n- [Material-UI](https://material-ui.com/) v5 or higher\n- React version supports [Hooks](https://reactjs.org/docs/hooks-intro.html)\n\n```jsx\n// src/Context.tsx\nconst variant = 'standard' // `filled` | `outlined` | `standard`\nconst margin = 'normal' // `dense` | `none` | `normal`\n```\n\n### Example\n\n```tsx\ntype ValidationSchema = Record\u003c\n  string,\n  {\n    value?: any\n    error?: string\n    required?: boolean\n    validate?: 'text' | 'number' | 'email' | 'phone' | 'zip' | 'checkbox' | 'select'\n    minLength?: number\n    maxLength?: number\n    helperText?: string\n  }\n\u003e\n\n\n// src/initialValues.tsx\nconst initialValues: ValidationSchema = {\n  yourFieldname: {\n    value: '',                          // will be filled with field value\n    error: '',                          // will be filled with error message\n    required: true,                     // if `false` field will be still validated but will not enable the `next` button\n    validate: 'text',                   // field validation logic (see types above)\n    minLength: 2,                       // validate min length\n    maxLength: 20,                      // validate max length\n    helperText: 'custom error message'  // change the default error message (applied to `validate` types only)\n  },\n  {\n    // another field\n  }\n}\n```\n\n### Changelog - 10/2021\n\n- Update: MUI v5\n- fix: minor bugs\n- style: cleaning up\n\n### Changelog - 07/2021\n\n- Refactor: code to Typescript\n- Refactor: Validation logic, now you can control all validaton logic inside `src/initialValues.tsx` file\n- Update: app dependencies\n- Add: React Context provides to manage Components state\n- Add: Option to change all fields `variant` and `margin` that applied to [TextField](https://material-ui.com/api/text-field/)\n- Add: eslint with [airbnb](https://www.npmjs.com/package/eslint-config-airbnb) style\n- Add: [Checkbox](https://material-ui.com/components/checkboxes/) field\n- Add: `Required` field logic\n\n\u003cbr /\u003e\n\n### [Live Demo](https://react-material-ui-step-form.vercel.app/)\n\n\u003cbr /\u003e\n\n[![Edit react-material-ui-step-form](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/react-material-ui-step-form-ui788?fontsize=14\u0026hidenavigation=1\u0026theme=dark)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fawran5%2Freact-material-ui-step-form","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fawran5%2Freact-material-ui-step-form","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fawran5%2Freact-material-ui-step-form/lists"}