@frontend_zz/regio-check

zz-regio-check combines the postcode input, validation, remote region lookup and result notification into a single self-contained web component. It replaces the former zz-regio-check-input molecule and zz-regio-check organism, which were split across an input component and an orchestrating wrapper.

Usage

<zz-regio-check url="/api/regiocheck"></zz-regio-check>

import '@frontend_zz/regio-check/RegioCheck.register.js';

const regioCheck = document.querySelector('zz-regio-check');
regioCheck.content = myContent;

Properties

| Property | Attribute | Type | Default | Description | | --- | --- | --- | --- | --- | | content | – | RegioCheckContentInterface | – | Copy for the neutral, success, warning and error states | | heading | heading | RegioCheckHeading | colorHeadingAndSizeLarge | Heading style variant | | isLoading | is-loading | boolean | false | Shows the loading spinner overlay | | status | status | NotificationVariant | neutral | Current result state (reflected) | | surface | surface | SurfaceType | none | Surface elevation styling (reflected) | | useModal | use-modal | boolean | false | Renders the neutral input state inside a modal | | postcode | postcode | string | '' | The postcode value | | url | url | string | – | Endpoint that resolves region membership |

Events

| Name | Description | | ---------- | ---------------------------------------------------- | | finished | Fires when a region lookup request completes | | dismiss | Fires when the modal is dismissed (when use-modal) |

Behaviour

• On connect, the component restores the last checked postcode and result from cookies (regiocheck.postcode and regiocheck.in-regio).
• Submitting a valid postcode (Enter or the search button) posts it to url and updates status based on the binnenRegio response, persisting the outcome to cookies and pushing an analytics event to the dataLayer.
• The retry link returns the component to the neutral input state.