MUI v9 · React Hook Form · TypeScript

Forms that feel like Material UI — controlled by React Hook Form

A focused set of controllers and a FormFields helper so you ship validated, accessible inputs faster — without re-wiring RHF on every project.

Get started Open Storybook

Why use it

Less boilerplate between MUI and React Hook Form

⚡

Ready-made controllers

Text fields, selects, autocomplete, checkboxes, switches, radio groups, and date pickers — each aligned with MUI props and RHF’s control.

🧩

Declarative FormFields

Describe fields as data — names, types, grid layout, and props — and render a whole form region from one component.

✓

Works with your stack

Pair with Yup or Zod resolvers, Emotion, and MUI’s layout primitives. MIT licensed and built for real apps.

Installation

Install from npm alongside your MUI, Emotion, and React Hook Form peer dependencies.

pnpm

pnpm add mui-rhf-library

npm

npm install mui-rhf-library

yarn

yarn add mui-rhf-library

Quick example

Drop-in controllers

App.tsx

import { TextFieldController, SelectController } from 'mui-rhf-library';
import { useForm } from 'react-hook-form';

export function Example() {
  const { control } = useForm();

  return (
    <>
      <TextFieldController
        control={control}
        name="name"
        defaultValue=""
        label="Full name"
      />
      <SelectController
        name="role"
        label="Role"
        control={control}
        options={[
          { label: 'Admin', value: 'admin' },
          { label: 'Editor', value: 'editor' },
        ]}
      />
    </>
  );
}

Full API tables and migration notes live in the repository README .