RHFMultiAutocompleteObject

RHFMultiAutocompleteObject is available from version 3.3 and above.

RHFMultiAutocompleteObject extends Autocomplete to support multi-selection of object-based options, returning the entire selected objects instead of primitive values.

It also includes a built-in "Select All" option with proper handling of:

• Full selection
• Partial (indeterminate) state
• Clear/reset behavior

Key Features

• ✅ Returns array of objects
• ✅ Built-in Select All support
• ✅ Handles indeterminate state
• ✅ Supports large datasets with filtering

Usage

import RHFMultiAutocompleteObject from '@nish1896/rhf-mui-components/mui/multi-autocomplete-object';

<RHFMultiAutocompleteObject
  fieldName="countries"
  control={control}
  options={countryList}
  labelKey="name"
  valueKey="code"
  errorMessage={errors?.countries?.message}
/>

warning

Both labelKey and valueKey are required. This component only supports object-based options.

The internally injected "Select All" option is not included in the final form value. Only actual options are returned.

freeSolo is not supported, similar to other autocomplete components in this library.

Select All Behavior

✔ When clicked:

• Selects all available options
• Stores full array of objects

✔ When all selected:

• Clicking again → clears all selections

✔ Indeterminate state:

• Triggered when some but not all options are selected

Examples

• RHFMultiAutocompleteObject

API

The RHFMultiAutocompleteObjectProps 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	object[]	✅	An array of objects. labelKey and valueKey are required so the component knows which properties to use for the visible label and the stored value.
labelKey	string	✅	The key of object in options array, whose value would be shown as the label in the formfield.
valueKey	string	✅	The key of object in options array, whose value would be actual value of the option selected in the formfield.
selectAllText	string		Custom text to render in place of the "Select All" option that enables user to select all available options in the Autocomplete.
hideSelectAllOption	boolean		A flag to hide the "Select All" option that enables user to select all available options in RHFMultiAutocompleteObject. This option will be automatically hidden when there are less than 2 options to select from.
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.
onValueChange	(newValue, event, reason, details?) => void		Returns the entire object options selected by the user in newValue parameter. The "Select All" option is not included in the final form value.
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" 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.
checkboxProps	CheckboxProps		Checkbox Props to customise each checkbox in checkbox group.
formControlLabelProps	FormControlLabelProps		FormControlLabelProps to customise FormControlLabel 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.
ChipProps	ChipProps		Props to customise the Chip component for each input tag.