Automatically style required TextFields when they're left empty.

[edhgoose]

Please list the related package(s)

checkout-ui-extensions

If this related to specific APIs or components, please list them here

TextField - https://shopify.dev/docs/api/checkout-ui-extensions/2024-04/components/forms/textfield.

Is your feature request related to a problem? Please describe.

I have a TextField which is required. I need someone to enter a value.

I've added the required field, but as per the docs:

Whether the field needs a value. This requirement adds semantic value to the field, but it will not cause an error to appear automatically. If you want to present an error when this field is empty, you can do so with the error prop.

This seems like an odd choice to me - as I now need to write code to determine if the form has been submitted, and then use that to determine whether I need to show the error about it being required or not.

It would be awesome if the TextField (and I assume others) could maintain this state logic themselves - showing an appropriate error message if required and not completed on submit.

Describe the changes you are looking for

I would love if the TextField could, onSubmit, automatically show an error message because the field is required. I would like it if the message was customisable.

Describe alternatives you’ve considered

I've considered managing state using onSubmit to store a value as to whether the form has been submitted, and then using that to determine if an error should be shown.

If I don't do this, then the form shows with an error on load because it is empty. I'd prefer if the empty state is only highlighted to the user at the point they submit the form - as until then, there may be a good reason why it's not filled.

Additional context

[edhgoose]

As requested in #2521, I have re-raised this issue as: https://community.shopify.dev/t/automatically-style-required-textfields-when-theyre-left-empty/6408