FormLayout

Use a form layout to arrange fields within a form using standard spacing. Every nested field or group will stack along the block axis. If you want visually group fields nested in a form layout, use a form layout group.

Anchor to ExampleExample

import {

extend,

FormLayout,

FormLayoutGroup,

TextField,

} from '@shopify/post-purchase-ui-extensions';

extend('Checkout::PostPurchase::Render', (root) => {

const formLayout = root.createComponent(FormLayout, undefined, [

root.createComponent(TextField, {

label: 'Address',

id: 'address',

}),

root.createComponent(FormLayoutGroup, undefined, [

root.createComponent(TextField, {

label: 'City',

id: 'city',

}),

root.createComponent(TextField, {

label: 'Postal code',

id: 'postal',

}),

]),

]);

root.appendChild(formLayout);

});

import {

render,

FormLayout,

FormLayoutGroup,

TextField,

} from '@shopify/post-purchase-ui-extensions-react';

render('Checkout::PostPurchase::Render', () => <App />);

function App() {

return (

</FormLayoutGroup>

</FormLayout>

);

}

import {
  extend,
  FormLayout,
  FormLayoutGroup,
  TextField,
} from '@shopify/post-purchase-ui-extensions';

extend('Checkout::PostPurchase::Render', (root) => {
  const formLayout = root.createComponent(FormLayout, undefined, [
    root.createComponent(TextField, {
      label: 'Address',
      name: 'address',
      id: 'address',
    }),
    root.createComponent(FormLayoutGroup, undefined, [
      root.createComponent(TextField, {
        label: 'City',
        name: 'city',
        id: 'city',
      }),
      root.createComponent(TextField, {
        label: 'Postal code',
        name: 'postal',
        id: 'postal',
      }),
    ]),
  ]);

  root.appendChild(formLayout);
});

import {
  render,
  FormLayout,
  FormLayoutGroup,
  TextField,
} from '@shopify/post-purchase-ui-extensions-react';

render('Checkout::PostPurchase::Render', () => <App />);

function App() {
  return (
    <FormLayout>
      <TextField label="Address" name="address" id="address" />
      <FormLayoutGroup>
        <TextField label="City" name="city" id="city" />
        <TextField label="Postal code" name="postal" id="postal" />
      </FormLayoutGroup>
    </FormLayout>
  );
}

Anchor to FormLayoutGroupFormLayoutGroup

Use a form layout group to group fields within a form layout. Grouped fields will appear inline with one another when possible, with each field taking up equal spacing.

Was this page helpful?