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 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>