Getting Started

To optimize bundle size and enable developers to install only the packages they need, this package is split into independent modules.

You can explore the folder structure and its contents by expanding the tree nodes.

@nish1896/rhf-mui-components

mui - Includes core Material-UI components such as TextField, Select, and others.
mui-pickers - Contains Material-UI date and time picker components, along with their variations - Desktop, Mobile and Static.
misc - Features external form components, such as the rich text editor, that are not part of Material-UI.
config - Provides a Context Provider to set default styles for all components and configure the dateAdapter for date and time pickers.
form-helpers - Utility functions used internally by the components, which can also be leveraged by developers for processing and validating form data.

To minimize the bundle size during the build process, this package includes both named and default exports within each module. Similar to Material-UI, developers are encouraged to use default import syntax to reduce bundle size.

The type for each component can also be imported to modify or customize an existing component.

Working

Each component requires a set of common props, detailed in the table below. Some props might be specific to a component, say DatePicker, and can be viewed in the documentation page for the respective component. The properties marked as required are mandatory for that component.

You can also import the interface of each component, like RHFDatePickerProps to extend an existing component or create another reusable component from it.

Name	Type	Description
`fieldName`*	`string`	Name of the field registered with React Hook Form. This prop is required for all components.
`control`*	UseFormControl	The control option yielded on calling the useForm hook.
`registerOptions`	`RegisterOptions`	React Hook Form validation rules. Useful when not using a schema validation library such as Yup or Joi.
`required`	`boolean`	Indicates that the field is mandatory by adding an asterisk symbol (*) to the `formLabel`. This visual cue helps users quickly identify required fields in the form.
`customOnChange`	`(rhfOnChange, newValue, event, ...args) => void`	Overrides the default `onChange` behavior. When provided, `onValueChange` is not called. You must call `rhfOnChange(newValue)` to update the form state.
`onValueChange`	`Function`	Callback function triggered when the field value changes. Method signature can be viewed for each component in its documentation page.
`disabled`	`boolean`	Disables the component and prevents user interaction.
`label`	`ReactNode`	The text to render in the FormLabel component. By default, the value of `fieldName` is transformed (e.g., "firstName" to "First Name") using the fieldNameToLabel function.
`showLabelAboveFormField`	`boolean`	Render form label above the form field in FormLabel component.
`formLabelProps`	FormLabelProps	FormLabelProps to customise FormLabel component for a field. Multiple fields can be configured using the ConfigProvider component.
`formControlLabelProps`	FormControlLabelProps	FormControlLabelProps to customise `FormControlLabel` component for a field. Multiple fields can be configured using the ConfigProvider component.
`hideLabel`	`boolean`	Hides the FormLabel component if you don’t want to display the default form label component or prefer to render a fully custom label instead.
`helperText`	`ReactNode`	The content to display within the FormHelperText component below the field. If the field validation fails, this content will be overridden by the corresponding error message.
`renderError`	`(error: FieldError) => ReactNode`	Custom renderer for the React Hook Form field error. Receives the current field error and returns the content to display, such as `error.message` or a custom React element in the `HelperText` component. Added in `v4.1.0`.
`hideErrorMessage`	`boolean`	A flag to prevent replacement of helper text of a field by the `errorMessage` when the validation is triggered.
`formHelperTextProps`	FormHelperTextProps	FormHelperTextProps to customise FormHelperText component for a field. Multiple fields can be configured using the ConfigProvider component.
`customIds`	`{ field, label, helperText, error }`	Overrides the default field, label, helper text, and error IDs used for accessibility.

Introduction

Text Field