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-field-group.

When to use it

Use AddressFieldGroup in checkout flows, account address management, and any form that needs a structured address input layout. It renders a responsive 2-column grid of address fields with consistent styling and label placement.

This component handles layout and display. Validation and state management should come from your form library (react-hook-form or similar).

Composition notes

AddressFieldGroup takes structured props rather than children:

• fields is an object with field-level value/onChange pairs for streetAddress, houseNumber (optional), coAddress (optional), postalCode, city, and country.
• labels provides the visible label text for each field.
• errors is an optional object with per-field error messages.
• countries is a SelectOption[] array for the country dropdown.

The country field uses a Select dropdown while the other fields use Input components, all from the storefront design system.

Behavior and theming guidance

The grid is single-column on mobile and 2-column on medium screens and up. Street address spans the full width while postal code and city sit side by side. Required fields (street, postal code, city, country) are marked in the layout.

Error messages render below their respective fields in the error color. Keep error text specific and actionable.

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=AddressFieldGroup.
• Copy/paste scope: guidance-only. Treat examples as guidance until checked against SDK package reference.

Implementation notes