Function: AutocompleteField()

AutocompleteField<TFieldValues, TValue>(props): Element

Defined in: fields/AutocompleteField.tsx:150

An autocomplete field component that integrates React Hook Form with HeroUI Autocomplete.

This component provides a type-safe autocomplete field with validation support, error handling, and accessibility features. It supports both static option lists and async loading via the items prop or children render function.

Type Parameters

TFieldValues

TFieldValues extends FieldValues

The form data type

TValue

TValue extends string | number = string

The value type for the autocomplete field (string or number)

Parameters

props

AutocompleteFieldProps<TFieldValues, TValue>

The autocomplete field props

Returns

Element

The rendered autocomplete field component

Examples


import { ZodForm, FormFieldHelpers } from "@rachelallyson/hero-hook-form";
import { z } from "zod";
 
const schema = z.object({
  country: z.string().min(1, "Please select a country"),
});
 
const options = [
  { label: "United States", value: "us" },
  { label: "Canada", value: "ca" },
];
 
function MyForm() {
  return (
    <ZodForm
      config={{
        schema,
        fields: [
          FormFieldHelpers.autocomplete("country", "Country", options, "Search for a country"),
        ],
      }}
      onSubmit={(data) => console.log(data)}
    />
  );
}


// With async loading
<AutocompleteField
  control={form.control}
  name="country"
  label="Country"
  placeholder="Search for a country"
  autocompleteProps={{
    allowsCustomValue: true,
    onInputChange={(value) => {
      // Load options asynchronously based on input
      loadOptions(value);
    }},
  }}
>
  {(item) => (
    <AutocompleteItem key={item.value}>{item.label}</AutocompleteItem>
  )}
</AutocompleteField>