RHFAutocompleteObject

RHFAutocompleteObject extends Autocomplete and is designed for cases where you need to work with the entire selected option object instead of just a primitive value.

Unlike RHFAutocomplete, which stores only the value derived from valueKey, this component stores and returns the full option object (or array of objects). This is particularly useful when additional metadata from the selected option is required elsewhere in your form or application.

Key Differences

Usage

import RHFAutocompleteObject, { RHFAutocompleteObjectProps } from '@nish1896/rhf-mui-components/mui/autocomplete-object';

<RHFAutocompleteObject
  fieldName="country"
  control={control}
  options={countryList}
  labelKey="name"
  valueKey="code"
  multiple           // omit this prop for single selection
/>

Example Option Structure

const countryList = [
  { name: 'India', code: 'IN', currency: 'INR' },
  { name: 'Canada', code: 'CA', currency: 'CAD' },
  { name: 'Germany', code: 'DE', currency: 'EUR' }
];

Stored Value

// Single
{ name: 'India', code: 'IN', currency: 'INR' },

// Multiple
[
  { name: 'India', code: 'IN', currency: 'INR' },
  { name: 'Canada', code: 'CA', currency: 'CAD' }
]

When to Use

Use RHFAutocompleteObject when:

• You need access to additional fields from the selected option (e.g. currency, id, etc.)
• You want to avoid mapping IDs back to objects
• Your form logic depends on rich object data
• You are working with APIs that expect full objects instead of IDs

Examples

• Autocomplete Variations
• RHFAutocompleteObject

API

The RHFAutocompleteObjectProps interface extends AutocompleteProps and accepts the following additional props. Props marked with * are required.