Final Form Material UI
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 selectformControlProps- object of props forFormControlcomponent
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>