RHFMultiAutocompleteObject

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

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.

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

<RHFMultiAutocompleteObject
  fieldName="countries"
  control={control}
  options={countryList}
  labelKey="name"
  valueKey="code"
/>

Note

freeSolo is not supported in RHFMultiAutocompleteObject.

This component stores complete option objects in form state, whereas enabling freeSolo would introduce string values alongside option objects, resulting in mixed value types.

If you need users to enter custom values that are not present in the provided options, use RHFAutocomplete or RHFMultiAutocomplete instead.

Select All Behavior

When clicked:

Selects all available options
Stores full array of objects

When all options are 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. Props marked with * are required.

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.
`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`	Property name used as the visible label for each option.
`valueKey`*	`string`	Property name used as the stored value for each option.
`customOnChange`	`({ rhfOnChange, newValue, selectedOption }) => void`	Override the default `onChange` behavior of the autocomplete.
`onValueChange`	`({ newValue, selectedOption }) => void`	Returns the latest value of the field in `newValue` parameter. The last selected option can be obtained from `selectedOption`.
`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. This option will be automatically hidden when there are less than 2 options to select from.
`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.
`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.
`renderOptionLabel`	`(option, state) => ReactNode`	Render the option label content corresponding to each checkbox.
`checkboxProps`	CheckboxProps	Checkbox Props used to customize the checkbox rendered alongside each autocomplete option.
`formControlLabelProps`	FormControlLabelProps	FormControlLabelProps to customise `FormControlLabel` component for a field. Multiple fields can be configured using the ConfigProvider component.
`circularProgressProps`	CircularProgressProps	Props forwarded to the CircularProgress displayed in the autocomplete input when it is `loading`. Added in `v4.3`.
`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.
`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.
`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.
`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 applied to the Chip component used to render selected values.
`customIds`	`{ field, label, helperText, error }`	Overrides the default field, label, helper text, and error IDs used for accessibility.

Multi Autocomplete

Checkbox