Hero Hook Form API / SimpleForm

Function: SimpleForm()

SimpleForm<TFieldValues>(props): Element

Defined in: components/SimpleForm.tsx:86

Simple form component for single-field forms.

Type Parameters

TFieldValues

TFieldValues extends FieldValues

The form data type

Parameters

props

SimpleFormProps<TFieldValues>

Component props

Returns

Element

The rendered form

Description

A simplified API for forms with a single field. Provides the same validation and error handling as ZodForm but with a simpler configuration. Useful for simple inputs like search bars, message inputs, or single-field forms.

Example


import { SimpleForm, FormFieldHelpers } from "@rachelallyson/hero-hook-form";
import { z } from "zod";
 
const messageSchema = z.object({
  message: z.string().min(1, "Message cannot be empty"),
});
 
function MessageInput() {
  return (
    <SimpleForm
      schema={messageSchema}
      field={FormFieldHelpers.input("message", "", {
        placeholder: "Add a note...",
        endContent: (
          <Button type="submit" isIconOnly>
            <SendIcon />
          </Button>
        ),
      })}
      onSubmit={async (data) => {
        await sendMessage(data.message);
      }}
      hideSubmitButton
    />
  );
}

See

ZodForm for multi-field forms