2023-06-08
2977
#react
Mohammad Faisal
62692
Jun 8, 2023 ⋅ 10 min read

Using Material UI with React Hook Form

Mohammad Faisal I am a full-stack software engineer working with the MERN stack. Also, I am a blogger in my free time and love to write about various technical topics.

Recent posts:

chrome dev tools for API mocking

How to use Chrome DevTools for API mocking

API Mocking allows frontend developers to simulate the responses and behaviors of a live API, such as error handling, timeouts, and specific status codes in real time. Chrome DevTools Local Overrides make this even easier.

Emmanuel John
Feb 4, 2025 ⋅ 7 min read
How To Implement View Transitions In Multi-Page Apps

How to implement view transitions in multi-page apps

Enhance navigation in multi-page apps using the View Transition API, CSS, and JavaScript — no heavy frameworks needed.

Rob O'Leary
Jan 31, 2025 ⋅ 12 min read
net maui 9 blazor

.NET MAUI 9 brings new improvements to Blazor

Developers can take advantage of the latest release of .NET MAUI 9 to build better user experiences that more accurately react and respond to changes in their applications.

Andrew Evans
Jan 30, 2025 ⋅ 6 min read
Implementing React Islands In Static Web Applications

Implementing React Islands in static web applications

React Islands integrates React into legacy codebases, enabling modernization without requiring a complete rewrite.

Nelson Michael
Jan 28, 2025 ⋅ 4 min read
View all posts

16 Replies to "Using Material UI with React Hook Form"

  1. I changed the FormInputText because there is no code in the return.

    Sharing my result. Thank u. Nice article!

    import TextField from ‘@mui/material/TextField’;
    import { Controller } from “react-hook-form”;

    export const FormInputText = ({ name, control, label }) => {

    return (

    }
    />
    )

    }

  2. Thanks for the writeup. I’m a bit baffled on your approach with hook-form, how come you opted to make the control approach for these? I would have preferred the register method much more for known frameworks that behave nicely with hook-form. Sure, in case where specific control is needed I see the controller as the choice, but for most of the examples register would have entirely sufficed. Once more, thanks for the writeup, I seem to return to your texts often enough.

    1. What I’ve seen is that with Material UI you can’t do register because MUI components are controlled components, so you have to wrap a controller around them. It feels really messy to do it to be honest.

  3. Can’t we just create a simple FormField component instead of creating FormInputText, FormInputSlider etc. ?

  4. Thank you for the published content. It is extremely important because this is a difficulty that many devs face when controlling inputs from other libraries.

  5. This is really helpful thanks. One thing i want to mention that Autocomplete is missed. which is most important in my project. Also I work with custom component. so set controller into main component only. but what if we no need react-hook-form in some places, in my case parent component stick with controller. so have to mention it in all forms.

  6. Great article! Could you please provide the type definition for FormInputProps? It’s not available in the code samples above.

      1. Just to complement, to use the most appropriate typing:

        import { type Control, Controller, type FieldValues } from ‘react-hook-form’

        interface FormInputProps {
        name: string
        control?: Control
        label?: string
        }

Leave a Reply