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.
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
install the @mui/x-date-pickers
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.
import {useForm} from 'react-hook-form';
import {RhfTextField} from 'mui-rhf-integration';
import {Button} from '@mui/material';
type FieldValues = {
title : string;
};
const MyForm = () : JSX.Element => {
const form = useForm<FieldValues>();
return (
<form
onSubmit={form.handleSubmit(() => {
// No-op
})}
>
<RhfTextField control={form.control} name="title"/>
<Button type="submit">Submit</Button>
</form>
);
};
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.
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.
Wrapper around the TextField
component. Passes all known TextFieldProps
properties down. Allowed value types are
string
, null
and undefined
.
<RhfTextField
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
.
Wrapper around the Checkbox
component. Passes all known CheckboxProps
properties down. Allowed value types are
bool
, null
and undefined
.
<RhfCheckbox
control={form.control}
name="enabled"
/>
In order to display the checkbox with a label, you can utilize the MUI FormControlLabel
component:
<FormControlLabel
control={<RhfCheckbox control={form.control} name="enabled"/>}
label="Enabled"
/>
Wrapper around the Switch
component. Passes all known SwitchProps
properties down. Allowed value types are
bool
, null
and undefined
.
<RhfSwitch
control={form.control}
name="enabled"
/>
In order to display the switch with a label, you can utilize the MUI FormControlLabel
component:
<FormControlLabel
control={<RhfSwitch control={form.control} name="enabled"/>}
label="Enabled"
/>
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.
<RhfCheckboxGroup
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.
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.
<RhfRadioGroup
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.
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.
<RhfAutocomplete
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.
Wrapper around the DatePicker
component. Passes all known DatePickerProps
properties down.
<RhfDatePicker
control={form.control}
name="date"
label="Date"
/>
Wrapper around the DateTimePicker
component. Passes all known DateTimePickerProps
properties down.
<RhfDateTimePicker
control={form.control}
name="dateTime"
label="Date time"
/>
Wrapper around the TimePicker
component. Passes all known TimePickerProps
properties down.
<RhfDateTimePicker
control={form.control}
name="time"
label="Time"
/>