How to make an input field required in checkout ui extensions based on the user's shipping method

Technical Q&A
1

I’ve added a text input field via checkout ui extensions to my checkout. I would like to make the text input field required for the customer to fill out, if the customer selects a specific shipping method. I would really appreciate any insight on whether or not this is possible. Thank you!

1 Like
2

Any suggestions?

3

You can add custom validation to a custom input

https://shopify.dev/docs/apps/checkout/validation/client-side-validation?framework=react&extension=react
In your validation you should access the shipping methos (aka selectedDeliveryOption with the useDeliveryGroups Hook:
https://shopify.dev/docs/api/checkout-ui-extensions/2023-10/apis/delivery#standardapi-propertydetail-deliverygroups

4

If anyone still looking for this.

You can use useExtensionCapability(“block_progress”) to block the checkout progress. Here is a good example https://shopify.dev/docs/apps/checkout/validation/block-checkout-progress?framework=react

1 Like