Skip to main content

HaapiStepperFormUI

Features​

Built-in HAAPI form action support​

Renders a HAAPI form action inside the stepper. Tests in haapi-stepper/feature/actions/form/HaapiStepperFormUI.spec.tsx cover the supported usage patterns:

const onSubmit: HaapiStepperNextStep<HaapiStepperFormAction> = (action, payload) => nextStep(action, payload);

<HaapiStepperFormUI action={loginAction} onSubmit={onSubmit} />

By default, the HaapiStepperFormUI:

  • Automatically renders all non-hidden fields with built-in HAAPI field components.
  • Keeps hidden fields in the submission payload without rendering them.
  • Submits the original action together with the current form values as payload (Map<string, string>).

Customization​

Customization via interceptors​

Use HaapiStepperFormFieldRenderInterceptor to adjust data, swap components, or omit fields while still leveraging the built-in state management.

The formFieldRenderInterceptor is better suited for customization of form fields. For form-level customization (e.g. adding elements between fields, field group customizations), consider using the children render interceptor as described in the next section.

Loading playground…

See more examples in HaapiStepperFormUI.spec.tsx (describe('Via Interceptors') → Data customization / UI customization).

Customization via composition (children render interceptor)​

Passing children to the HaapiStepperFormUI component disables the default renderer. Provide a render function that receives the visible form fields, and the current formState.

This approach provides full control over the form content, while still leveraging the built-in state management and submission handling. It is better suited for complex customizations, such as adding elements between fields, changing the form layout, implementing custom field groupings, or customizing the submit button.

Note that, as any other render interceptor, returning null or undefined from the children render interceptor will prevent the form content from rendering. Also, returning the HaapiStepperFormAPI data allows you to delegate back to the default form, optionally with customized data.

Loading playground…

See more examples in HaapiStepperFormUI.spec.tsx (describe('Via Composition (children render interceptor)')).

Behaviour overrides around submission​

Because submit is exposed through context, you can layer on additional behaviour (confirmation prompts, analytics, pre-submit validation) before delegating to the incoming onSubmit.

Loading playground…

See more examples in HaapiStepperFormUI.spec.tsx (the Behavior customization describe blocks).