{"id":22382532,"url":"https://github.com/jcoreio/final-form-material-ui","last_synced_at":"2025-08-12T12:34:19.789Z","repository":{"id":78315272,"uuid":"297510144","full_name":"jcoreio/final-form-material-ui","owner":"jcoreio","description":"our material-ui bindings for react-final-form","archived":false,"fork":false,"pushed_at":"2022-06-17T20:07:05.000Z","size":444,"stargazers_count":0,"open_issues_count":1,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-26T19:45:48.019Z","etag":null,"topics":["final-form","material-ui","react-final-form"],"latest_commit_sha":null,"homepage":null,"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/jcoreio.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","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":"2020-09-22T02:09:50.000Z","updated_at":"2022-06-07T17:41:30.000Z","dependencies_parsed_at":"2023-03-12T04:07:54.849Z","dependency_job_id":null,"html_url":"https://github.com/jcoreio/final-form-material-ui","commit_stats":null,"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"purl":"pkg:github/jcoreio/final-form-material-ui","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jcoreio%2Ffinal-form-material-ui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jcoreio%2Ffinal-form-material-ui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jcoreio%2Ffinal-form-material-ui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jcoreio%2Ffinal-form-material-ui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jcoreio","download_url":"https://codeload.github.com/jcoreio/final-form-material-ui/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jcoreio%2Ffinal-form-material-ui/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":270061508,"owners_count":24520311,"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","status":"online","status_checked_at":"2025-08-12T02:00:09.011Z","response_time":80,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["final-form","material-ui","react-final-form"],"created_at":"2024-12-05T00:13:22.293Z","updated_at":"2025-08-12T12:34:19.778Z","avatar_url":"https://github.com/jcoreio.png","language":"TypeScript","readme":"# @jcoreio/final-form-material-ui\n\n[![CircleCI](https://circleci.com/gh/jcoreio/final-form-material-ui.svg?style=svg)](https://circleci.com/gh/jcoreio/final-form-material-ui)\n[![Coverage Status](https://codecov.io/gh/jcoreio/final-form-material-ui/branch/master/graph/badge.svg)](https://codecov.io/gh/jcoreio/final-form-material-ui)\n[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)\n[![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/)\n[![npm version](https://badge.fury.io/js/%40jcoreio%2Ffinal-form-material-ui.svg)](https://badge.fury.io/js/%40jcoreio%2Ffinal-form-material-ui)\n\nThis is mostly for our own internal use at JCore Systems so I'm not putting a lot of effort into this documentation, here is a bulk example:\n\n```tsx\nimport * as React from 'react'\nimport { render } from 'react-dom'\nimport { Form, Field } from 'react-final-form'\nimport TextField from '../src/TextField'\nimport Button from '@material-ui/core/Button'\nimport Radio from '@material-ui/core/Radio'\nimport Checkbox from '../src/Checkbox'\nimport Switch from '../src/Switch'\nimport FormControl from '../src/FormControl'\nimport FormControlLabel from '@material-ui/core/FormControlLabel'\nimport FormGroup from '@material-ui/core/FormGroup'\nimport RadioGroup from '../src/RadioGroup'\nimport Autocomplete from '../src/Autocomplete'\n\nconst validateUsername = (username: string | undefined) =\u003e\n  username !== 'andy' ? 'must be andy' : undefined\n\nconst required = (value: string | undefined) =\u003e\n  !value?.trim() ? 'is required' : undefined\n\nconst handleSubmit = ({ password }: { username: string; password: string }) =\u003e {\n  if (password !== 'password') return { password: 'must be password' }\n}\n\nconst top100Films = [\n  { title: 'The Shawshank Redemption', year: 1994 },\n  { title: 'The Godfather', year: 1972 },\n  { title: 'The Godfather: Part II', year: 1974 },\n  { title: 'The Dark Knight', year: 2008 },\n  { title: '12 Angry Men', year: 1957 },\n  { title: \"Schindler's List\", year: 1993 },\n  { title: 'Pulp Fiction', year: 1994 },\n  { title: 'The Lord of the Rings: The Return of the King', year: 2003 },\n  { title: 'The Good, the Bad and the Ugly', year: 1966 },\n  { title: 'Fight Club', year: 1999 },\n  { title: 'The Lord of the Rings: The Fellowship of the Ring', year: 2001 },\n  { title: 'Star Wars: Episode V - The Empire Strikes Back', year: 1980 },\n  { title: 'Forrest Gump', year: 1994 },\n  { title: 'Inception', year: 2010 },\n  { title: 'The Lord of the Rings: The Two Towers', year: 2002 },\n  { title: \"One Flew Over the Cuckoo's Nest\", year: 1975 },\n  { title: 'Goodfellas', year: 1990 },\n  { title: 'The Matrix', year: 1999 },\n  { title: 'Seven Samurai', year: 1954 },\n  { title: 'Star Wars: Episode IV - A New Hope', year: 1977 },\n  { title: 'City of God', year: 2002 },\n  { title: 'Se7en', year: 1995 },\n  { title: 'The Silence of the Lambs', year: 1991 },\n  { title: \"It's a Wonderful Life\", year: 1946 },\n  { title: 'Life Is Beautiful', year: 1997 },\n  { title: 'The Usual Suspects', year: 1995 },\n  { title: 'Léon: The Professional', year: 1994 },\n  { title: 'Spirited Away', year: 2001 },\n  { title: 'Saving Private Ryan', year: 1998 },\n  { title: 'Once Upon a Time in the West', year: 1968 },\n  { title: 'American History X', year: 1998 },\n  { title: 'Interstellar', year: 2014 },\n  { title: 'Casablanca', year: 1942 },\n  { title: 'City Lights', year: 1931 },\n  { title: 'Psycho', year: 1960 },\n  { title: 'The Green Mile', year: 1999 },\n  { title: 'The Intouchables', year: 2011 },\n  { title: 'Modern Times', year: 1936 },\n  { title: 'Raiders of the Lost Ark', year: 1981 },\n  { title: 'Rear Window', year: 1954 },\n  { title: 'The Pianist', year: 2002 },\n  { title: 'The Departed', year: 2006 },\n  { title: 'Terminator 2: Judgment Day', year: 1991 },\n  { title: 'Back to the Future', year: 1985 },\n  { title: 'Whiplash', year: 2014 },\n  { title: 'Gladiator', year: 2000 },\n  { title: 'Memento', year: 2000 },\n  { title: 'The Prestige', year: 2006 },\n  { title: 'The Lion King', year: 1994 },\n  { title: 'Apocalypse Now', year: 1979 },\n  { title: 'Alien', year: 1979 },\n  { title: 'Sunset Boulevard', year: 1950 },\n  {\n    title:\n      'Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb',\n    year: 1964,\n  },\n  { title: 'The Great Dictator', year: 1940 },\n  { title: 'Cinema Paradiso', year: 1988 },\n  { title: 'The Lives of Others', year: 2006 },\n  { title: 'Grave of the Fireflies', year: 1988 },\n  { title: 'Paths of Glory', year: 1957 },\n  { title: 'Django Unchained', year: 2012 },\n  { title: 'The Shining', year: 1980 },\n  { title: 'WALL·E', year: 2008 },\n  { title: 'American Beauty', year: 1999 },\n  { title: 'The Dark Knight Rises', year: 2012 },\n  { title: 'Princess Mononoke', year: 1997 },\n  { title: 'Aliens', year: 1986 },\n  { title: 'Oldboy', year: 2003 },\n  { title: 'Once Upon a Time in America', year: 1984 },\n  { title: 'Witness for the Prosecution', year: 1957 },\n  { title: 'Das Boot', year: 1981 },\n  { title: 'Citizen Kane', year: 1941 },\n  { title: 'North by Northwest', year: 1959 },\n  { title: 'Vertigo', year: 1958 },\n  { title: 'Star Wars: Episode VI - Return of the Jedi', year: 1983 },\n  { title: 'Reservoir Dogs', year: 1992 },\n  { title: 'Braveheart', year: 1995 },\n  { title: 'M', year: 1931 },\n  { title: 'Requiem for a Dream', year: 2000 },\n  { title: 'Amélie', year: 2001 },\n  { title: 'A Clockwork Orange', year: 1971 },\n  { title: 'Like Stars on Earth', year: 2007 },\n  { title: 'Taxi Driver', year: 1976 },\n  { title: 'Lawrence of Arabia', year: 1962 },\n  { title: 'Double Indemnity', year: 1944 },\n  { title: 'Eternal Sunshine of the Spotless Mind', year: 2004 },\n  { title: 'Amadeus', year: 1984 },\n  { title: 'To Kill a Mockingbird', year: 1962 },\n  { title: 'Toy Story 3', year: 2010 },\n  { title: 'Logan', year: 2017 },\n  { title: 'Full Metal Jacket', year: 1987 },\n  { title: 'Dangal', year: 2016 },\n  { title: 'The Sting', year: 1973 },\n  { title: '2001: A Space Odyssey', year: 1968 },\n  { title: \"Singin' in the Rain\", year: 1952 },\n  { title: 'Toy Story', year: 1995 },\n  { title: 'Bicycle Thieves', year: 1948 },\n  { title: 'The Kid', year: 1921 },\n  { title: 'Inglourious Basterds', year: 2009 },\n  { title: 'Snatch', year: 2000 },\n  { title: '3 Idiots', year: 2009 },\n  { title: 'Monty Python and the Holy Grail', year: 1975 },\n]\n\nrender(\n  \u003cForm onSubmit={handleSubmit}\u003e\n    {({ handleSubmit, ...state }) =\u003e (\n      \u003cform onSubmit={handleSubmit}\u003e\n        \u003cField\n          label=\"Username\"\n          name=\"username\"\n          type=\"text\"\n          component={TextField}\n          validate={validateUsername}\n        /\u003e\n        \u003cField\n          name=\"password\"\n          label=\"Password\"\n          type=\"password\"\n          component={TextField}\n          validate={required}\n        /\u003e\n        \u003cField name=\"nakedCheckbox\" type=\"checkbox\" component={Checkbox} /\u003e\n        \u003cField name=\"nakedCheckbox\" type=\"checkbox\" component={Switch} /\u003e\n        \u003cdiv\u003e\n          \u003cField\n            name=\"toppings\"\n            label=\"Toppings\"\n            component={FormControl}\n            validate={value =\u003e\n              value?.length \u003e 2 ? 'pick two or less' : undefined\n            }\n          \u003e\n            \u003cFormGroup\u003e\n              \u003cFormControlLabel\n                label=\"Pickles\"\n                control={\n                  \u003cField\n                    name=\"toppings\"\n                    value=\"pickles\"\n                    type=\"checkbox\"\n                    component={Checkbox}\n                  /\u003e\n                }\n              /\u003e\n              \u003cFormControlLabel\n                label=\"Onions\"\n                control={\n                  \u003cField\n                    name=\"toppings\"\n                    value=\"onions\"\n                    type=\"checkbox\"\n                    component={Checkbox}\n                  /\u003e\n                }\n              /\u003e\n              \u003cFormControlLabel\n                label=\"Tomatoes\"\n                control={\n                  \u003cField\n                    name=\"toppings\"\n                    value=\"tomatoes\"\n                    type=\"checkbox\"\n                    component={Checkbox}\n                  /\u003e\n                }\n              /\u003e\n            \u003c/FormGroup\u003e\n          \u003c/Field\u003e\n          \u003cField name=\"size\" label=\"Size\" component={FormControl}\u003e\n            \u003cField name=\"size\" type=\"radio\" component={RadioGroup}\u003e\n              \u003cFormControlLabel\n                value=\"small\"\n                label=\"Small\"\n                control={\u003cRadio /\u003e}\n              /\u003e\n              \u003cFormControlLabel\n                value=\"medium\"\n                label=\"Medium\"\n                control={\u003cRadio /\u003e}\n              /\u003e\n              \u003cFormControlLabel\n                value=\"large\"\n                label=\"Large\"\n                control={\u003cRadio /\u003e}\n              /\u003e\n            \u003c/Field\u003e\n          \u003c/Field\u003e\n        \u003c/div\u003e\n        \u003cField\n          component={Autocomplete}\n          name=\"film\"\n          id=\"free-solo-demo\"\n          freeSolo\n          options={top100Films.map(option =\u003e option.title)}\n          renderInput={params =\u003e \u003cTextField {...params} label=\"Film\" /\u003e}\n        /\u003e\n        \u003cButton variant=\"contained\" color=\"primary\" type=\"submit\"\u003e\n          Submit\n        \u003c/Button\u003e\n        \u003cpre\u003e{JSON.stringify(state, null, 2)}\u003c/pre\u003e\n      \u003c/form\u003e\n    )}\n  \u003c/Form\u003e,\n  document.getElementById('root') as any\n)\n```\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjcoreio%2Ffinal-form-material-ui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjcoreio%2Ffinal-form-material-ui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjcoreio%2Ffinal-form-material-ui/lists"}