react-hook-form-mui

For more control and type safety, you can use the standard useForm hook from react-hook-form and pass the control object to the individual element components. This allows you to integrate the elements into your own <form> tag and manage submission manually via handleSubmit.

import {useForm} from 'react-hook-form'
import {TextFieldElement, AutocompleteElement, CheckboxElement, Button} from 'react-hook-form-mui'
import {Stack} from '@mui/material'

function Form() {
    const {control, handleSubmit} = useForm({
      defaultValues: {
        name: '',
        auto: '',
        check: false
      },
    })
    const options = [
      {id: 'one', label: 'One'},
      {id: 'two', label: 'Two'},
      {id: 'three', label: 'Three'},
    ]
    return (
        <form onSubmit={handleSubmit((data) => console.log(data))} noValidate>
          <Stack spacing={2}>
            <TextFieldElement
              name={'name'}
              label={'Name'}
              control={control}
              required
              fullWidth
            />
            <AutocompleteElement
              name={'auto'}
              label={'Autocomplete'}
              control={control}
              options={options}
            />
            <CheckboxElement name={'check'} label={'Check'} control={control} />
            <Button type={'submit'} color={'primary'}>
              Submit
            </Button>
          </Stack>
        </form>
    )
  }
}

The CheckboxElement component integrates a Material-UI Checkbox with react-hook-form. It handles form state, validation rules, error messaging, and value transformation. It is a typesafe component that works with your form's field values and names.

Key features:

• Automatic Integration: Uses useController to connect to react-hook-form via the control prop.
• Value Transformation: Supports an input transform (to convert form state to a checkbox value) and an output transform (to convert checkbox changes back to form state).
• Custom Error Rendering: Use parseError to provide a custom function that returns a ReactNode based on the FieldError.
• Labeling: Supports label and labelProps for FormControlLabel configuration.
• Helper Text: Displays a helperText string or the error message automatically when validation fails.

import CheckboxElement from 'react-hook-form-mui/CheckboxElement';
import { useForm } from 'react-hook-form';

function MyForm() {
  const { control, handleSubmit } = useForm({
    defaultValues: {
      acceptTerms: false,
    },
  });

  return (
    <form onSubmit={handleSubmit(data => console.log(data))}>
      <CheckboxElement
        name="acceptTerms"
        control={control}
        label="I accept the terms and conditions"
        rules={{ required: 'You must accept the terms' }}
      />
      <button type="submit">Submit</button>
    </form>
  );
}

The FormContainer component simplifies setting up a react-hook-form context and a corresponding HTML <form> element. It can either initialize its own form state using useForm props or wrap an existing formContext provided via the formContext prop.

Key Behaviors:

• Automatic Context: If formContext is not provided, FormContainer calls useForm internally and provides the context to its children via FormProvider.
• Submission Handling:
  • If onSuccess is provided (and no custom handleSubmit is passed), FormContainer automatically wraps onSuccess with react-hook-form's handleSubmit logic.
  • If a custom handleSubmit (a FormEventHandler<HTMLFormElement>) is provided, it takes precedence, and onSuccess will be ignored.
• Form Attributes: Use the FormProps prop to pass standard HTML attributes (like className, id, etc.) to the underlying <form> element.
• Validation: The rendered <form> element includes the noValidate attribute by default to prevent browser default validation from interfering with react-hook-form.

Props Reference:

• onSuccess?: A SubmitHandler<T> called when validation succeeds.
• onError?: A SubmitErrorHandler<T> called when validation fails.
• FormProps?: FormHTMLAttributes<HTMLFormElement> to customize the <form> element.
• handleSubmit?: A custom FormEventHandler<HTMLFormElement> for manual submission control.
• formContext?: An existing UseFormReturn<T> instance to be used as the form context.

import { FormContainer } from 'react-hook-form-mui';

interface MyFormData {
  firstName: string;
}

const MyForm = () => {
  return (
    <FormContainer<MyFormData>
      onSuccess={(data) => console.log('Form submitted:', data)}
      onError={(errors) => console.log('Errors:', errors)}
      FormProps={{ className: 'my-custom-form' }}
    >
      {/* Your MUI and react-hook-form-mui fields go here */}
    </FormContainer>
  );
};

The AutocompleteElement component integrates MUI's Autocomplete with react-hook-form. It handles the complex logic of mapping between the form's state (often just an ID or a simple value) and the full option objects required by the MUI Autocomplete component.

Key Features

• Automatic Controller Integration: Uses useController to manage field state, validation rules, and errors.
• Value Transformation: Provides a transform prop to map between the form value (e.g., an ID) and the selected option object.
• Checkbox Support: Enabling showCheckbox automatically renders a checkbox in the option list.
• ID Matching: The matchId prop allows the component to automatically resolve values by looking for an id property on option objects.
• Error Handling: Integrates with FormErrorProvider and supports a custom parseError function to format error messages.

import AutocompleteElement from 'react-hook-form-mui/AutocompleteElement';

// Example usage with a simple array of strings
<AutocompleteElement
  name="category"
  control={control}
  options={['Electronics', 'Books', 'Clothing']}
  label="Select Category"
/>

// Example usage with objects and ID matching
<AutocompleteElement
  name="userId"
  control={control}
  options={[{ id: 1, label: 'Alice' }, { id: 2, label: 'Bob' }]}
  matchId
  label="User"
/>