Form

Progressively-enhanced form component. When JavaScript is available, the form submits via the client-side router for a seamless experience. Without JavaScript, it falls back to standard HTML form submission. Supports both string action URLs and server action functions.

Import

import { Form } from 'catmint/routing'

Signature

const Form: React.ForwardRefExoticComponent<FormProps & React.RefAttributes<HTMLFormElement>>

Props

FormProps extends all standard HTML <form> attributes (except action) with the following additions:

Prop	Type	Required	Description
`action`	`string \| ((formData: FormData) => void \| Promise<void>)`	No	Server action function or URL string
`resetOnSuccess`	`boolean`	No	Reset the form after successful submission
`children`	`ReactNode`	No	Form content
`method`	`string`	No	HTTP method (defaults to `"post"`)
`ref`	`React.Ref<HTMLFormElement>`	No	Forwarded ref to the underlying `<form>` element

All other standard FormHTMLAttributes<HTMLFormElement> props (e.g. onSubmit, className, id) are also accepted.

`FormProps`

interface FormProps extends Omit<FormHTMLAttributes<HTMLFormElement>, 'action'> {
  action?: string | ((formData: FormData) => void | Promise<void>)
  resetOnSuccess?: boolean
  children?: ReactNode
}

Examples

import { Form } from 'catmint/routing'

// With a server action function
<Form action={submitContact} method="post">
  <input name="email" type="email" required />
  <textarea name="message" />
  <button type="submit">Send</button>
</Form>

// With a string action URL (progressive enhancement fallback)
<Form action="/api/contact" method="post">
  <input name="email" />
  <button>Submit</button>
</Form>

// With resetOnSuccess and a ref
import { useRef } from 'react'

function ContactForm() {
  const formRef = useRef<HTMLFormElement>(null)

  return (
    <Form ref={formRef} action={submitForm} resetOnSuccess>
      <input name="name" required />
      <input name="email" type="email" required />
      <button type="submit">Submit</button>
    </Form>
  )
}