RHFAutocomplete

RHFAutocomplete extends Autocomplete, designed for searching and selecting an option from large datasets. Similar to RHFSelect, it supports selecting single or multiple options and accepts options as an array of strings or an array of objects. This component is ideal for use cases requiring dynamic filtering or managing extensive options seamlessly.

note

Due to the complexity of supporting arbitrary values in the Autocomplete while ensuring existing functionality remains unaffected, this component currently does not support the freeSolo prop of Autocomplete. This means users are restricted to selecting values exclusively from the dataset provided in the options prop, and cannot enter custom values.

Usage

import RHFAutocomplete, { RHFAutocompleteProps } from '@nish1896/rhf-mui-components/mui/autocomplete';

<RHFAutocomplete
  fieldName="countriesVisited"
  control={control}
  options={['Azerbaijan', 'Canada', 'India']}
  errorMessage={errors?.countriesVisited?.message}
/>

For options as an array of objects:

<RHFAutocomplete
  fieldName="countriesVisited"
  control={control}
  options={countryList} // imported from RHFCountrySelect
  labelKey="name"
  valueKey="name"
  errorMessage={errors?.countriesVisited?.message}
/>

warning

When using an array of objects for options, both labelKey and valueKey are required. If either is missing, an error will be thrown.

Examples

• RHFAutocomplete
• Autocomplete Variations
• Complete Form

API

The RHFAutocomplete interface extends AutocompleteProps and accepts the following additional props:

Name	Type	Required	Description
fieldName	string	✅	React Hook Form requires name as a key for the registration process. This is a required prop for all components.
control	UseFormControl	✅	The control option yielded on calling the useForm hook.
registerOptions	RegisterOptions		Register options for validation if using react-hook-form without any validation libraries like yup or Joi.
options	string[] or object[]	✅	An array with string or object values. Make sure to pass labelKey and valueKey when options is an array of objects.
labelKey	string	✅	The key of object in options array, whose value would be shown as the label in the formfield. Only required when input options is an array of objects.
valueKey	string	✅	The key of object in options array, whose value would be actual value of the option selected in the formfield. Only required when input options is an array of objects.
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.
multiple	boolean		Allow selection of single or multiple values for a formfield.
onValueChange	(newValue, event, reason, details?) => void		Returns the latest value of the field in newValue parameter. The last selected option can be obtained from details.
label	ReactNode		The text to render in FormLabel component. By default, the value of fieldName such as firstName will be transformed to display "First Name".
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.
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.
errorMessage	ReactNode		Error message to be shown for a field in FormHelperText component.
hideErrorMessage	boolean		A flag to prevent replacement of helper text of a field by the error message when the validation is triggered.
formHelperTextProps	FormHelperTextProps		FormHelperTextProps to customise FormHelperText component for a field. Multiple fields can be configured using the ConfigProvider component.
textFieldProps	TextFieldProps		Props to customise the Autocomplete Textfield.