Hero Hook Form API / FormFieldHelpers

Variable: FormFieldHelpers

const FormFieldHelpers: object

Defined in: builders/BasicFormBuilder.ts:250

Helper functions for creating form field configurations.

Type Declaration

autocomplete()

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

Create an autocomplete field

Type Parameters

T

T extends FieldValues

Parameters

name

Path<T>

label

string

items

object[]

placeholder?

string

Returns

ZodFormFieldConfig<T>

checkbox()

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

Create a checkbox field

Type Parameters

T

T extends FieldValues

Parameters

name

Path<T>

label

string

Returns

ZodFormFieldConfig<T>

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")
)

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?

string

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>
})

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?

Record<string, string | number | boolean>

Returns

ZodFormFieldConfig<T>

input()

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

Create an input field

Type Parameters

T

T extends FieldValues

Parameters

name

Path<T>

label

string

type

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

Returns

ZodFormFieldConfig<T>

select()

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

Create a select field

Type Parameters

T

T extends FieldValues

Parameters

name

Path<T>

label

string

options

object[]

Returns

ZodFormFieldConfig<T>

switch()

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

Create a switch field

Type Parameters

T

T extends FieldValues

Parameters

name

Path<T>

label

string

description?

string

Returns

ZodFormFieldConfig<T>

textarea()

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

Create a textarea field

Type Parameters

T

T extends FieldValues

Parameters

name

Path<T>

label

string

placeholder?

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