Skip to main content

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.

Anchor to formpropsFormProps

Anchor to onSubmit
onSubmit
() => void
required

A callback that is run when the form is submitted.

Anchor to disabled
disabled
boolean

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

Anchor to id
id
string

An optional override for the autogenerated form ID.

Was this section helpful?

Basic Form

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

export default reactExtension(
'purchase.checkout.block.render',
() => <Extension />,
);

function Extension() {
return (
<Form
onSubmit={() =>
console.log('onSubmit event')
}
>
<Grid
columns={['50%', '50%']}
spacing="base"
>
<View>
<TextField label="First name" />
</View>
<View>
<TextField label="Last name" />
</View>
<GridItem columnSpan={2}>
<TextField label="Company" />
</GridItem>
</Grid>
<BlockSpacer spacing="base" />
<Button accessibilityRole="submit">
Submit
</Button>
</Form>
);
}

Preview

Anchor to best-practicesBest Practices

  • Wrap around all form input elements.

  • Forms can have only one submit button and it must be at the end of the form.

Was this section helpful?