npmpackage.info

Gathering detailed insights and metrics for react-hook-form-mui

Other packages similar to react-hook-form-mui

mui-react-hook-form-plus

1.5.1

The complete type-safe material-ui and react-hook-form combo and beyond with simple api

mui-form-hook

1.0.2

An ui library base on MUI for React front-end apps.

@nwon/react-mui-hook-form

2.0.12

Making react forms easy - A connection of MUI and React Hook Form

@availity/mui-controlled-form

1.4.0

Availity MUI/react-hook-form controlled form components - part of the @availity/element design system

Gathering detailed insights and metrics for react-hook-form-mui

react-hook-form-mui - 7.6.2 | npmpackage.info

react-hook-form-mui

Material-UI form components ready to use with react-hook-form

7.6.2

618

MIT

JavaScript

487.79 kB

Installations

npm install react-hook-form-mui

Developer Guide

BETA

Typescript

No

Module System

CommonJS, ESM

Min. Node Version

>=14

Node Version

22.13.1

NPM Version

9.6.6 Pull Requests

Open

5

Total

151

Closed

27

Merged

119

Issues

Open

27

Total

213

Closed

186

Releases

MUI pickers version 6 and some more improvements

6.0.0

Updated on Mar 30, 2023

Add readonly prop to DatePicker and DateTimePicker

5.10.2

Updated on Nov 18, 2022

Add DateTimePicker

5.8.0

Updated on Nov 14, 2022

Support small prop on MultiSelectElement

5.7.2

Updated on Sep 15, 2022

New Component

5.7.0

Updated on Aug 30, 2022

Restructure Repo as Monorepo and re-export react-hook-form API

5.6.0

Updated on Aug 29, 2022

View All 32 releases

Languages

JavaScript

TypeScript

HTML

JavaScript (98.64%)

TypeScript (1.09%)

HTML (0.28%)

Developer

dohomi

Download Statistics

Total Downloads

Last Day

Last Week

Last Month

Last Year

GitHub Statistics

MIT License

618 Stars

569 Commits

124 Forks

8 Watchers

7 Branches

42 Contributors

Updated on Jun 27, 2025

Maintainers

View All 42 Contributors

Package Meta Information

Latest Version

7.6.2

Package Id

react-hook-form-mui@7.6.2

Unpacked Size

487.79 kB

Size

80.57 kB

File Count

NPM Version

9.6.6

Node Version

22.13.1

Published on

Jun 19, 2025

Total Downloads

Cumulative downloads

Total Downloads

NaN

Last Day

NaN

Compared to previous day

Last Week

NaN

Compared to previous week

Last Month

NaN

Compared to previous month

Last Year

NaN

Compared to previous year

Weekly Downloads

Monthly Downloads

Yearly Downloads

Material-UI and react-hook-form combined

GitHub

About this project

This project simplifies the use of react-hook-form and Material-UI. It provides opinionated use cases with following components:

FormContainer
AutocompleteElement
TextFieldElement
SelectElement
MultiSelectElement
RadioButtonGroup
CheckboxButtonGroup
CheckboxElement
SwitchElement
PasswordElement
DatePickerElement
SliderElement
ToggleButtonGroupElement

Please check out the demo for the element overview.

How to use it

Installation

1# npm install react-hook-form react-hook-form-mui
2# yarn add react-hook-form react-hook-form-mui

This package utilizes pickers and icons of the MUI ecosystem. If you make use of it add them to your app.

1#  npm install @mui/x-date-pickers @mui/icons-material
2#  yarn add @mui/x-date-pickers @mui/icons-material

Important

From versions >= 3.x of this package MUI v5 is in use. Versions of 1 & 2 using Material-UI v4

Your component code

1import {FormContainer, TextFieldElement} from 'react-hook-form-mui'
2
3function Form() {
4    return (
5        <FormContainer
6            defaultValues={{name: ''}}
7            onSuccess={data => console.log(data)}
8        >
9            <TextFieldElement name="name" label="Name" required/>
10        </FormContainer>
11    )
12}

You can have a look at the example folder which sets up NextJS with react-hook-form-mui

FormContainer creates `formContext`

The <FormContainer /> wires up a form and you can create sub-components which either make use of useFormContext() | useWatch() to react to form values.

Demo

Check out Storybook: Demo

You will find examples and use cases.

With Datepicker

If you are using the DatepickerElement keep in mind that you have to wrap your form with a provider:

Examples for Dayjs or DateFns provider (used in the demo):

Troubleshooting

Issues if context is undefined (useWatch)

For convenient reasons this package is re-exporting react-hook-form which is especially required if you have context issues of React.

1import {useWatch} from 'react-hook-form-mui' // instead of react-hook-form
2
3const MySubmit = () => {
4    const value = useWatch('fieldName')
5    return (
6        <Button disabled={!value}>Submit</Button>
7    )
8}

Bundle

This project uses tsup to wrap the package for npm.

No vulnerabilities found.

10

Dangerous-Workflow

Determines if the project's GitHub Action workflows avoid dangerous patterns.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

10

License

Determines if the project has defined a license.

9

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

7

Maintained

Determines if the project is "actively maintained".

0

Token-Permissions

Determines if the project's workflows follow the principle of least privilege.

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Security-Policy

Determines if the project has published a security policy.

0

Branch-Protection

Determines if the default and release branches are protected with GitHub's branch protection settings.

0

Pinned-Dependencies

Determines if the project has declared and pinned the dependencies of its build process.

0

Fuzzing

Determines if the project uses fuzzing.

0

SAST

Determines if the project uses static code analysis.

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Score

4

/10

Last Scanned on 2025-07-07

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More

Other packages similar to react-hook-form-mui

Other packages similar to react-hook-form-mui

react-hook-form-mui

Installations

Developer Guide

No

CommonJS, ESM

>=14

22.13.1

9.6.6

Pull Requests

5

151

27

119

Issues

27

213

186

Releases

Languages

Developer

Download Statistics

GitHub Statistics

Maintainers

Package Meta Information

Total Downloads

NaN

Weekly Downloads

Monthly Downloads

Yearly Downloads

Peer Dependencies

Dev Dependencies

Material-UI and react-hook-form combined

About this project

How to use it

Installation

Important

Your component code

FormContainer creates formContext

Demo

With Datepicker

Troubleshooting

Issues if context is undefined (useWatch)

Bundle

10

10

10

9

7

0

0

0

0

0

0

0

0

4

/10

FormContainer creates `formContext`