React Hook Form integration for MUI with strict TypeScript handling based on form context.
npm install mui-rhf-integration


This is a lightweight integration library for MUI and
React Hook Form with the two goals of being strictly typed with proper generic
definitions as well as being as unopinionated about the usage as possible.
``shell`
npm i mui-rhf-integration
You'll need to have the following peer dependencies installed:
- react@^18@mui/material@^6.0.0
- react-hook-form@^7.29.0
-
Note that in order to use the RhfDatePicker, RhfDateTimePicker and RhfTimePicker components you need to also@mui/x-date-pickers
install the package.
> Note: As having the date and time pickers exported together with all other input types breaks some bundlers like
> Vite when the optional dependency is not installed, these pickers have to be imported from
> mui-rhf-integration/date-picker specifically.
`typescript jsx
import {useForm} from 'react-hook-form';
import {RhfTextField} from 'mui-rhf-integration';
import {Button} from '@mui/material';
import {ReactNode} from "react";
type FieldValues = {
title: string;
};
const MyForm = (): ReactNode => {
const form = useForm
return (
> In contrast to some other integration libraries, you'll notice that you have to pass in the form control to the input
> element. This is preferred over utilizing a form context, as it allows Typescript to immediately verify the name
> passed in to match up with the properties in the
FieldValues type.Input elements
All input elements exported by this library take a
control and name property to link up with the form. They
additionally accept various properties which are passed through to the wrapped components.Where applicable, the wrapper components take care of error handling and displaying error messages as helper text
components below the input elements.
$3
Wrapper around the
TextField component. Passes all known TextFieldProps properties down. Allowed value types are
string, null and undefined.`typescript jsx
control={form.control}
name="title"
label="Title"
helperText="Title of the thing"
/>
`The
RhfTextField additional implements the Material Design recommendation for character counters. To enable them,
pass maxCharacters as property. You should additionally enable maxLength on the inputProps. $3
Wrapper around the
Checkbox component. Passes all known CheckboxProps properties down. Allowed value types are
bool, null and undefined.`typescript jsx
control={form.control}
name="enabled"
/>
`In order to display the checkbox with a label, you can utilize the MUI
FormControlLabel component:`typescript jsx
control={ }
label="Enabled"
/>
`$3
Wrapper around the
Switch component. Passes all known SwitchProps properties down. Allowed value types are
bool, null and undefined.`typescript jsx
control={form.control}
name="enabled"
/>
`In order to display the switch with a label, you can utilize the MUI
FormControlLabel component:`typescript jsx
control={ }
label="Enabled"
/>
`$3
Element which handles multiple checkboxes according to the MUI documentation. The resulting value in the form values is
represented as an array of strings.
Options are defined as an array of objects with a
value and label property.`typescript jsx
control={form.control}
name="colors"
label="Colors"
options={[
{value: 'red', label: 'Red'},
{value: 'green', label: 'Green'},
{value: 'blue', label: 'Blue'},
]}
/>
`You can influence the generated sub components via the root properties as well as the
formLabelProps and
formGroupProps properties.$3
Element which handles multiple radios according to the MUI documentation. The resulting value in the form values is
represented as a string.
Options are defined as an array of objects with a
value and label property.`typescript jsx
control={form.control}
name="color"
label="Color"
options={[
{value: 'red', label: 'Red'},
{value: 'green', label: 'Green'},
{value: 'blue', label: 'Blue'},
]}
/>
`You can influence the generated sub components via the root properties as well as the
formLabelProps and
formGroupProps properties.$3
Wrapper around the
Autocomplete component. Passes all known AutocompleteProps properties down. Allowed value types
are null, undefined and the value type defined by the autocomplete options.`typescript jsx
control={form.control}
name="city"
textFieldProps={{
label: 'City',
}}
options={[
{value: 'berlin', label: 'Berlin'},
{value: 'new_york', label: 'New York'},
{value: 'syndey', label: 'Sydney'},
]}
/>
`Additionally, it accepts the two properties
valueToOption and optionToValue, which are used when you need to map
e.g. objects to IDs and vice versa for your form values.$3
Wrapper around the
DatePicker component. Passes all known DatePickerProps properties down.`typescript jsx
control={form.control}
name="date"
label="Date"
/>
`$3
Wrapper around the
DateTimePicker component. Passes all known DateTimePickerProps properties down.`typescript jsx
control={form.control}
name="dateTime"
label="Date time"
/>
`$3
Wrapper around the
TimePicker component. Passes all known TimePickerProps properties down.`typescript jsx
control={form.control}
name="time"
label="Time"
/>
``