Checkout UI Extension Issues with <TextField /> Component

Shopify Plus

Topic summary

A developer successfully added components to their Shopify checkout but encountered validation issues with the TextField component in the Information section.

Core Problem:

  • Despite adding the required attribute to a TextField, customers can proceed to shipping even when the field is empty
  • The “Continue to Shipping” button remains active regardless of field completion

Root Cause Identified:
A respondent pointed out that no validation logic was implemented to check the form state and disable the continue button when required fields are empty.

Proposed Solution:
Implement form validation using React hooks (useState, useEffect) to:

  • Track the TextField value
  • Validate input on change
  • Control the button’s enabled/disabled state based on validation results

Code snippets and screenshots were shared demonstrating both the current problematic behavior and suggested implementation approach using @shopify/checkout-ui-extensions-react components.

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

Shopify Checkout Extensions

I’ve successfully added new components to my store’s checkout. I’ve been having some trouble regarding the TextField component (https://shopify.dev/docs/api/checkout-ui-extensions/components/forms/textfield). I’ve added a new field to the Information portion and I want it to be required. That being said, the customer should not be able to hit “Continue to Shipping” if my newly added is not filled in. But despite applying the required tag to the it seems that it’ll continue to shipping even if my field is not filled in.

Below I’ve attached a video of the current behavior and I’ll also be attaching my code.

Screenshot 2023-03-14 at 5.40.36 PM.png
Screenshot 2023-03-14 at 5.40.36 PM.png1682×446 53.5 KB

Screenshot 2023-03-14 at 5.41.06 PM.png
Screenshot 2023-03-14 at 5.41.06 PM.png1220×256 34.7 KB

2

Hi @raelbpos360

You haven’t added any logic to validate the form and disable the “Continue to Shipping” button when the field is empty.

import React, { useState, useEffect } from 'react';
import { BlockStack, Checkbox, TextField } from '@shopify/checkout-ui-extensions-react';
import { PostPurchaseRenderExtension } from '@shopify/checkout-ui-extensions';

export const CurbsidePickup = () => {
  const [phoneNumber, setPhoneNumber] = useState('');
  const [isValid, setIsValid] = useState(false);

  const validateForm = () => {
    setIsValid(phoneNumber.trim() !== '');
  };

  useEffect(() => {
    validateForm();
  }, [phoneNumber]);

  return (
    
  );
};

PostPurchaseRenderExtension(CurbsidePickup, {
  allowed: ({extensionApi}) => {
    return extensionApi.features.isEnabled('CHECKOUT_UI_EXTENSIONS');
  },

  render: ({extensionApi}) => {
    const {render, components} = extensionApi;
    const {CurbsidePickup} = components;

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

Make sure to replace `PostPurchaseRenderExtension` with the appropriate extension point for your use case.