A react-hook-form wrapper for MUI components that serves as a layer of abstraction to react-hook-form functions
npm install @rhf-kit/mui
× DOCS ×
---
@rhf-kit/mui is a library of Material-UI components integrated with React Hook Form to provide seamless form control to your React apps.
``shell`
npm i @rhf-kit/mui
@rhf-kit/mui requires the following peer dependencies:
- react ^18.2.0react-hook-form
- ^7.60.0@mui/icons-material
- ^7.2.0@mui/material
- ^7.2.0@mui/x-date-pickers
- ^8.7.0
- Form Containers
- FormContainer - A container for form elements that utilizes React Hook Form Context to manage form state.
- Form Buttons
- FormButton - A button element that can be used to submit a form.
- Inputs
- FormAutoCompleteElement - serves as a form wrapper around the MUI Autocomplete component.
- FormCheckboxElement - serves as a form wrapper around the MUI Checkbox component.
- FormCheckboxGroup - serves as a form wrapper around multiple MUI Checkbox components.
- FormPasswordElement - automatically handles password functionality by adding a toggle button to show/hide the password.
- FormRadioElement - serves as a form wrapper around the MUI Radio component.
- FormRadioGroup - serves as a form group wrapper around the MUI RadioGroup component.
- FormRatingElement - serves as a wrapper around the MUI Rating component.
- FormSelectElement - serves as a form wrapper around the MUI Select component.
- FormSliderElement - serves as a wrapper around the MUI Slider component.
- FormSwitchElement - serves as a form wrapper around the MUI Switch component.
- FormTextFieldElement - serves as a form wrapper around the MUI TextField component.
- FormEmailElement - serves as a form wrapper around the FormTextFieldElement component with email validation.
- Date and Time Pickers
- FormDatePickerElement - serves as a form wrapper around the MUI DatePicker component.
- FormDateTimePickerElement - serves as a form wrapper around the MUI DateTimePicker component
- FormTimePickerElement - serves as a form wrapper around the MUI TimePicker component.
- Mobile Inputs
- MobileFormSelectElement - serves as a form wrapper around the MUI NativeSelect component.
`tsx
import { FormContainer, FormButton, FormTextFieldElement } from "@rhf-kit/mui";
interface IFormData {
firstName: string;
}
const Example = () => {
const onSubmit = (data: IFormData) => console.log(data);
const defaultValues: IFormData = {
firstName: "",
};
return (
);
};
``