Hero Hook Form API / InputField

Variable: InputField()

const InputField: <TFieldValues>(props) => Element

Defined in: fields/InputField.tsx:119

Input field component for text, email, password, tel, and number inputs.

Type Parameters

TFieldValues

TFieldValues extends FieldValues

The form data type

Parameters

props

InputFieldProps<TFieldValues>

Component props

Returns

Element

The rendered input field

Description

A memoized input field component that integrates with React Hook Form and HeroUI Input component. Supports all standard input types and includes automatic validation error display.

Example


import { InputField } from "@rachelallyson/hero-hook-form";
import { useForm, Controller } from "react-hook-form";
 
function MyForm() {
  const { control } = useForm();
 
  return (
    <InputField
      name="email"
      label="Email Address"
      description="Enter your email address"
      control={control}
      inputProps={{
        type: "email",
        placeholder: "you@example.com",
      }}
    />
  );
}

See

FormFieldHelpers.input for helper function to create input field config