final-form-material-ui
TypeScript icon, indicating that this package has built-in type declarations

0.3.0 • Public • Published

Final Form Material UI

NPM Version NPM Downloads

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>

Package Sidebar

Install

npm i final-form-material-ui

Weekly Downloads

587

Version

0.3.0

License

MIT

Unpacked Size

16 kB

Total Files

15

Last publish

Collaborators

  • deadly0