Components / Wizard

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.

ReferenceError: React is not defined

ReferenceError: React is not defined

ReferenceError: React is not defined

Wizard props

Property	Required	Type	Default	Description
`cancel`	no	Function		Callback to call when the user cancels the Wizard.
`cancelText`	no	String	Cancel	Text for the Cancel button.
`finish`	no	Function		Callback to call when the user finishes the Wizard.
`finishText`	no	String	Finish	Text for the Finish button.
`pages`	yes	Array	[]	An array of Wizard Pages.
`saving`	no	Boolean	false	When true, renders the Finish button with a spinner icon and disables the Back button.
`savingText`	no	String	Saving	Text for the Finish button when `saving` is true.

Page object props

Property	Required	Type	Default	Description
`backComponent`	no	Node		Replaces the standard Back button.
`finishComponent`	no	Node		Replaces the standard Finish button.
`hideFinishButton`	no	Boolean		Hides the Finish button.
`hideNextButton`	no	Boolean	false	Whether to hide the Next button.
`nextEnabled`	no	Function		Callback to determine whether to enable the Next button. The Wizard's `getPage` function is passed as an argument to the callback.
`nextText`	no	Function		Callback to determine the text for the Next button.
`onClickBack`	no	Function		Called when the user clicks the Back button. Can optionally return a page index to go back to.
`onClickNext`	no	Function		Called when the user clicks the Next button.
`render`	yes	Function		Function that returns JSX for a page.

Imports

Import React components (including CSS):

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