# mui-rhf-library > A set of configured Material UI form inputs configured with React Hook Form. Latest version **4.0.2** (published 2026-07-13) · MIT license · 0 weekly downloads ## Install ```sh npm install mui-rhf-library pnpm add mui-rhf-library yarn add mui-rhf-library bun add mui-rhf-library ``` ## Health **Score 65/100 (B)** — status: active. Positive: has types; esm support; no vulnerabilities; recently updated; high maintenance score. Warnings: low downloads. ## Facts | | | |---|---| | Version | 4.0.2 | | Published | 2026-07-13 | | First published | 2022-02-10 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | bundled | | Module format | ESM + CommonJS | | Dependencies | 3 | | Unpacked size | 198.5 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 16 | | Author | dashty94 | | Maintainers | dashtyfrya | | Keywords | mui, react, form, yup, react-hook-form, material-ui | ## Links - npm: https://www.npmjs.com/package/mui-rhf-library - Repository: https://github.com/dashty94/mui-rhf-library - Homepage: https://mui-rhf-library.dashty.dev/ - Issues: https://github.com/dashty94/mui-rhf-library/issues - npm.io page: https://npm.io/package/mui-rhf-library ## Dependencies (3) - [@changesets/cli](https://npm.io/package/@changesets/cli.md) ^2.31.0 - [@rollup/plugin-terser](https://npm.io/package/@rollup/plugin-terser.md) ^1.0.0 - [@rollup/plugin-typescript](https://npm.io/package/@rollup/plugin-typescript.md) ^12.3.0 ## Alternatives - [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads - [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads - [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads - [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads - [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads ## Recent versions - 4.0.2 (latest) — 2026-07-13 - 3.1.0-beta-1 (beta) — 2026-05-04 - 4.0.1 — 2026-07-01 - 4.0.0 — 2026-05-25 - 3.1.3 — 2026-05-17 - 3.1.2 — 2026-05-11 - 3.1.1 — 2026-05-11 - 3.1.0 — 2026-05-11 - 3.1.0-beta-0 — 2026-05-04 - 3.0.0 — 2025-09-22 - 2.1.0 — 2025-09-21 - 2.0.2 — 2025-04-17 - 2.0.1 — 2025-04-14 - 2.0.0 — 2024-11-11 - 1.5.12 — 2024-09-25 - … 63 more at https://npm.io/package/mui-rhf-library/versions ## README
mui-rhf-library logo

mui-rhf-library

A set of Material UI form inputs integrated with React Hook Form.
## Installation mui-rhf-library is available as an [npm package](https://www.npmjs.com/package/mui-rhf-library). ```sh // with npm npm install mui-rhf-library // with yarn yarn add mui-rhf-library ``` ## Demo Check the storybook of the library: https://6256bd53e0b94a003aad40bd-rrlcysbvah.chromatic.com/ ## Usage Here is a quick example to get you started: ### Controllers ```jsx import React from 'react'; import { createRoot } from 'react-dom/client'; import { TextFieldController, SelectController } from 'mui-rhf-library'; import { useForm } from 'react-hook-form'; function App() { const { control } = useForm(); return ( <> ); } const container = document.querySelector('#app'); const root = createRoot(container); root.render(); ``` ### Generate form fields You can generate form fields using the `FormFields` component. By default, the component renders form fields using the new Grid component (MUI v7). If you need to use the legacy Grid API for backward compatibility, set the `shouldUseDeprecatedGrid` prop to true. ```jsx import React from 'react'; import { createRoot } from 'react-dom/client'; import { FormFields } from 'mui-rhf-library'; import { useForm } from 'react-hook-form'; import { yupResolver } from '@hookform/resolvers/yup'; import Grid from '@mui/material/Grid'; import * as yup from 'yup'; function App() { const { handleSubmit control, } = useForm(); const fields = [ { fieldType: 'textField', // 'textField' | 'select' | 'autocomplete' | 'checkbox' | 'radioGroup' | 'switch' | 'datePicker' |'custom' name: 'firstName', label: 'firstName', props: { fullWidth: true }, // Props of the field gridProps: { size: { xs: 12, sm: 6 } } // Props of the Grid (Container of the input field) } ]; const handleFormSubmit = (data) => { console.log({ data }); }; return (
); } const container = document.querySelector('#app'); const root = createRoot(container); root.render(); ``` # Documentation ### Form Generation #### Form Fields | Prop | Type | Default | Definition | | ----------------------- | --------- | ------- | ------------------------------------------------------------------------------ | | fields | `Field[]` | | The fields to be generated | | control | `Control` | | The React Hook Form object to register components into React Hook Form. | | shouldUseDeprecatedGrid | boolean | false | Use GridLegacy (MUI v6 and earlier Grid API) instead of the new Grid (MUI v7). | **Field[]**: Array of fields to be generated, where each field is an object with the following properties: - `name`: The name of the field. - `label`: The label of the field. - `fieldType`: The type of the field (`textField`, `select`, `autocomplete`, `checkbox`, `radioGroup`, `switch`, `datePicker`, or `custom`). - `gridProps`: Props of the Grid (Container of the input field), for the available props, please check [Grid2](https://mui.com/material-ui/api/grid2/) or [Grid](https://mui.com/material-ui/api/grid/) (if you want to use deprecated Grid). - `props`: Props of the field, for the available props, checkout related [documentation](https://mui.com/material-ui/all-components/) depends on the `fieldType`. - `hidden`: If the field should be hidden. ### Controllers #### TextField Controller Props of Material UI TextField are also available. | Prop | Type | Default | Definition | | ------------ | ------------------------------ | ------- | ------------------------------------------------------------------------------------------------------- | | name\* | string | | The name of the input | | control\* | `Control` | | The React Hook Form object to register components into React Hook Form. | | defaultValue | any | | The default value of the input that would be injected into React Hook Form Controller and the component | | type | `React.HTMLInputTypeAttribute` | text | The type attribute in an HTML input. | #### Select Controller Props of Material UI Select are also available. | Prop | Type | Default | Definition | | ----------------- | ------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------- | | name\* | string | | The name of the input | | control\* | `Control` | | The React Hook Form object to register components into React Hook Form. | | defaultValue | any | | The default value of the input that would be injected into React Hook Form Controller and the component | | options | `{disabled?: boolean, [key:string]: any}[]` | | The option items that is available to the component. | | optionValue | string | 'value' | Set property of options's value | | optionLabel | string | 'label' | Set property of items’s text label | | loading | boolean | false | Displays linear progress bar | | customOptionLabel | `(option: any) => any` | | Display custom option label | | helperText | `ReactNode` | | Form helper text | #### Autocomplete Controller Props of Material UI Autocomplete are also available. | Prop | Type | Default | Definition | | ----------------- | ---------------------- | ------- | ------------------------------------------------------------------------------------------------------- | | name\* | string | | The name of the input | | control\* | `Control` | | The React Hook Form object to register components into React Hook Form. | | defaultValue\* | any | | The default value of the input that would be injected into React Hook Form Controller and the component | | options\* | `{}[]` | | The option items that is available to the component. | | optionValue | string | 'value' | Set property of options's value | | optionLabel | string | 'label' | Set property of items’s text label | | textFieldProps | `TextFieldProps` | | The props that will be passed to TextField component in the `renderInput` of `AutoComplete`. | | customOptionLabel | `(option: any) => any` | | Display custom option label | #### RadioGroup Controller | Prop | Type | Default | Definition | | -------------- | ---------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------- | | name\* | string | | The name of the input | | label | string | | The label content | | control\* | `Control` | | The React Hook Form object to register components into React Hook Form. | | defaultValue\* | string \| number | | The default value of the input that would be injected into React Hook Form Controller and the component | | options\* | `Options` | | The option items that is available to the component. | | onChange | (event: React.ChangeEvent) => void | | A custom method that gets triggered when the value of the input is changed | | helperText | `ReactNode` | | Form helper text | | onBlur | (event: React.FocusEvent) => void; | | A custom method that gets triggered on blur of the input | #### Checkbox Controller | Prop | Type | Default | Definition | | ------------ | -------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------- | | name\* | string | | The name of the input | | label\* | string | | The label content | | control\* | `Control` | | The React Hook Form object to register components into React Hook Form. | | defaultValue | boolean | | The default value of the input that would be injected into React Hook Form Controller and the component | | helperText | `ReactNode` | | Form helper text | | onBlur | (event: React.FocusEvent) => void; | | A custom method that gets triggered on blur of the input | #### Switch Controller | Prop | Type | Default | Definition | | ---------- | -------------------------------------------------------------------- | ------- | --------------------------------------------------------------------------- | | name\* | string | | The name of the input | | label\* | string | | The label content | | control\* | `Control` | | The React Hook Form object to register components into React Hook Form. | | onChange | (event: React.ChangeEvent, value: string) => void; | | A custom method that gets triggered when the value of the switch is changed | | helperText | `ReactNode` | | Form helper text | | onBlur | (event: React.FocusEvent) => void; | | A custom method that gets triggered on blur of the input | #### DatePicker Controller | Prop | Type | Default | Definition | | ------------ | ---------------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------- | | name\* | string | | The name of the input | | label\* | string | | The label content | | control\* | `Control` | | The React Hook Form object to register components into React Hook Form. | | defaultValue | | | The default value of the input that would be injected into React Hook Form Controller and the component | | onChange | `((value: any, context: PickerChangeHandlerContext) => void)` | | A custom method that gets triggered when the value changes | | helperText | `ReactNode` | | Form helper text | #### Custom Controller | Prop | Type | Default | Definition | | --------------- | ------------- | ------- | ----------------------------------------------------------------------- | | name\* | string | | The name of the input | | control\* | `Control` | | The React Hook Form object to register components into React Hook Form. | | CustomComponent | React.FC | | A custom component that will be rendered. | #### FormFields | Prop | Type | Default | Definition | | --------- | --------------------- | --------- | ----------------------------------------------------------------------- | | fields\* | array of `FieldProps` | | The name of the input | | control\* | | `Control` | The React Hook Form object to register components into React Hook Form. | ## Changelog Please read the [changelog](https://github.com/dashty94/mui-rhf-library/releases) for details of what has changed. --- _Source: https://npm.io/package/mui-rhf-library · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._