Form
A wrapper component that handles the submission of forms.
Props
No props found for this component, run `yarn gen:docs` to generate component meta first.
Slots
No slots found for this component, run `yarn gen:docs` to generate component meta first.
Events
Best practices
The form component should be used to:
- Wrap around all form input elements
- Emulate the native HTML
form
element behavior with a customonSubmit
callback
Related components
- To arrange fields within a form using standard spacing, use the form layout component
- To see all of the components that make up a form, visit the form section of the component library
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
.