RHFTextField

Text fields are a core component of any form, allowing users to input text into the UI. The RHFTextField component extends the functionality of TextField, thus accepting almost all TextField props while providing additional customization options!

Usage

import { RHFTextField, RHFTextFieldProps } from '@nish1896/rhf-mui-components';

To render a fully functional RHFTextField, you only need 3-4 essential props.

<RHFTextField
  fieldName="firstName"
  register={register}
  errorMessage={errors?.firstName?.message}
/>

Examples

• RHFTextField
• TextField
• Complete Form

API

The RHFTextFieldProps interface extends TextFieldProps and includes the following additional props:

Name	Type	Required	Description
fieldName	string	✅	React Hook Form requires name as a key for the registration process.
register	UseFormRegister	✅	The register option yielded on calling the useForm hook.
registerOptions	RegisterOptions		Register options if using react-hook-form without any validation libraries like yup or Joi.
onValueChange	(e: ChangeEvent) => void		An optional callback function when the value of a field changes. The changed value can be obtained from e.target.value.
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.
errorMessage	ReactNode		Error message to be shown for a field in FormHelperText component.
hideErrorMessage	boolean		Prevent replacing of form HelperText by error message during validation trigger.
formHelperTextProps	FormHelperTextProps		FormHelperTextProps to customise FormHelperText component for a field. Multiple fields can be configured using the ConfigProvider component.