Set of modern wrapper components to facilitate using Material UI with React Final Form
npm install mui-rff





Welcome! Thanks for stopping by and taking a look at this project. Let me briefly explain what it does.
In order to integrate React Final Form with a UI component library such as Material UI, you'll need to create a thin wrapper that passes properties between MUI and RFF components. After searching around for who else has done this, you've stumbled across this project.
Sadly, figuring out the nuances of passing properties across multiple components is non-trivial. It takes a lot of trial and error, and hopefully you're writing tests along the way too (hahaha yea, right). Since you are probably in a rush and just want to get onto building features, this repo provides a set of modern and unit tested React components that make it easy to drop into your own Javascript or Typescript project as a small NPM dependency.
Please try things out and review the code first. Take a look at the demo, demo source, demo codesandbox, another codesandbox, and the tests.
One thing to note in the demo is the ability to control the React form rendering. This is what really motivated me to go with RFF. With a small configuration tweak to RFF, it is easy to cut the number of renders down to the bare minimum. This improves performance significantly, especially with larger forms.
I welcome issues to discuss things or even pr's!
If you like us, please ⭐ ⭐ star this project ⭐ ⭐

v6.0+ of mui-rff depends on React 18 or 19.
Beyond the normal react dependencies, you'll need:
bun add mui-rff @mui/material @mui/x-date-pickers final-form react-final-form
If you use the date/time pickers, you'll need:
bun add @date-io/core @date-io/date-fns date-fns
It is unfortunate that so many dependencies need to be installed right now. Pretty sure fixing this will require a lot of work to split everything into separate packages, which seems quite overkill for this project.
I recommend using Yup for the form validation:
bun add yup
MUI-RFF follows the recommended practices for both MUI and RFF. Build your and then insert MUI-RFF components. The hello world example looks like this:
> Note: This project now uses Bun. Install from https://bun.sh and run bun install before development.
``tsx
import React from 'react';
import ReactDOM from 'react-dom';
import { Form } from 'react-final-form';
import { TextField } from 'mui-rff';
interface FormData {
hello: string;
}
interface MyFormProps {
initialValues: FormData;
}
function App() {
return
}
function MyForm(props: MyFormProps) {
const { initialValues } = props;
// yes, this can even be async!
async function onSubmit(values: FormData) {
console.log(values);
}
// yes, this can even be async!
async function validate(values: FormData) {
if (!values.hello) {
return { hello: 'Saying hello is nice.' };
}
return;
}
return (
ReactDOM.render(
`
You'll notice that rendering the component and error handling is all done for you without any additional code. Personally, I find this to be the holy grail of building forms because all the magic is wrapped up into a nice clean interface so that all you care about is providing data and submitting it.
Using MUI-RFF to generate a bunch of form fields is as easy as declaring all the fields and rendering them...
`tsx
const formFields: JSX.Element[] = [
];
{formFields.map((item, idx) => (
{item}
))}
`
See below for more examples and details about how to use this library... if there is something missing or confusing, please ask in the issue tracker.
I generally don't like to break backwards compatibility. There is a number of unit tests which will break if that happens. Expect that major versions will break it and minor/patch versions shouldn't break anything. I like to keep up to date with the latest 3rd party dependencies because in the JS/TS land, code tends to quickly rot. I find that it is easier to fix smaller things than to batch up into a lot of large changes.
The commit history works as a great changelog. Versions are tagged, so it is clear what commits go into each version and I release early/often so that it is easy to identify when issues crop up. I generally try to have descriptive enough commit messages so that things are clear.
Version 2.0 removes the default margin around components as well as the default time/date formats. This means that MUI-RFF does not override any MUI defaults, and you now have to set them on your own. The reason for this change was to allow for better integration with the MUI Theme system. It was a mistake for me to have originally done this, my apologies.
There is now a number of tests which case for this and the demo has been updated.
To get the equivalent margin behavior back, you'll need to add properties to your theme:
`tsx`
const theme = createMuiTheme({
props: {
MuiTextField: {
margin: 'normal',
},
MuiFormControl: {
margin: 'normal',
},
},
});
Alternatively, each component has their own way of specifying these settings. Either as margin="normal" or formFieldProps or textFieldProps depending on the component needs.
To get the equivalent date/time formats back, you'll need to specify them as properties:
`tsx`
name="date"
required={true}
dateFunsUtils={DateFnsUtils}
margin="normal"
variant="inline"
format="yyyy-MM-dd"
/>
I think based on all these instructions you can see why I tried to pick a default!
Yup made some backwards incompatible changes. This probably only affects people who depend on yup directly, but I wanted to make sure that people who depend on this library aren't surprised by this. There are no changes in this library except to support the Yup changes.
This release is compatible with MUI v5 and thus adopts the 5.x version. If you are still using Material UI v4.x, you should keep using an older version, although we do not expect us to maintain it any longer beyond user contributed PRs We have gone out of our way to maintain backwards compatibility in order to lessen the effects of upgrading. We continue to believe that maintaining API compatibility is important. However, there are a few changes that are beyond our control and will require consideration...
The default color for Checkboxes, Radios and Selects and Switches changed from secondary to primary in MUI v5. Set color={secondary} if you do not want the color to change, and you haven't set a color before.
The default variant for TextFields changed from standard to outlined in MUI v5. Set variant={standard} if you want the variant to remain unchanged, and you have not set a variant before. This also affects DatePickers, DateTimePickers, TimePickers and Autocompletes, since they use TextFields internally.
KeyboardDatePicker, KeyboardDateTimePicker and KeyboardTimePicker are deprecated aliases for DatePicker, DateTimePicker and TimePicker respectively. Please make sure to update your code as soon as possible. We will be removing them in a future point release version that we have not decided upon yet (5.1, 5.2, etc...).
Previously, we wrapped your Date/Time components in a MUI documentation. This had the unfortunate effect of blocking upstream declarations of the component. This was reported in issue #634 and is now fixed. The solution is to wrap all of your Date/Time components like this (but do it for all of them, not just one at a time):
`tsx`
You might encounter this error if you do not do this:
Error: Can not find utils in context. It looks like you forgot to wrap your component in LocalizationProvider, or pass dateAdapter prop directly.
In their infinite wisdom, MUI decided to move the DatePickers to another project. So, I've migrated the imports. Since you import mui-rff and not MUI directly, this shouldn't have an effect on you, but I'm going to note it here in the upgrade log.
6.x introduces React 18. All the credit goes to @wadsworj for their excellent contribution!
Previously deprecated Keyboard\* wrappers were removed. Please migrate to the DatePicker/DateTimePicker components.
The dependencies in package.json were updated and unit tests fixed.
There are no other API changes on our end of things.
Thanks to @Kyraminol in #1082, we are now at the latest 1.x version of Yup. Make sure to update your dependencies.
Thanks to @lukas-cc in #1170, we have now switched to MUI 6.x. It should be backwards compatible with 5.x, but we will version higher regardless.
All the components should allow passing MUI configuration properties to them so that they can be easily customized. In the case of RFF and MUI components with deeply nested structures of multiple subcomponents, you can pass the properties in with special top level properties. This is very hard to document fully without making a mess, so please refer to the source code and demos for examples.
`tsx
`
`tsx
import { TextField } from 'mui-rff';
`
If you have a single checkbox, it is rendered without the label (if no label is defined) and the value is boolean. Otherwise, you get an array of values. An example of this is the 'employed' field in the demo.
`tsx
import { Checkboxes, CheckboxData } from 'mui-rff';
const checkboxData: CheckboxData[] = [
{ label: 'Item 1', value: 'item1' },
{ label: 'Item 2', value: 'item2' },
];
`
If you have a single switch, it is rendered without the label (if no label is defined) and the value is boolean. Otherwise, you get an array of values. An example of this is the 'available' field in the demo.
`tsx
import { Switches, SwitchData } from 'mui-rff';
// submits a boolean
// submits an array of values of the toggled switches
const switchData: SwitchData[] = [
{ label: 'Item 1', value: 'item1' },
{ label: 'Item 2', value: 'item2' },
];
`
This example shows that you can inline the configuration data instead of passing it in like in the Checkboxes example above.
`tsx
import { Radios } from 'mui-rff';
name="gender"
required={true}
data={[
{ label: 'Item 1', value: 'item1' },
{ label: 'Item 2', value: 'item2' },
]}
/>;
`
Select allows you to inline the MUI
`tsx
import { Select } from 'mui-rff';
import { MenuItem } from '@material-ui/core';
;
`
You'll need to add dependencies:
bun add @mui/x-date-pickers @date-io/core @date-io/date-fns date-fns
`tsx
import { DatePicker } from 'mui-rff';
import 'date-fns';
import DateFnsUtils from '@date-io/date-fns';
`
You'll need to add dependencies:
bun add @mui/x-date-pickers @date-io/core @date-io/date-fns date-fns
`tsx
import { TimePicker } from 'mui-rff';
import 'date-fns';
import DateFnsUtils from '@date-io/date-fns';
`
You'll need to add dependencies:
bun add @mui/x-date-pickers @date-io/core @date-io/date-fns date-fns
`tsx
import { DateTimePicker } from 'mui-rff';
import 'date-fns';
import DateFnsUtils from '@date-io/date-fns';
`
> Note: Part of the @material-ui/lab dependency.
`tsx
import React from 'react';
import { Checkbox as MuiCheckbox } from '@material-ui/core';
import { Autocomplete } from 'mui-rff';
const autocompleteData = [
{ label: 'Earth', value: 'earth' },
{ label: 'Mars', value: 'mars' },
{ label: 'Venus', value: 'venus' },
{ label: 'Brown Dwarf Glese 229B', value: '229B' },
];
name="planet"
required={true}
options={autocompleteData}
getOptionValue={(option) => option.value}
getOptionLabel={(option) => option.label}
disableCloseOnSelect={true}
renderOption={(option, { selected }) => (
<>
{option.label}
>
)}
multiple
/>;
`
When multiple is true, the initialValues passed into the