material-ui-react-final-form
v0.1.4
Published
A set of wrapper components to facilitate using Material UI v4.x with Final Form
Downloads
6
Maintainers
Readme
Material UI React Final Form
Important
material-ui-react-final-form is forked from final-form-material-ui, supporting Material-UI v4.
Warning
material-ui-react-final-form is not fully tested yet!
A set of wrapper components to facilitate using Material-UI with Final Form.
Available fields
import {TextField, Checkbox, Radio, Select, Input} from 'material-ui-react-final-form';
TextField
import React from 'react';
import {Field} from 'react-final-form';
import {TextField} from 'material-ui-react-final-form';
<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 'material-ui-react-final-form';
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 forFormControl
component
import React from 'react';
import {Field} from 'react-final-form';
import {Select} from 'material-ui-react-final-form';
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>