[]previous and next page

Form

A form.

A form. Without JavaScript it is an HTML form: a GET goes to the URL, a POST goes to the server function's endpoint (/_dusk/fn/<id>) and the page the browser is sent back to shows the outcome. With JavaScript the submit goes to the same function through RPC: the page does not reload, the outcome is in useSubmission, useFormStatus reports pending, a second submit while pending is ignored, and field problems are marked and focused. A URL action with a GET navigates the router (keep the query in the URL, replace replaces the history entry).

Works with @shadow-js/forms: onResult gets the failure, and applyServerErrors(form, result.data) shows the problems on that form's fields.

Import#

ts
import { Form } from "@shadow-js/dusk/client";

Signature#

ts
function Form(props: FormProps): unknown

Parameters#

Name Description
props See FormProps.

Returns#

A <form> element.

Examples#

ts
<Form action={saveNote} resetOnSuccess>
  <input name="title" required />
  <SubmitButton />
</Form>