final-form-material-ui's Introduction

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>

Recommend Projects