Exact exports, props, slots, hooks, and runtime behavior belong to SDK package reference. Examples are guidance unless explicitly marked copy-paste-safe.

Review component intent and composition guidance before wiring this component into an app. Then use the live playground to confirm the rendered behavior.

Playground

• Import path: @enadhq/enad-react-sdk/client/storefront.
• Live playground: /components/commerce/address-form.

When to use it

Use AddressForm when checkout needs a complete shipping or billing address surface with consistent labels, validation hooks, and optional business-related fields.

Composition notes

The form is fully controlled through value and onChange. countries switches the country field from free text to a select, while showCompany, showRegion, showPhone, and showEmail let you tune the field set for different markets and checkout flows.

Keep the value shape aligned with your checkout model so server validation can map straight back to field keys such as postalCode and address1. When the market changes the required fields, prefer toggling the optional props instead of forking the whole form markup.

Behavior and theming guidance

Keep validation and persistence outside the component so the form stays tied to the real checkout state. Use errors and labels to localize the experience and make field-level problems obvious.

The form already wires aria-invalid and field-level error descriptions for the text inputs, so the main job is feeding it accurate error messages at the right time. Use className to place the form inside your checkout grid, but keep spacing and field hierarchy consistent so billing and shipping forms still feel related.

Contract scope

• Use SDK package reference for exact props, exports, slots, hooks, and runtime behavior.
• Public import: @enadhq/enad-react-sdk/client/storefront.
• Playground route: /sandbox?component=AddressForm.
• Copy/paste scope: guidance-only. Treat examples as guidance until checked against SDK package reference.

Implementation notes