Form

Description

A <form> wired to a server action with progressive enhancement. When hydrated, submission is intercepted and the action is called with FormData. With JS disabled, the rendered action={fn.url} makes it a native POST, and the server responds with a 303 Post/Redirect/Get.

Renders a real <form method="post" action={fn.url}>. When hydrated it intercepts the submit and calls the action with the form's FormData; with JS disabled the browser does a native POST and the server replies with a 303 redirect. Prefer <Form> over React's own <form action={fn}> when you want that no-JS fallback. Set encType="multipart/form-data" for file uploads.

Signature

function Form<Input, Output>(props: {
  action: ActionFn<Input, Output> | StatefulActionFn<Input, Output>
  onSubmit?: (result: Output) => void
} & FormHTMLAttributes): ReactNode

Examples

import { Form } from '@ossido-labs/ossido/actions';
import { subscribe } from '.ossido/actions';

<Form action={subscribe} encType="multipart/form-data">
  <input name="email" type="email" />
  <input name="avatar" type="file" />
  <button>Subscribe</button>
</Form>;