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

[a_zelinsky]

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', () => <App />);

function App() {
  const { extensionPoint } = useExtensionApi();
  const [eoriNumber, setEoriNumber] = useState('');
  const [vatNumber, setVatNumber] = useState('');
  const [kycNumber, setKycNumber] = useState('');

  const handleEoriNumberChange = (val) => {
    setEoriNumber(val)
  }

  const handleVatNumberChange = (val) => {
    setVatNumber(val)
  }

  const handleKycNumberChange = (val) => {
    setKycNumber(val)
  }

  const applyAttributeChange = useApplyAttributeChange();

  useEffect(() => {
    if (eoriNumber) {
      // Update the checkout line item with the VAT number attribute
      async function updateEoriAttribute() {
        let res = await applyAttributeChange({
          type: 'updateAttribute',
          key: 'eori_number',
          value: eoriNumber,
        });
      }

      updateEoriAttribute()
    }

    if (vatNumber) {
      // Update the checkout line item with the VAT number attribute
      async function updateVATAttribute() {
        let res = await applyAttributeChange({
          type: 'updateAttribute',
          key: 'vat_number',
          value: vatNumber,
        });
      }

      updateVATAttribute()
    }

    if (kycNumber) {
      // Update the checkout line item with the KYC number attribute
      async function updateKycAttribute() {
        let res = await applyAttributeChange({
          type: 'updateAttribute',
          key: 'kyc_number',
          value: kycNumber,
        });
      }

      updateKycAttribute()
    }
  }, [eoriNumber, vatNumber, kycNumber, applyAttributeChange]);


  return (
    <>
      <TextField
        label="EORI Number (Required in EU)"
        name="eori_number"
        value={eoriNumber}
        onChange={(val) => handleEoriNumberChange(val)}
      />
      <TextField
        label="VAT Number (Required in EU)"
        name="vat_number"
        value={vatNumber}
        onChange={(val) => handleVatNumberChange(val)}
      />
      <TextField
        label="KYC Number (Required in India)"
        name="kyc_number"
        value={kycNumber}
        onChange={(val) => handleKycNumberChange(val)}
      />
      </>
  );
}

[Artzen_tech]

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', () => <App />);

function App() {
  const { extensionPoint } = useExtensionApi();
  const [eoriNumber, setEoriNumber] = useState('');
  const [vatNumber, setVatNumber] = useState('');
  const [kycNumber, setKycNumber] = useState('');

  const handleEoriNumberChange = (val) => {
    setEoriNumber(val);
  };

  const handleVatNumberChange = (val) => {
    setVatNumber(val);
  };

  const handleKycNumberChange = (val) => {
    setKycNumber(val);
  };

  const applyAttributeChange = useApplyAttributeChange();

  useEffect(() => {
    // Your existing code for attribute updates
  }, [eoriNumber, vatNumber, kycNumber, applyAttributeChange]);

  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
      <TextField
        label="EORI Number (Required in EU)"
        name="eori_number"
        value={eoriNumber}
        onChange={(val) => handleEoriNumberChange(val)}
      />
      <TextField
        label="VAT Number (Required in EU)"
        name="vat_number"
        value={vatNumber}
        onChange={(val) => handleVatNumberChange(val)}
      />
      <TextField
        label="KYC Number (Required in India)"
        name="kyc_number"
        value={kycNumber}
        onChange={(val) => handleKycNumberChange(val)}
      />
    </div>
  );
}

Let me know if need further assistance
Regards,
Artzen Technologies