Components menu
  2. components
  3. forms
  4. form

Form

A wrapper component that handles the submission of forms.

Examples

Use onSubmit as a callback for when your form is submitted.

Drag to resize example

Props

acceptCharset
string
Space separated list of character encodings
action
string
Where to send form-data on submittal
autoComplete
boolean
Grants the browser the ability to autocomplete input elements
children
React.ReactNode
The content to display inside the form.
encType
"application/x-www-form-urlencoded" | "multipart/form-data" | "text/plain"
Media type when submitting content to server
implicitSubmit
boolean
Toggles if form submits on Enter keypress. Defaults to true.
method
"post" | "get" | "action"
Method used to submit form
name
string
A unique name for the form
noValidate
boolean
Whether or not form is validated when submitting
preventDefault
boolean
Blocks the default form action
target
"_blank" | "_self" | "_parent" | "_top" | string
Where to display response after form submittal
onSubmitRequired
(event: FormEvent) => void
Callback when form is submitted

Accessibility

The form component wraps content in an HTML <form> element. This helps to support assistive technologies that use different interaction and browse modes.

Forms can have only one submit button and it must be at the end of the form. By default, buttons added to the form are given a type attribute set to button to avoid conflicts. To make a button the submit button instead (type="submit"), set the submit prop on the button.

Keyboard support

By default, the implicitSubmit prop is set to true. This allows merchants to submit the form with the enter/return key when focus is in any text field inside the form. This provides a shortcut for keyboard users. If this behavior doesn’t fit the form, then set the prop to false.

Best practices

The form component should be used to:

  • Wrap around all form input elements
  • Emulate the native HTML form element behavior with a custom onSubmit callback

Edit source on GitHub