Type Definitions

TypeScript type definitions for useMuiForm. Most types are re-exported from react-hook-form, with MUI-specific additions.

RegisterMuiReturn

The return type of the enhanced register function. This is the key type that makes useMuiForm unique.

type RegisterMuiReturn<TFieldValues, TName> =
  PathValue<TFieldValues, TName> extends boolean
    ? RegisterMuiReturnBoolean<TName>
    : RegisterMuiReturnValue<TFieldValues, TName>

This is a conditional type that returns different props depending on whether the field is a boolean (checkbox) or not.

RegisterMuiReturnValue

For non-boolean fields (text inputs, selects, etc.):

type RegisterMuiReturnValue<TFieldValues, TName> = {
  name: TName
  onChange?: (event: any) => void
  onBlur: (event: any) => void
  error: boolean
  helperText: string
  inputRef: (instance: any) => void

  value?: PathValue<TFieldValues, TName>

  // Never present for non-boolean fields
  checked?: never
}

RegisterMuiReturnBoolean

For boolean fields (checkboxes):

type RegisterMuiReturnBoolean<TName> = {
  name: TName
  onChange?: (event: any) => void
  onBlur: (event: any) => void
  error: boolean
  helperText: string
  inputRef: (instance: any) => void

  checked?: boolean

  // Never present for boolean fields
  value?: never
}

Usage Example

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

type FormState = {
  email: string
  subscribe: boolean
}

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

  // TypeScript infers RegisterMuiReturnValue for string field
  const emailProps = register('email')
  // emailProps has: value, error, helperText, etc.

  // TypeScript infers RegisterMuiReturnBoolean for boolean field
  const subscribeProps = register('subscribe')
  // subscribeProps has: checked, error, helperText, etc.

  return (
    <>
      <TextField {...emailProps} />
      <Checkbox {...subscribeProps} />
    </>
  )
}

UseMuiFormReturn

The return type of the useMuiForm hook. Extends react-hook-form's UseFormReturn with MUI-specific methods.

type UseMuiFormReturn<TFieldValues> = UseFormReturn<TFieldValues> & {
  // MUI-enhanced register function
  register: <Name extends Path<TFieldValues>>(
    name: Name,
    options?: RegisterOptions<TFieldValues, Name>
  ) => RegisterMuiReturn<TFieldValues, Name>

  // Access to original react-hook-form register
  registerHtml: UseFormRegister<TFieldValues>
}

All other methods and properties are inherited from react-hook-form's UseFormReturn.

Re-exported Types

The following types are re-exported from react-hook-form for convenience:

FieldValues

Base type for form state objects.

import type { FieldValues } from 'usemuiform'

See react-hook-form FieldValues.

Path

Type-safe field name paths including dot-notation for nested fields.

import type { Path } from 'usemuiform'

type FormState = {
  user: {
    name: string
    email: string
  }
}

// Valid paths: 'user', 'user.name', 'user.email'
type ValidPaths = Path<FormState>

See react-hook-form Path.

PathValue

Get the type of a value at a specific path.

import type { PathValue } from 'usemuiform'

type FormState = {
  user: {
    name: string
    age: number
  }
}

type NameType = PathValue<FormState, 'user.name'> // string
type AgeType = PathValue<FormState, 'user.age'>   // number

See react-hook-form PathValue.

UseFormProps

Configuration options for useMuiForm.

import type { UseFormProps } from 'usemuiform'

See react-hook-form UseFormProps.

RegisterOptions

Validation and configuration options for the register function.

import type { RegisterOptions } from 'usemuiform'

const options: RegisterOptions<FormState, 'email'> = {
  required: 'Email is required',
  pattern: {
    value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i,
    message: 'Invalid email address'
  }
}

See react-hook-form RegisterOptions.

FieldErrors

Type for form validation errors.

import type { FieldErrors } from 'usemuiform'

const { formState } = useMuiForm<FormState>()
const errors: FieldErrors<FormState> = formState.errors

See react-hook-form FieldErrors.

Complete Example with Types

import { useMuiForm, type RegisterMuiReturn } from 'usemuiform'
import { TextField, Checkbox, FormControlLabel } from '@mui/material'

type FormState = {
  username: string
  email: string
  age: number
  acceptTerms: boolean
}

function TypedForm() {
  const { register, handleSubmit } = useMuiForm<FormState>({
    defaultValues: {
      username: '',
      email: '',
      age: 0,
      acceptTerms: false
    }
  })

  // Type is automatically inferred
  const usernameProps = register('username', { required: 'Required' })

  // Can also explicitly type if needed
  const emailProps: RegisterMuiReturn<FormState, 'email'> = register('email')

  const onSubmit = (data: FormState) => {
    // data is fully typed
    console.log(data.username) // string
    console.log(data.age)      // number
    console.log(data.acceptTerms) // boolean
  }

  return (
    <form>
      <TextField label="Username" {...usernameProps} />
      <TextField label="Email" {...emailProps} />
      <TextField
        label="Age"
        type="number"
        {...register('age', {
          min: { value: 18, message: 'Must be 18+' }
        })}
      />
      <FormControlLabel
        control={<Checkbox {...register('acceptTerms')} />}
        label="Accept Terms"
      />
    </form>
  )
}

Type Definitions

Type Definitions

RegisterMuiReturn

RegisterMuiReturnValue

RegisterMuiReturnBoolean

Usage Example

UseMuiFormReturn

Re-exported Types

FieldValues

Path

PathValue

UseFormProps

RegisterOptions

FieldErrors

Complete Example with Types

See Also

On this page