{"id":13805244,"url":"https://github.com/Deadly0/final-form-material-ui","last_synced_at":"2025-05-13T19:30:30.855Z","repository":{"id":32584037,"uuid":"137104536","full_name":"Deadly0/final-form-material-ui","owner":"Deadly0","description":"A set of wrapper components to facilitate using Material UI with Final Form","archived":false,"fork":false,"pushed_at":"2022-12-03T11:33:35.000Z","size":356,"stargazers_count":92,"open_issues_count":31,"forks_count":31,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-04-09T21:24:05.255Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Deadly0.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-06-12T17:15:35.000Z","updated_at":"2023-03-01T04:41:53.000Z","dependencies_parsed_at":"2023-01-14T21:39:37.652Z","dependency_job_id":null,"html_url":"https://github.com/Deadly0/final-form-material-ui","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Deadly0%2Ffinal-form-material-ui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Deadly0%2Ffinal-form-material-ui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Deadly0%2Ffinal-form-material-ui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Deadly0%2Ffinal-form-material-ui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Deadly0","download_url":"https://codeload.github.com/Deadly0/final-form-material-ui/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254012922,"owners_count":21999333,"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":[],"created_at":"2024-08-04T01:00:59.071Z","updated_at":"2025-05-13T19:30:30.489Z","avatar_url":"https://github.com/Deadly0.png","language":"TypeScript","funding_links":[],"categories":["Components"],"sub_categories":[],"readme":"# Final Form Material UI\n[![NPM Version](https://img.shields.io/npm/v/final-form-material-ui.svg?style=flat-square)](https://www.npmjs.com/package/final-form-material-ui)\n[![NPM Downloads](https://img.shields.io/npm/dm/final-form-material-ui.svg?style=flat-square)](https://www.npmjs.com/package/final-form-material-ui)\n\nA set of wrapper components to facilitate using [Material-UI](https://github.com/mui-org/material-ui) with Final Form.\n\n### Available fields\n```jsx\nimport {TextField, Checkbox, Radio, Select, Input} from 'final-form-material-ui';\n```\n\n##### TextField\n```jsx\nimport React from 'react';\nimport {Field} from 'react-final-form';\nimport {TextField} from 'final-form-material-ui';\n\n\u003cField\n    name=\"domain\"\n    type=\"text\"\n    component={TextField}\n    label=\"Domain\"\n    margin=\"normal\"\n    fullWidth\n/\u003e\n```\n\n##### Input\n```jsx\nimport React from 'react';\nimport {Field} from 'react-final-form';\nimport {Input} from 'final-form-material-ui';\nimport InputAdornment from '@material-ui/core/InputAdornment';\n\n\u003cField\n\tname=\"password\"\n\tcomponent={Input}\n\tclassName=\"input\"\n\ttype=\"password\"\n\tplaceholder=\"Password\"\n\tendAdornment={\n\t\t\u003cInputAdornment position=\"end\"\u003e\n\t\t\t\u003cLink className=\"inputLink\" to=\"/forgot\"\u003e\n\t\t\t\tForgot password?\n\t\t\t\u003c/Link\u003e\n\t\t\u003c/InputAdornment\u003e\n\t}\n/\u003e\n```\n\n##### Select\nUse can pass any props from [`Select docs`](https://material-ui.com/api/select/) to `Field`.\nAdditional props for `Field`:\n* `label` - label for select\n* `formControlProps` - object of props for `FormControl` component\n\n```jsx\nimport React from 'react';\nimport {Field} from 'react-final-form';\nimport {Select} from 'final-form-material-ui';\nimport MenuItem from '@material-ui/core/MenuItem';\n\n\u003cField\n    name=\"city\"\n    label=\"Select city\"\n    formControlProps={{className: 'my-class'}}\n    component={Select}\n\u003e\n    \u003cMenuItem value=\"London\"\u003e\n        London\n    \u003c/MenuItem\u003e\n    \n    \u003cMenuItem value=\"Paris\"\u003e\n        Paris\n    \u003c/MenuItem\u003e\n\u003c/Field\u003e\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FDeadly0%2Ffinal-form-material-ui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FDeadly0%2Ffinal-form-material-ui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FDeadly0%2Ffinal-form-material-ui/lists"}