Notes

Add Wrappers have a corresponding function export (fieldToTextField, fieldToCheckbox etc.) that encapsulate the logic used to map formik props into the Material-UI shapes

Examples

Upper Casing Field

A simple test input that always uppercases the input

import MuiTextField from '@material-ui/core/TextField';

import { fieldToTextField, TextFieldProps } from 'formik-material-ui';

function UpperCasingTextField(props: TextFieldProps) {

const {

form: { setFieldValue },

field: { name },

} = props;

const onChange = React.useCallback(

event => {

const { value } = event.target;

setFieldValue(name, value ? value.toUpperCase() : '');

},

[setFieldValue, name]

);

return <MuiTextField {...fieldToTextField(props)} onChange={onChange} />;

}