How to add vertical spacing between textfield component in checkout ui extension

Technical Q&A

Topic summary

A developer is experiencing an issue with TextField components in a Shopify checkout UI extension where no vertical spacing appears between three text fields.

Problem Details:

  • Three TextField components render without any vertical spacing
  • BlockStack component was attempted but didn’t resolve the issue
  • Developer wants to avoid using the Divider component

Current Status:

  • Initial code snippet was provided (appears corrupted/reversed in the post)
  • A response from Artzen Technologies offered to help with alternative code
  • The suggested solution code snippet also appears incomplete/corrupted in the thread

Resolution: The discussion remains open with an incomplete code solution provided. The technical implementation details are unclear due to formatting issues in both the original question and the response.

Summarized with AI on November 17. AI used: claude-sonnet-4-5-20250929.
1

I have an extension that has 3 TextField components. However, when they are rendered, there is no vertical spacing at all between them. How can I add spacing between them, without using the divider component? I’ve tried BlockStack, though it didn’t seem to work. Here is my current code. Thank you!

import React, { useState, useEffect } from 'react';
import {
  useExtensionApi,
  render,
  TextField,
  useApplyAttributeChange,
} from '@shopify/checkout-ui-extensions-react';

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

Hello @a_zelinsky

Its Artzen Technologies! We will be happy to help you today.

Try this code :-

import React, { useState, useEffect } from 'react';
import {
  useExtensionApi,
  render,
  TextField,
  useApplyAttributeChange,
} from '@shopify/checkout-ui-extensions-react';

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

Let me know if need further assistance
Regards,
Artzen Technologies