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:

Build A React AI Image Generator With Hugging Face Diffusers

Build a React AI image generator with Hugging Face Diffusers

Build a React-based AI image generator app offline using the Hugging Face Diffusers library and Stable Diffusion XL.

Andrew Baisden
May 29, 2025 ⋅ 10 min read
Gemini 2.5 and the future of AI reasoning for frontend devs

Gemini 2.5 and the future of AI reasoning for frontend devs

Get up to speed on Google’s latest breakthrough with the Gemini 2.5 model and what it means for the future of frontend AI tools.

Chizaram Ken
May 29, 2025 ⋅ 5 min read
Exploring The Top Rust Web Frameworks

Exploring the top Rust web frameworks

In this article, we’ll explore the best Rust frameworks for web development, including Actix Web, Rocket, Axum, warp, Leptos, Cot, and Loco.

Abiodun Solomon
May 28, 2025 ⋅ 11 min read
How To Use The CSS Cursor Property

How to use the CSS cursor property

A single line of CSS can change how users feel about your UI. Learn how to leverage the cursor property to signal intent, improve interaction flow, and elevate accessibility.

Chizaram Ken
May 28, 2025 ⋅ 6 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