Hero Hook Form API / createFieldArrayCustomConfig

Function: createFieldArrayCustomConfig()

createFieldArrayCustomConfig<TFieldValues>(options): CustomFieldConfig<TFieldValues>

Defined in: utils/createFieldArrayCustomConfig.tsx:219

Create a CustomFieldConfig for field arrays with full control over rendering.

Type Parameters

TFieldValues

TFieldValues extends FieldValues

The form data type

Parameters

options

CreateFieldArrayCustomConfigOptions<TFieldValues>

Configuration options

Returns

CustomFieldConfig<TFieldValues>

Custom field config for field arrays

Description

This helper creates a CustomFieldConfig that uses useFieldArray internally, giving you full control over the UI while still being integrated with the form. Useful when you need custom layouts, reordering, or complex item rendering that FieldArrayConfig doesn’t support.

Example


const slotsConfig = createFieldArrayCustomConfig("slots", {
  label: "Question Slots",
  enableReordering: true,
  renderItem: ({ index, field, form, control, onMoveUp, onMoveDown, onRemove }) => (
    <div className="border rounded-lg p-4">
      <div className="flex justify-between">
        <span>Slot {index + 1}</span>
        <div className="flex gap-2">
          <Button onPress={onMoveUp}>↑</Button>
          <Button onPress={onMoveDown}>↓</Button>
          <Button onPress={onRemove}>Remove</Button>
        </div>
      </div>
      <SelectField
        name={`slots.${index}.slotType`}
        control={control}
        // ...
      />
    </div>
  ),
});