@nish1896/rhf-mui-components/README.md

A suite of 20+ production-ready react-hook-form components built with material-ui. Fully typed, tree-shakable, and optimized for enterprise-grade forms.

<p align="center">
  <img src="https://raw.githubusercontent.com/nishkohli96/rhf-mui-components/refs/heads/main/apps/rhf-mui-demo/public/logo.svg" width="200" />
</p>

# @nish1896/rhf-mui-components

![NPM Version](https://img.shields.io/npm/v/%40nish1896%2Frhf-mui-components)
![NPM Downloads](https://img.shields.io/npm/dt/%40nish1896%2Frhf-mui-components)
![NPM Downloads Per Month](https://img.shields.io/npm/dm/%40nish1896%2Frhf-mui-components?color=%23e0e063)
![GitHub Release Date - Published_At](https://img.shields.io/github/release-date/nishkohli96/rhf-mui-components)
![TypeScript Strict](https://img.shields.io/badge/TypeScript-Strict-3178C6?logo=typescript&logoColor=white)
[![Netlify Status](https://api.netlify.com/api/v1/badges/0c4fc578-ed19-4a5a-a3cd-e59fedcdb689/deploy-status)](https://app.netlify.com/sites/rhf-mui-components/deploys)
![CI](https://github.com/nishkohli96/rhf-mui-components/actions/workflows/publish.yml/badge.svg)

**A suite of 20+ reusable Material UI and other third-party components for [react-hook-form](https://react-hook-form.com/) to minimize your time and effort in creating beautiful forms.**

## Features ✨

- Each component is fully functional with just 3-4 props — core logic handled internally.
- Style individual components or apply global styles via [ConfigProvider](https://rhf-mui-components.netlify.app/customization#configprovider).
- Includes well-configured unique components like [RichTextEditor](https://rhf-mui-components.netlify.app/components/misc/RHFRichTextEditor), [Country Select](https://rhf-mui-components.netlify.app/components/mui/RHFCountrySelect) and [File Uploader](https://rhf-mui-components.netlify.app/components/mui/RHFFileUploader), saving development time.
- Comprehensive docs showcasing multiple variations for each component.

---

## 🚀 **Version 4 Coming Soon!**

A major upgrade is on the way — bringing **additional customization features, performance improvements, and deeper MUI integration**.  

Stay tuned for the **v4 release**, expected between early-mid April!

> Please note that support for MUI `v5` will be removed starting from **version 4**. Developers are encouraged to migrate to MUI `v6` or `v7` to access the latest features.

---

## Explore and Get Started 🚀

### Documentation 📖
Access the full documentation for rhf-mui-components, including setup instructions, API references, and examples:

👉 [Documentation Site](https://rhf-mui-components.netlify.app/)

### Interactive Demos 🎮
Try out and experiment with the form components in a live environment:

👉 [Live Demo Examples](https://rhf-mui-components-examples.netlify.app/)

### Sample Apps 🛠️
Clone this repo to explore real-world usage of the package with [Next.js](https://nextjs.org/) and MUI [v5](https://v5.mui.com/material-ui/), [v6](https://v6.mui.com/material-ui/), and [v7](https://v7.mui.com/material-ui/). Each version is set up in its own example app for easy testing and comparison:

👉 [Cloneable Example Repo](https://github.com/nishkohli96/rhf-mui-examples)


## Form Components List

Below is a comprehensive list of all components included in this package, categorized by module:

- **mui**
  - [TextField](https://rhf-mui-components.netlify.app/components/mui/RHFTextField)
  - [NumberInput](https://rhf-mui-components.netlify.app/components/mui/RHFNumberInput)
  - [PasswordInput](https://rhf-mui-components.netlify.app/components/mui/RHFPasswordInput)
  - [Tags Input](https://rhf-mui-components.netlify.app/components/mui/RHFTagsInput)
  - [File Uploader](https://rhf-mui-components.netlify.app/components/mui/RHFFileUploader)
  - [Select](https://rhf-mui-components.netlify.app/components/mui/RHFSelect)
  - [Native Select](https://rhf-mui-components.netlify.app/components/mui/RHFNativeSelect)
  - [Autocomplete](https://rhf-mui-components.netlify.app/components/mui/RHFAutocomplete)
  - [Country Select](https://rhf-mui-components.netlify.app/components/mui/RHFCountrySelect)
  - [Multi Autocomplete](https://rhf-mui-components.netlify.app/components/mui/RHFMultiAutocomplete)
  - [Checkbox](https://rhf-mui-components.netlify.app/components/mui/RHFCheckbox)
  - [Checkbox Group](https://rhf-mui-components.netlify.app/components/mui/RHFCheckboxGroup)
  - [Radio Group](https://rhf-mui-components.netlify.app/components/mui/RHFRadioGroup)
  - [Slider](https://rhf-mui-components.netlify.app/components/mui/RHFSlider)
  - [Switch](https://rhf-mui-components.netlify.app/components/mui/RHFSwitch)
  - [Rating](https://rhf-mui-components.netlify.app/components/mui/RHFRating)

- **mui-pickers**
  - [Date](https://rhf-mui-components.netlify.app/components/mui-pickers/RHFDatePicker)
  - [Time](https://rhf-mui-components.netlify.app/components/mui-pickers/RHFTimePicker)
  - [DateTime](https://rhf-mui-components.netlify.app/components/mui-pickers/RHFDateTimePicker)
- **misc**
  - [Color Picker](https://rhf-mui-components.netlify.app/components/misc/RHFColorPicker)
  - [Rich Text Editor](https://rhf-mui-components.netlify.app/components/misc/RHFRichTextEditor)
  - [Phone Input](https://rhf-mui-components.netlify.app/components/misc/RHFPhoneInput)

**This project has been an individual effort so far, and I’d love to invite collaborators to contribute by adding new components or improving the documentation and examples for existing ones. If you're interested, feel free to reach out at [nishantkohli96@gmail.com](mailto:nishantkohli96@gmail.com).**

You can also check out my [eslint config](https://www.npmjs.com/package/@nish1896/eslint-flat-config), to format and prettify your javascript code.