Skip to main content

Pivotal UI

v19.1.2

Wizard

The Wizard component allows the user to navigate through a series of Wizard pages. Each page has a render function which returns the JSX required to show the page. Various callbacks can be provided as props to customize the Wizard's behavior.

Basic example
ReferenceError: React is not defined
With saving and savingText
ReferenceError: React is not defined
With custom back and finish components
ReferenceError: React is not defined

Wizard props

PropertyRequiredTypeDefaultDescription
cancelnoFunctionCallback to call when the user cancels the Wizard.
cancelTextnoStringCancelText for the Cancel button.
finishnoFunctionCallback to call when the user finishes the Wizard.
finishTextnoStringFinishText for the Finish button.
pagesyesArray[]An array of Wizard Pages.
savingnoBooleanfalseWhen true, renders the Finish button with a spinner icon and disables the Back button.
savingTextnoStringSavingText for the Finish button when saving is true.

Page object props

PropertyRequiredTypeDefaultDescription
backComponentnoNodeReplaces the standard Back button.
finishComponentnoNodeReplaces the standard Finish button.
hideFinishButtonnoBooleanHides the Finish button.
hideNextButtonnoBooleanfalseWhether to hide the Next button.
nextEnablednoFunctionCallback to determine whether to enable the Next button. The Wizard's getPage function is passed as an argument to the callback.
nextTextnoFunctionCallback to determine the text for the Next button.
onClickBacknoFunctionCalled when the user clicks the Back button. Can optionally return a page index to go back to.
onClickNextnoFunctionCalled when the user clicks the Next button.
renderyesFunctionFunction that returns JSX for a page.

Imports

Import React components (including CSS):

import {Wizard} from 'pivotal-ui/react/wizard';