Form

The form component should be used to wrap one or more form controls. This component provides an "implicit submit" behavior, where customers can submit the form from any input by pressing "Enter" on their keyboards. This behavior is widely expected, and should be respected as often as possible. Unlike an HTML `form` element, this component does not support configuring the descendant fields to be submitted via HTTP automatically. Instead, you must provide an `onSubmit` callback that will perform the necessary HTTP requests in JavaScript.

Basic Form

import {
  render,
  BlockSpacer,
  Button,
  Form,
  Grid,
  GridItem,
  TextField,
  View,
} from '@shopify/checkout-ui-extensions-react';

render('Checkout::Dynamic::Render', () => );

function Extension() {
  return (
     console.log('onSubmit event')}>
      
        
          
        
        
          
        
        
          
        
      
      
      
    
  );
}

import {
  extend,
  BlockSpacer,
  Button,
  Form,
  Grid,
  GridItem,
  TextField,
  View,
} from '@shopify/checkout-ui-extensions';

extend('Checkout::Dynamic::Render', (root) => {
  const fields = root.createComponent(
    Grid,
    {columns: ['50%', '50%'], spacing: 'base'},
    [
      root.createComponent(
        View,
        undefined,
        root.createComponent(TextField, {label: 'First name'}),
      ),
      root.createComponent(
        View,
        undefined,
        root.createComponent(TextField, {label: 'Last name'}),
      ),
      root.createComponent(
        GridItem,
        {columnSpan: 2},
        root.createComponent(TextField, {label: 'Company'}),
      ),
    ],
  );
  const spacer = root.createComponent(BlockSpacer, {spacing: 'base'});
  const button = root.createComponent(
    Button,
    {accessibilityRole: 'submit'},
    'Submit',
  );

  const form = root.createComponent(
    Form,
    {onSubmit: () => console.log('onSubmit event')},
    [fields, spacer, button],
  );

  root.appendChild(form);
});

FormProps

disabled

Whether the form is able to be submitted. When set to `true`, this will disable the implicit submit behavior of the form.

onSubmit

A callback that is run when the form is submitted.

id

An optional override for the autogenerated form ID.