---
title: FormLayout
description: Use a form layout to arrange fields within a form using standard spacing.
api_name: checkout-extensions
source_url:
  html: >-
    https://shopify.dev/docs/api/checkout-extensions/post-purchase/components/formlayout
  md: >-
    https://shopify.dev/docs/api/checkout-extensions/post-purchase/components/formlayout.md
---

# 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.

***

### Example

![formlayout](https://shopify.dev/assets/assets/images/api/checkout-extensions/post-purchase/components/formlayout-DPh-tGmX.png)

```ts
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);
});
```

```tsx
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>
  );
}
```

##### JS

```
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);
});
```

##### React

```
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>
  );
}
```

***

## Form​Layout​Group

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.

***