Getting Started

useMuiForm is a lightweight wrapper around react-hook-form that provides seamless integration with Material-UI components. It handles the boilerplate of connecting MUI inputs to react-hook-form while maintaining full access to all react-hook-form features.

Why useMuiForm?

react-hook-form returns props like onChange, onBlur, ref, etc. But MUI components expect:

• error (boolean) instead of checking errors manually
• helperText (string) for displaying error messages
• inputRef instead of ref
• checked for checkboxes instead of value

useMuiForm's enhanced register function automatically provides these MUI-compatible props.

Installation

Choose your package manager:

npm i usemuiform react-hook-form

pnpm add usemuiform react-hook-form

yarn add usemuiform react-hook-form

bun add usemuiform react-hook-form

Quick Start

import { useMuiForm } from 'usemuiform'
import { TextField, Button, Stack } from '@mui/material'

type FormState = {
  email: string
  name: string
}

function MyForm() {
  const { register, handleSubmit } = useMuiForm<FormState>({
    defaultValues: { email: '', name: '' }
  })

  const onSubmit = (data: FormState) => {
    console.log('Form data:', data)
  }

  return (
    <Stack spacing={2}>
      <TextField
        label="Email"
        type="email"
        {...register('email', {
          required: 'Email is required',
          pattern: {
            value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i,
            message: 'Invalid email address'
          }
        })}
      />
      <TextField
        label="Name"
        {...register('name', { required: 'Name is required' })}
      />
      <Button variant="contained" onClick={handleSubmit(onSubmit)}>
        Submit
      </Button>
    </Stack>
  )
}

What You Get

All react-hook-form features work as normal:

• All validation options (required, pattern, min, max, validate, etc.)
• All modes (onChange, onBlur, onSubmit, etc.)
• Schema validation (Zod, Yup, etc.)
• All hook methods (watch, setValue, trigger, reset, etc.)

Plus MUI-compatible props from register:

• error - boolean indicating validation error
• helperText - error message string
• inputRef - proper ref for MUI inputs
• checked - for checkbox/switch components

Next Steps

• Usage with MUI Components - Examples for TextField, Select, Checkbox, DatePicker
• react-hook-form Documentation - For validation, modes, and advanced features
• API Reference - Complete API documentation