Hero Hook Form API v2.5.1

Hero Hook Form API / ConditionalField

Function: ConditionalField()

ConditionalField<TFieldValues>(props): Element | null

Defined in: fields/ConditionalField.tsx:73 

Conditional field component that shows/hides fields based on form values.

Type Parameters

TFieldValues

TFieldValues extends FieldValues

The form data type

Parameters

props

ConditionalFieldProps<TFieldValues>

Component props

Returns

Element | null

The rendered field or null if condition is not met

Description

Renders a field only when a condition function returns true based on current form values. Useful for creating dynamic forms that adapt to user input. The field is completely removed from the DOM when hidden.

Examples

import { ConditionalField, FormFieldHelpers } from "@rachelallyson/hero-hook-form";
 
const fields = [
  FormFieldHelpers.checkbox("hasPhone", "I have a phone number"),
  ConditionalField({
    config: {
      name: "phone",
      condition: (values) => values.hasPhone === true,
      field: FormFieldHelpers.input("phone", "Phone Number", "tel"),
    },
    control: form.control,
  }),
];

Multiple conditions:

ConditionalField({
  config: {
    name: "businessDetails",
    condition: (values) =>
      values.userType === "business" && values.isRegistered === true,
    field: FormFieldHelpers.input("taxId", "Tax ID"),
  },
  control: form.control,
}),

See

• DynamicSectionField for grouping multiple conditional fields
• FieldArrayField for repeating fields