Effortless type-safe Integration of react-hook-form to your Material UI components with a promise to reduce 80% of your boilerplate code.

In this blog, we will discuss how to combine material-ui & react-hook-form & make your team productive and eliminate 80% of your boilerplate code for state management. 

We will use mui-react-hook-form-plus as it was built for effortless type-safe integration between material-ui & react-hook-form

First, let’s review the code comparison part of input elements between Material UI & with mui-react-hook-form-plus:


We combine both with TextField and Controller

Controlled with controller
TextField with Controller

Now let’s look at HookTextField from mui-react-hook-form-plus. We import HookTextField from mui-react-hook-form-plus
We spread registerState to HookTextField from useHookForm & register with the name that we want to store as a key.

import { useHookForm, HookTextField } from 'mui-react-hook-form-plus';

const App = () => {
	const { registerState, handleSubmit } = useHookForm<Person>({
		defaultValues: {
			name: '',

	const onSubmit = (_data: Person) => {
		alert(JSON.stringify(_data, null, 6));

	return (
		<form onSubmit={handleSubmit(onSubmit)}>
			<HookTextField {...registerState('name')} />
			<Button type='submit' variant='contained'>

As we can see, we are using the same pattern known as prop getters and simultaneously reducing the 80% code for the registration, control, and validation.

Let’s compare further,


MUI Select
Select with Controller

HookSelect replaces Select of MUI 

		{ label: 'MALE', value: 'male' },
		{ label: 'FEMALE', value: 'female' },
		{ label: 'OTHERS', value: 'others' },


Mui autoComplete
AutoComplete with Controller

HookAutoComplete replaces AutoComplete of MUI

		options: ['A', 'B', 'C', 'D'],

Complicated Autocomplete

Complicated AutoComplete
Complicated AutoComplete

Simulate a similar behavior with the below example:

    multiple: true,
    options: [
     { label: 'The Dark Night', slug: 'the-dark-night' },
     { label: 'The Last Samurai', slug: 'the-last-samurai' }
    autoHighlight: true,
    isOptionEqualToValue: ({ label }, value) => label === value.label,
    label: 'Movie',
    placeholder: 'The...',


CheckBok MUI
Mui Checkbox + Rect-Hook-Form

Replace it with HookCheckBox:

		label: 'Admin',

Isn’t it awesome! We reduced a ton of code.


Radio MUI
Mui RadioGroup + React-Hook-Form

Let’s replace it with HookRadioButton.

We give fields props for grouping the radios.
You can pass ReactNode for label in fields. It doesn’t necessarily have to be string

		{ label: 'Coke', value: 'coke' },
		{ label: 'Wine', value: 'wine' },


Slider MUI
Mui Slider + React-Hook-Form

Let’s drop a one-liner with HookSlider:

<HookSlider {...registerState('temperature')} />

Validation doesn’t have to be complex. Below is an example of manual validation with material UI and react-hook-form

Validation MUI
Mui complex Error + React-Hook-Form Validation

Now let’s simplify it with mui-react-hook-form-plus. No overhead is required, we just use rules props and give what validation we want to keep

		label: 'Email',
		minLength: {
			value: 2,
			message: 'Must be greater 1 char',
		required: {
			message: 'Email is required',
			value: true,
		pattern: {
			value: /^\S+@\S+\.\S+$/,
			message: 'Please enter a valid email'

Up until now, we discovered many components and compared the boilerplate code that we can reduce while using mui-react-hook-form-plus.

There are more components that we haven’t covered yet.

Available Input Components

  1. <HookToggleButtonGroup />
  2. <HookAutoComplete />
  3. <HookRadioButton />
  4. <HookTextField />
  5. <HookCheckBox />
  6. <HookSelect />
  7. <HookSwitch />
  8. <HookRating />
  9. <HookSlider />

Check out the Inputs Demo


  1. <HookDatePicker />
  2. <HookStaticDatePicker />
  3. <HookDesktopDatePicker />
  4. <HookMobileDatePicker />

Check out DatePicker Demo


  1. <HookDateTimePicker />
  2. <HookStaticDateTimePicker />
  3. <HookDesktopDateTimePicker />
  4. <HookMobileDateTimePicker />

Check out DateTimePicker Demo


  1. <HookTimePicker />
  2. <HookStaticTimePicker />
  3. <HookDesktopTimePicker />
  4. <HookMobileTimePicker />

Check out TimePicker Demo

Form Hooks

  1. useHookForm
  2. useHookFormContext

Context Providers

  1. HookFormProvider

Check out the FormProvider Demo

Effortless Hooks

As we have promised with the project name with adding a -plus to mui-react-hook-form-plus.

We delivered it. A few effortless hooks to make your mui journey special.

We provided the same pattern as register and propGetters as the form components

Those Hooks are:

  1. useMenu
  2. usePagination
  3. useAccordion
  4. useTabs
  5. useDialog
  6. useBackdrop
  7. useBottomNavigation

And more hooks are in the lab 🧪 preparing to be released. So, stay tuned.

Check out Hooks Demo

To conclude, by comparing the above solutions we can come to the point that mui-react-hook-form-plus can make our material UI journey special. We can now focus more on building beautiful UI. More on validation will be coming soon. It does not cover the full part. Also how we can leverage effortless custom hooks from `mui-react-hook-form-plus` will be dropping soon hence stay tuned for more updates.