× 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.

Install

npm i @rhf-kit/mui

@rhf-kit/mui requires the following peer dependencies:

• react ^18.2.0
• react-hook-form ^7.51.3
• @mui/icons-material ^5.15.15
• @mui/material ^5.15.15
• @mui/x-date-pickers ^7.2.0

Components

• 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.

Usage

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 (
    <FormContainer defaultValue={defaultValues} onSubmit={onSubmit}>
      <FormTextFieldElement name="firstName" label="First Name" />
      <FormButton>Submit</FormButton>
    </FormContainer>
  );
};