Form

    A wrapper component that handles the submission of forms.

    Examples

    Down Arrow

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


    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


    Accessibility

    See Material Design and development documentation about accessibility for Android:

    See Apple’s Human Interface Guidelines and API documentation about accessibility for iOS:

    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.