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:

Advanced React State Management Using URL Parameters

Advanced React state management using URL parameters

Manage state in React using URL parameters for better performance, SEO, and accessibility while enabling shareable and server-rendered application states.

Rahul Chhodde
Feb 24, 2025 ⋅ 16 min read
The 10 Best React Native Component Libraries You Should Know

The 10 best React Native UI libraries of 2025

UI libraries like React Native Paper and React Native Elements offer pre-developed components that help us deliver our React Native projects faster.

Aman Mittal
Feb 21, 2025 ⋅ 7 min read
top ten docker alternatives worth considering

The 10 best Docker alternatives to consider

Although Docker remains the dominant platform for containerization and container management, it’s good to know about different tools that may work better for certain use cases.

Ayooluwa Isaiah
Feb 21, 2025 ⋅ 13 min read
how to use the ternary operator in javascript

How to use the ternary operator in JavaScript

Add to your JavaScript knowledge of shortcuts by mastering the ternary operator, so you can write cleaner code that your fellow developers will love.

Chizaram Ken
Feb 21, 2025 ⋅ 7 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