A set of wrapper components to facilitate using Material UI with Final Form
Switch branches/tags
Nothing to show
Clone or download
Latest commit 9f20778 Oct 22, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src Added Input wrapper Oct 22, 2018
.gitignore Init, added TextField, Checkbox, Radio. Jun 12, 2018
README.md Added Input wrapper Oct 22, 2018
package.json Added Input wrapper Oct 22, 2018
tsconfig.json Fix import bug. Oct 18, 2018
webpack.config.js Remove babel, fix peerDependencies. Oct 18, 2018
yarn.lock Remove babel, fix peerDependencies. Oct 18, 2018

README.md

Final Form Material UI

NPM Version NPM Downloads

A set of wrapper components to facilitate using material-ui with Final Form

Available fields

import {TextField, Checkbox, Radio, Select, Input} from 'final-form-material-ui';
TextField
import React from 'react';
import {Field} from 'react-final-form';
import {TextField} from 'final-form-material-ui';

<Field
    name="domain"
    type="text"
    component={TextField}
    label="Domain"
    margin="normal"
    fullWidth
/>
Input
import React from 'react';
import {Field} from 'react-final-form';
import {Input} from 'final-form-material-ui';
import InputAdornment from '@material-ui/core/InputAdornment';

<Field
	name="password"
	component={Input}
	className="input"
	type="password"
	placeholder="Password"
	endAdornment={
		<InputAdornment position="end">
			<Link className="inputLink" to="/forgot">
				Forgot password?
			</Link>
		</InputAdornment>
	}
/>
Select

Use can pass any props from Select docs to Field. Additional props for Field:

  • label - label for select
  • formControlProps - object of props for FormControl component
import React from 'react';
import {Field} from 'react-final-form';
import {Select} from 'final-form-material-ui';
import MenuItem from '@material-ui/core/MenuItem';

<Field
    name="city"
    label="Select city"}
    formControlProps={{className: 'my-class'}}
    component={Select}
>
    <MenuItem value="London">
        London
    </MenuItem>
    
    <MenuItem value="Paris">
        Paris
    </MenuItem>
</Field>