Hero Hook Form API / DynamicSectionField

Function: DynamicSectionField()

DynamicSectionField<TFieldValues>(props): Element | null

Defined in: fields/DynamicSectionField.tsx:94

Dynamic section component that shows/hides groups of fields based on form values.

Type Parameters

TFieldValues

TFieldValues extends FieldValues

The form data type

Parameters

props

DynamicSectionFieldProps<TFieldValues>

Component props

Returns

Element | null

The rendered section or null if condition is not met

Description

Similar to ConditionalField but for groups of fields. Renders a section with title, description, and multiple fields when a condition is met. Useful for creating multi-step-like experiences or conditional form sections.

Examples


import { DynamicSectionField, FormFieldHelpers } from "@rachelallyson/hero-hook-form";
 
const fields = [
  FormFieldHelpers.checkbox("hasEmergencyContact", "Has Emergency Contact"),
  DynamicSectionField({
    config: {
      name: "emergencyContact",
      title: "Emergency Contact Information",
      description: "Please provide emergency contact details",
      condition: (values) => values.hasEmergencyContact === true,
      fields: [
        FormFieldHelpers.input("name", "Contact Name"),
        FormFieldHelpers.input("relationship", "Relationship"),
        FormFieldHelpers.input("phone", "Phone Number", "tel"),
        FormFieldHelpers.input("email", "Email", "email"),
      ],
    },
    control: form.control,
  }),
];

Nested dynamic sections:


DynamicSectionField({
  config: {
    name: "businessInfo",
    title: "Business Information",
    condition: (values) => values.accountType === "business",
    fields: [
      FormFieldHelpers.input("businessName", "Business Name"),
      DynamicSectionField({
        config: {
          name: "billingAddress",
          title: "Billing Address",
          condition: (values) => values.businessName && values.taxId,
          fields: [
            FormFieldHelpers.input("street", "Street Address"),
            FormFieldHelpers.input("city", "City"),
          ],
        },
        control: form.control,
      }),
    ],
  },
  control: form.control,
}),

See

ConditionalField for single conditional fields
FieldArrayField for repeating fields