final-form-material-ui
v0.3.0
Published
A set of wrapper components to facilitate using Material UI with Final Form
Downloads
2,504
Maintainers
Readme
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 forFormControl
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>