Hero Hook Form API / AutocompleteFieldProps

Type Alias: AutocompleteFieldProps<TFieldValues, TValue>

AutocompleteFieldProps<TFieldValues, TValue> = FieldBaseProps<TFieldValues, TValue> & WithControl<TFieldValues> & object

Defined in: fields/AutocompleteField.tsx:58

Props for the AutocompleteField component.

Type Declaration

items?

optional items: readonly AutocompleteOption<TValue>[]

Array of autocomplete options (for static lists)

placeholder?

optional placeholder: string

Placeholder text when no option is selected

autocompleteProps?

optional autocompleteProps: Omit<React.ComponentProps<typeof Autocomplete>, "selectedKey" | "onSelectionChange" | "inputValue" | "onInputChange" | "label" | "isInvalid" | "errorMessage" | "isDisabled" | "children" | "items" | "defaultItems">

Additional props to pass to the underlying Autocomplete component

children()?

optional children: (item) => React.JSX.Element

Custom render function for items (for async loading)

Parameters

item

AutocompleteOption<TValue>

Returns

React.JSX.Element

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)

Example


import { AutocompleteField } from "@rachelallyson/hero-hook-form";
import { useForm } from "react-hook-form";
 
const form = useForm({
  defaultValues: { country: "" },
});
 
const options = [
  { label: "United States", value: "us" },
  { label: "Canada", value: "ca" },
  { label: "Mexico", value: "mx" },
];
 
<AutocompleteField
  control={form.control}
  name="country"
  label="Country"
  items={options}
  placeholder="Search for a country"
/>