Mohammad Faisal
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:

Developing Web Extensions With Wxt

Developing web extensions with the WXT library

Browser extensions are an important part of the web ecosystem. They make our lives easier and enhance our web browsing […]

Debjyoti Banerjee
May 24, 2024 ⋅ 8 min read
Bulma Css Adoption Guide: Overview, Examples, And Alternatives

Bulma CSS adoption guide: Overview, examples, and alternatives

Explore how Bulma CSS simplifies frontend development with its ease of use and customizable, responsive, pre-designed UI elements.

Timonwa Akintokun
May 23, 2024 ⋅ 10 min read
Using Mountaineer To Develop A React App With Python

Using Mountaineer to develop a React app with Python

Develop a React app with Python using the Mountaineer framework for building a simple app with integrated your frontend and backend database.

Rosario De Chiara
May 23, 2024 ⋅ 7 min read
Enhance CSS View Transitions With Velevette

Enhance CSS view transitions with Velvette

Velvette is a utility library developed to make working with view transitions easier.

David Omotayo
May 22, 2024 ⋅ 9 min read
View all posts

14 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.

Leave a Reply