Form Component

The Form component can be used to upgrade your HTML <form>. Note that it posts the form data to the current page path, so it's meant to be use in conjunction with handle to process post data in getServerSideProps.

It does not do any client side state management. It's as much as an alternative to full fletched form libs, as it is not. The philosophy of next-runtime is to do more on the server, and less on the client. Simpler form handling is part of that.

When using Form, we recommend to use defaultValue to set initial values, and to not use value or onChange handlers. Read "simple form handling in react" to read more about that approach.

import { Form } from 'next-runtime/form';

function MyPage() {
  return (
    <Form method="post">
      <input name="name" defaultValue={name} />
      <input name="country" defaultValue={country} />
      <button type="submit">submit</button>
    </Form>
  );
}

#

Props

Form takes the following props. All props are optional.

• name string

  The name is a standard html prop, but in addition to that it's also used to tie forms and useFormSubmit together. Usage is optional, but recommended.

• method get | post | put | patch | delete

  The method to use for form submissions. get appends the form-data to the URL in name/value pairs, while other http methods include the FormData in the request body.

  Unlike the standard html form, method defaults to post, and all http methods are supported.

• onSubmit (event: FormEvent) => void

  A callback that's invoked before form submission. It receives the raw event from React. This function can be used for validation. Call event.preventDefault to block the form from being submitted to the server.

• onSuccess (state: FormState) => void

  Called on successful form submission. It receives the form state as an argument.

• onError (state: FormState) => void

  Called when an error occurs (non 2xx status). It receives the form state as an argument.