AddressFieldGroup
Structured address form layout with street, postal code, city, and country fields. Integrates with react-hook-form for validation and error display.
Best for
Import
import { AddressFieldGroup } from "@enadhq/enad-react-sdk/client/storefront"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:
fieldsis an object with field-level value/onChange pairs forstreetAddress,houseNumber(optional),coAddress(optional),postalCode,city, andcountry.labelsprovides the visible label text for each field.errorsis an optional object with per-field error messages.countriesis aSelectOption[]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.
Examples
Live examples you can edit directly in the sandbox.
Address form fields
A responsive grid of address inputs with labels and a country selector. Wire the fields to react-hook-form register calls in your checkout flow.
Component Sets
Preview the first example across the available component-set presets to compare tone, spacing, and structural defaults.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| fields | { streetAddress: DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>; ... 4 more ...; country: { ...; }; } | — | react-hook-form register props for each field |
| errors | string | — | No description yet. |
| labels | { streetAddress: string; houseNumber: string; coAddress: string; postalCode: string; city: string; country: string; } | — | No description yet. |
| countries | string | — | No description yet. |