Skip to main content

Overview

HAAPI stepper UI components

The HAAPI React SDK provides a set of common HAAPI Stepper UI components that let you build highly customized UIs while still relying on the SDK's defaults. They are the building blocks HaapiStepperStepUI is made of, and what you compose your own UI from with useHaapiStepper.

Naming convention

The HAAPI Stepper UI components are the UI representation of the main HAAPI entities, named with a UI suffix: HaapiStepperStepUI displays/interacts with a HaapiStep, HaapiStepperLinkUI with a HaapiLink, and so on. Collection components use the plural form (HaapiStepperActionsUI, HaapiStepperLinksUI, HaapiStepperMessagesUI).

Usage

Compose the building blocks to customize a step. For example, pass a children render function to HaapiStepperFormUI to swap in your own username field and an Ant Design submit button, while the built-in HaapiStepperFormFieldUI still manages the values and submission:

Loading playground…

For styling, see the CSS Customization section in the Overview.