Introduction

Easily build forms in minutes using the popular React Hook Form library alongside Material-UI.

This package provides a suite of 25+ reusable and customizable components specifically designed to simplify form creation. Each component handles form binding and UI rendering logic internally, minimizing code duplication and giving developers the flexibility to style form form fields to match their website's design guidelines.

You can also find additional components in this package, such as color picker and phone input, that are not currently part of Material UI but can be useful when you need them. More components will be added based on community feedback. Feel free to raise a feature request or report a bug by contacting the author of this package.

Installation

To get started, install the following packages:

• react-hook-form v7
• @mui/material v9
• @mui/icons-material v9
• @nish1896/rhf-mui-components v5

npm install react-hook-form@^7 @mui/material@^9 @mui/icons-material@^9 @nish1896/rhf-mui-components@^5

yarn add react-hook-form@^7 @mui/material@^9 @mui/icons-material@^9 @nish1896/rhf-mui-components@^5

pnpm add react-hook-form@^7 @mui/material@^9 @mui/icons-material@^9 @nish1896/rhf-mui-components@^5

You can refer to the Material UI installation guide for installation instructions.

For date pickers, follow the installation guide to install @mui/x-date-pickers.

Optional: If you are using a third party library for form validation, say joi, make sure to install its npm package along with the @hookform/resolvers package.

npm install @hookform/resolvers@^5 joi@^18

yarn add @hookform/resolvers@^5 joi@^18

pnpm add @hookform/resolvers@^5 joi@^18

Usage with Webpack

This package is ESM-only.

If you're using React with Webpack and encounter module resolution errors, add the following rule to your webpack.config.js:

module.exports = {
  module: {
    rules: [
      {
        test: /\.m?js$/,
        resolve: {
          fullySpecified: false
        }
      }
    ]
  }
}

Version Compatibility

The table below outlines this package's compatibility with various versions of @mui/material and @mui/x-date-pickers.