Variable: FormFieldHelpers

const FormFieldHelpers: object

Defined in: builders/BasicFormBuilder.ts:342

Type Declaration

autocomplete()

autocomplete: <T>(name, label, items, placeholder?, autocompleteProps?, options?) => ZodFormFieldConfig<T>

Create an autocomplete field with static or dynamic options.

Pass an array for a fixed list, or a getter function for dynamic/API-driven options (e.g. search-as-you-type). The getter is called each render so it sees current state; use with autocompleteProps.onInputChange to fetch options when the user types.

Type Parameters

T

T extends FieldValues

Parameters

name

Path<T>

label

string

items

object[] | () => object[]

placeholder?

string

autocompleteProps?

AutocompletePassthroughProps

options?

renderItem?

(item) => ReactNode

Custom render for each option (e.g. name + email + phone). When provided, used instead of default label-only.

Returns

ZodFormFieldConfig<T>

Example


// Static
FormFieldHelpers.autocomplete("country", "Country", options, "Search countries", { allowsCustomValue: true })
 
// Dynamic (e.g. PCO Person)
const [people, setPeople] = useState([]);
FormFieldHelpers.autocomplete("personId", "Person", () => people.map(p => ({ label: p.name, value: p.id })), "Search people", {
  onInputChange: (q) => fetchPeople(q).then(setPeople),
})
 
// Custom option layout (e.g. name + email + phone per option)
FormFieldHelpers.autocomplete("personId", "Person", getOptions, "Search", undefined, {
  renderItem: (item) => <div><strong>{item.label}</strong><br /><small>{getSubtitle(item.value)}</small></div>,
})

checkbox()

checkbox: <T>(name, label, checkboxProps?) => ZodFormFieldConfig<T>

Create a checkbox field

Type Parameters

T

T extends FieldValues

Parameters

name

Path<T>

label

string

checkboxProps?

CheckboxPassthroughProps

Returns

ZodFormFieldConfig<T>

Example


// Simple checkbox
FormFieldHelpers.checkbox("newsletter", "Subscribe to newsletter")
 
// With full customization
FormFieldHelpers.checkbox("newsletter", "Subscribe to newsletter", {
  classNames: { base: "custom-checkbox" },
  size: "lg"
})

checkboxGroup()

checkboxGroup: <T>(name, label, options, config?) => ZodFormFieldConfig<T>

Create a checkbox group field (multiple checkboxes saving to an array)

Type Parameters

T

T extends FieldValues

Parameters

name

Path<T>

label

string

options

object[]

config?

checkboxProps?

CheckboxGroupPassthroughProps

orientation?

"horizontal" | "vertical"

description?

string

Returns

ZodFormFieldConfig<T>

Example


// Simple checkbox group
FormFieldHelpers.checkboxGroup("interests", "Interests", [
  { label: "Reading", value: "reading" },
  { label: "Sports", value: "sports" },
  { label: "Music", value: "music" },
])
 
// With horizontal layout and custom styling
FormFieldHelpers.checkboxGroup("interests", "Interests", options, {
  orientation: "horizontal",
  checkboxProps: { color: "primary", size: "lg" }
})

conditional()

conditional: <T>(name, condition, field) => ZodFormFieldConfig<T>

Create a conditional field that shows/hides based on form data

Type Parameters

T

T extends FieldValues = FieldValues

Parameters

name

Path<T>

condition

(formData) => boolean

field

ZodFormFieldConfig<T>

Returns

ZodFormFieldConfig<T>

Examples


FormFieldHelpers.conditional(
  "phone",
  (values) => values.hasPhone === true,
  FormFieldHelpers.input("phone", "Phone Number", "tel")
)

With explicit type in condition function (similar to content helper pattern):


FormFieldHelpers.conditional(
  "options",
  (formData: Partial<z.infer<typeof fieldSchema>>) =>
    formData.fieldType === 'DROPDOWN',
  FormFieldHelpers.textarea("options", "Dropdown Options", "One per line")
)

conditionalFieldArray()

conditionalFieldArray: <T>(name, condition, label, fields, options?) => ZodFormFieldConfig<T>

Create a conditional field array that avoids memory leaks in Cypress tests.

This helper creates a field array that is always registered but conditionally rendered, preventing the register/unregister cycles that cause memory accumulation in Cypress Electron renderer.

Type Parameters

T

T extends FieldValues = FieldValues

Parameters

name

ArrayPath<T>

The field array name

condition

(formData) => boolean

Function that determines if the field array should be visible

label

string

Display label for the field array

fields

ZodFormFieldConfig<T>[]

Field configurations for array items

options?

Additional field array options

min?

number

max?

number

addButtonText?

string

removeButtonText?

string

enableReordering?

boolean

defaultItem?

() => any

Returns

ZodFormFieldConfig<T>

Example


// Memory-safe conditional field array for multiple choice options
FormFieldHelpers.conditionalFieldArray(
  "choices",
  (data) => data.questionType === 'MULTIPLE_CHOICE',
  "Answer Choices",
  [
    FormFieldHelpers.input("text", "Choice Text"),
    FormFieldHelpers.checkbox("isCorrect", "Correct Answer"),
  ]
)

content()

content: <T>(title?, description?, options?) => ZodFormFieldConfig<T>

Create a content field for headers, questions, or custom content between fields

Type Parameters

T

T extends FieldValues = FieldValues

Parameters

title?

string | null

description?

string | null

options?

render?

(field) => ReactNode

className?

string

name?

Path<T>

Returns

ZodFormFieldConfig<T>

Example


// Simple header
FormFieldHelpers.content("Personal Information", "Please provide your details")
 
// Custom render
FormFieldHelpers.content(null, null, {
  render: () => <div>Custom content</div>
})

custom()

custom: <T>(name, label, render, options?) => ZodFormFieldConfig<T>

Create a custom field with full control over rendering

Type Parameters

T

T extends FieldValues

Parameters

name

Path<T> | ArrayPath<T>

label

string

render

(field) => ReactNode

options?

description?

string

className?

string

isDisabled?

boolean

Returns

ZodFormFieldConfig<T>

Example


// Custom field with render function
FormFieldHelpers.custom<FormData>(
  "skills",
  "Skills",
  ({ form, control }) => {
    // Custom rendering logic
    return <div>...</div>;
  }
)

date()

date: <T>(name, label, dateProps?) => ZodFormFieldConfig<T>

Create a date field

Type Parameters

T

T extends FieldValues

Parameters

name

Path<T>

label

string

dateProps?

DateInputPassthroughProps

Returns

ZodFormFieldConfig<T>

Example


// Simple date field
FormFieldHelpers.date("birthDate", "Birth Date")
 
// With DateInput props (set default via config.defaultValues)
FormFieldHelpers.date("birthDate", "Birth Date", {
  granularity: "day",
  minValue: new CalendarDate(1900, 1, 1),
})

file()

file: <T>(name, label, options?) => ZodFormFieldConfig<T>

Create a file upload field

Type Parameters

T

T extends FieldValues

Parameters

name

Path<T>

label

string

options?

accept?

string

fileProps?

FileInputPassthroughProps

multiple?

boolean

Returns

ZodFormFieldConfig<T>

Example


// Simple file field
FormFieldHelpers.file("avatar", "Profile Picture")
 
// With accept and multiple
FormFieldHelpers.file("avatar", "Profile Picture", {
  accept: "image/*",
  multiple: true
})
 
// With full customization
FormFieldHelpers.file("avatar", "Profile Picture", {
  accept: "image/*",
  multiple: false,
  fileProps: { className: "custom-file-input" }
})

fontPicker()

fontPicker: <T>(name, label, fontPickerProps?) => ZodFormFieldConfig<T>

Create a font picker field

Type Parameters

T

T extends FieldValues

Parameters

name

Path<T>

label

string

fontPickerProps?

showFontPreview?

boolean

loadAllVariants?

boolean

onFontsLoaded?

(loaded) => void

fontsLoadedTimeout?

number

Returns

ZodFormFieldConfig<T>

Example


// Simple font picker
FormFieldHelpers.fontPicker("font", "Choose Font")
 
// With full customization
FormFieldHelpers.fontPicker("font", "Choose Font", {
  showFontPreview: true,
  loadAllVariants: false,
  fontsLoadedTimeout: 5000
})

input()

input: {<T>(name, label): ZodFormFieldConfig<T>; <T>(name, label, type): ZodFormFieldConfig<T>; <T>(name, label, inputProps): ZodFormFieldConfig<T>; <T>(name, label, type, inputProps): ZodFormFieldConfig<T>; } = inputHelper

Create an input field

Call Signature

<T>(name, label): ZodFormFieldConfig<T>

Helper functions for creating form field configurations.

Type Parameters

T

T extends FieldValues

Parameters

name

Path<T>

label

string

Returns

ZodFormFieldConfig<T>

Description

Simple helper functions for common field types. This is the recommended approach for most use cases as it’s straightforward and doesn’t require method chaining. Each helper returns a field configuration object.

Example


import { FormFieldHelpers } from "@rachelallyson/hero-hook-form";
 
const fields = [
  FormFieldHelpers.input("name", "Name"),
  FormFieldHelpers.input("email", "Email", "email"),
  FormFieldHelpers.textarea("message", "Message"),
  FormFieldHelpers.select("country", "Country", [
    { label: "US", value: "us" },
    { label: "CA", value: "ca" },
  ]),
  FormFieldHelpers.checkbox("newsletter", "Subscribe to newsletter"),
  FormFieldHelpers.conditional(
    "phone",
    (values) => values.hasPhone === true,
    FormFieldHelpers.input("phone", "Phone Number", "tel")
  ),
];

See

createBasicFormBuilder for builder pattern alternative

Call Signature

<T>(name, label, type): ZodFormFieldConfig<T>

Helper functions for creating form field configurations.

Type Parameters

T

T extends FieldValues

Parameters

name

Path<T>

label

string

type

"text" | "email" | "tel" | "password"

Returns

ZodFormFieldConfig<T>

Description

Example


import { FormFieldHelpers } from "@rachelallyson/hero-hook-form";
 
const fields = [
  FormFieldHelpers.input("name", "Name"),
  FormFieldHelpers.input("email", "Email", "email"),
  FormFieldHelpers.textarea("message", "Message"),
  FormFieldHelpers.select("country", "Country", [
    { label: "US", value: "us" },
    { label: "CA", value: "ca" },
  ]),
  FormFieldHelpers.checkbox("newsletter", "Subscribe to newsletter"),
  FormFieldHelpers.conditional(
    "phone",
    (values) => values.hasPhone === true,
    FormFieldHelpers.input("phone", "Phone Number", "tel")
  ),
];

See

createBasicFormBuilder for builder pattern alternative

Call Signature

<T>(name, label, inputProps): ZodFormFieldConfig<T>

Helper functions for creating form field configurations.

Type Parameters

T

T extends FieldValues

Parameters

name

Path<T>

label

string

inputProps

InputPassthroughProps

Returns

ZodFormFieldConfig<T>

Description

Example


import { FormFieldHelpers } from "@rachelallyson/hero-hook-form";
 
const fields = [
  FormFieldHelpers.input("name", "Name"),
  FormFieldHelpers.input("email", "Email", "email"),
  FormFieldHelpers.textarea("message", "Message"),
  FormFieldHelpers.select("country", "Country", [
    { label: "US", value: "us" },
    { label: "CA", value: "ca" },
  ]),
  FormFieldHelpers.checkbox("newsletter", "Subscribe to newsletter"),
  FormFieldHelpers.conditional(
    "phone",
    (values) => values.hasPhone === true,
    FormFieldHelpers.input("phone", "Phone Number", "tel")
  ),
];

See

createBasicFormBuilder for builder pattern alternative

Call Signature

<T>(name, label, type, inputProps): ZodFormFieldConfig<T>

Helper functions for creating form field configurations.

Type Parameters

T

T extends FieldValues

Parameters

name

Path<T>

label

string

type

"text" | "email" | "tel" | "password"

inputProps

InputPassthroughProps

Returns

ZodFormFieldConfig<T>

Description

Example


import { FormFieldHelpers } from "@rachelallyson/hero-hook-form";
 
const fields = [
  FormFieldHelpers.input("name", "Name"),
  FormFieldHelpers.input("email", "Email", "email"),
  FormFieldHelpers.textarea("message", "Message"),
  FormFieldHelpers.select("country", "Country", [
    { label: "US", value: "us" },
    { label: "CA", value: "ca" },
  ]),
  FormFieldHelpers.checkbox("newsletter", "Subscribe to newsletter"),
  FormFieldHelpers.conditional(
    "phone",
    (values) => values.hasPhone === true,
    FormFieldHelpers.input("phone", "Phone Number", "tel")
  ),
];

See

createBasicFormBuilder for builder pattern alternative

Example


// Simple input
FormFieldHelpers.input("name", "Name")
 
// With type
FormFieldHelpers.input("email", "Email", "email")
 
// With props only (no type)
FormFieldHelpers.input("name", "Name", { placeholder: "Enter name" })
 
// With type and props
FormFieldHelpers.input("email", "Email", "email", {
  placeholder: "Enter your email",
  classNames: { input: "custom-input" },
  startContent: <MailIcon />,
  description: "We'll never share your email"
})

radio()

radio: <T>(name, label, options, radioProps?) => ZodFormFieldConfig<T>

Create a radio group field

Type Parameters

T

T extends FieldValues

Parameters

name

Path<T>

label

string

options

object[]

radioProps?

RadioGroupPassthroughProps

Returns

ZodFormFieldConfig<T>

Example


// Simple radio group
FormFieldHelpers.radio("gender", "Gender", [
  { label: "Male", value: "male" },
  { label: "Female", value: "female" }
])
 
// With full customization
FormFieldHelpers.radio("gender", "Gender", options, {
  orientation: "horizontal",
  classNames: { base: "custom-radio" }
})

select()

select: <T>(name, label, options, selectProps?) => ZodFormFieldConfig<T>

Create a select field

Type Parameters

T

T extends FieldValues

Parameters

name

Path<T>

label

string

options

object[]

selectProps?

SelectPassthroughProps

Returns

ZodFormFieldConfig<T>

Example


// Simple select
FormFieldHelpers.select("country", "Country", options)
 
// With full customization
FormFieldHelpers.select("country", "Country", options, {
  placeholder: "Select a country",
  classNames: { trigger: "custom-select" },
  selectionMode: "multiple"
})

slider()

slider: <T>(name, label, sliderProps?) => ZodFormFieldConfig<T>

Create a slider field

Type Parameters

T

T extends FieldValues

Parameters

name

Path<T>

label

string

sliderProps?

SliderPassthroughProps

Returns

ZodFormFieldConfig<T>

Example


// Simple slider
FormFieldHelpers.slider("rating", "Rating")
 
// With full customization
FormFieldHelpers.slider("rating", "Rating", {
  minValue: 1,
  maxValue: 5,
  step: 1,
  showSteps: true,
  classNames: { base: "custom-slider" }
})

switch()

switch: <T>(name, label, description?, switchProps?) => ZodFormFieldConfig<T>

Create a switch field

Type Parameters

T

T extends FieldValues

Parameters

name

Path<T>

label

string

description?

string

switchProps?

SwitchPassthroughProps

Returns

ZodFormFieldConfig<T>

Example


// Simple switch
FormFieldHelpers.switch("notifications", "Enable notifications")
 
// With description
FormFieldHelpers.switch("notifications", "Enable notifications", "Receive email notifications")
 
// With full customization
FormFieldHelpers.switch("notifications", "Enable notifications", "Receive email notifications", {
  classNames: { base: "custom-switch" },
  size: "lg",
  color: "primary"
})

textarea()

textarea: <T>(name, label, placeholder?, textareaProps?) => ZodFormFieldConfig<T>

Create a textarea field

Type Parameters

T

T extends FieldValues

Parameters

name

Path<T>

label

string

placeholder?

string

textareaProps?

TextareaPassthroughProps

Returns

ZodFormFieldConfig<T>

Example


// Simple textarea
FormFieldHelpers.textarea("message", "Message")
 
// With placeholder
FormFieldHelpers.textarea("message", "Message", "Enter your message")
 
// With full customization
FormFieldHelpers.textarea("message", "Message", "Enter your message", {
  classNames: { input: "custom-textarea" },
  minRows: 3,
  maxRows: 10
})