Warning alert:Deprecated feature
This implementation has been deprecated in favor of a newer implementation, and is no longer getting maintained or enhanced. To learn more about the process, visit our about page.
If you seek a wizard solution that allows for more composition, see the React tab.
Examples
Basic
The content of this step overflows and creates a scrollbar, which causes a tabindex of "0", a role of "region", and an aria-label or aria-labelledby to be applied.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer bibendum in neque nec pharetra. Duis lacinia vel sapien ut imperdiet. Nunc ultrices mollis dictum. Duis tempus, massa nec tincidunt tempor, enim ex porttitor odio, eu facilisis dolor tortor id sapien. Etiam sit amet molestie lacus. Nulla facilisi. Duis eget finibus ipsum. Quisque dictum enim sed sodales porta. Curabitur eget orci eu risus posuere pulvinar id nec turpis. Morbi mattis orci vel posuere tincidunt. Fusce bibendum et libero a auctor.
Proin elementum commodo sodales. Quisque eget libero mattis, ornare augue at, egestas nisi. Mauris ultrices orci fringilla pretium mattis. Aliquam erat volutpat. Sed pharetra condimentum dui, nec bibendum ante. Vestibulum sollicitudin, sem accumsan pharetra molestie, purus turpis lacinia lorem, commodo sodales quam lectus a urna. Nam gravida, felis a lacinia varius, ex ipsum ultrices orci, non egestas diam velit in mi. Ut sit amet commodo orci. Duis sed diam odio. Duis mi metus, dignissim in odio nec, ornare aliquet libero. Sed luctus elit nibh. Quisque et felis diam. Integer ac metus dolor.
Validate on button press
This example demonstrates how to use the WizardContextConsumer to consume the WizardContext. WizardContext can be used to imperatively move to a specific wizard step.
The definition of the WizardContext is as follows:
interface WizardContext {
goToStepById: (stepId: number | string) => void;
goToStepByName: (stepName: string) => void;
onNext: () => void;
onBack: () => void;
onClose: () => void;
activeStep: WizardStep;
}Props
Wizard
| Name | Type | Default | Description |
|---|---|---|---|
| stepsrequired | WizardStep[] | The wizard steps configuration object | |
| appendTo | HTMLElement | (() => HTMLElement) | null | The parent container to append the modal to. Defaults to document.body |
| backButtonText | React.ReactNode | 'Back' | (Unused if footer is controlled) The Back button text |
| cancelButtonText | React.ReactNode | 'Cancel' | (Unused if footer is controlled) The Cancel button text |
| className | string | '' | Additional classes spread to the Wizard |
| closeButtonAriaLabel | string | 'Close' | (Unused if footer is controlled) aria-label for the close button |
| description | React.ReactNode | '' | The wizard description |
| descriptionComponent | 'div' | 'p' | 'p' | Component type of the description |
| descriptionId | string | An optional id for the description | |
| footer | React.ReactNode | null | (Use to control the footer) Passing in a footer component lets you control the buttons yourself |
| hasDrawer | boolean | false | Flag indicating the wizard has a drawer for at least one of the wizard steps |
| hasNoBodyPadding | boolean | false | Can remove the default padding around the main body content by setting this to true |
| height | number | string | null | Custom height of the wizard |
| hideClose | boolean | false | Flag indicating whether the close button should be in the header |
| isDrawerExpanded | boolean | false | Flag indicating the wizard drawer is expanded |
| isNavExpandable | boolean | false | Flag indicating nav items with sub steps are expandable |
| isOpen | boolean | undefined | Flag indicating Wizard modal is open. Wizard will be placed into a modal if this prop is provided |
| mainAriaLabel | string | null | Adds an accessible name to the wizard body when the body content overflows and renders a scrollbar. |
| mainAriaLabelledBy | string | null | Adds an accessible name to the wizard body by passing the the id of one or more elements. The aria-labelledby will only be applied when the body content overflows and renders a scrollbar. |
| navAriaLabel | string | null | Aria-label for the Nav |
| navAriaLabelledBy | string | null | Sets aria-labelledby on nav element |
| nextButtonText | React.ReactNode | 'Next' | (Unused if footer is controlled) The Next button text |
| onBack | ( newStep: { id?: string | number; name: React.ReactNode }, prevStep: { prevId?: string | number; prevName: React.ReactNode } ) => void | null | (Unused if footer is controlled) Callback function after Back button is clicked |
| onClose | () => void | () => undefined as any | Callback function to close the wizard |
| onCurrentStepChanged | (step: WizardStep) => void | Callback function to signal the current step in the wizard | |
| onExpandDrawer | () => void | () => undefined as any | Callback function for when the drawer is toggled. Can be used to set browser focus in the drawer. |
| onGoToStep | ( newStep: { id?: string | number; name: React.ReactNode }, prevStep: { prevId?: string | number; prevName: React.ReactNode } ) => void | null | Callback function when a step in the nav is clicked |
| onNext | ( newStep: { id?: string | number; name: React.ReactNode }, prevStep: { prevId?: string | number; prevName: React.ReactNode } ) => void | null | (Unused if footer is controlled) Callback function after Next button is clicked |
| onSave | () => void | (Unused if footer is controlled) Callback function to save at the end of the wizard, if not specified uses onClose | |
| startAtStep | number | 1 | The current step the wizard is on (1 or higher) |
| title | string | null | The wizard title to display if header is desired |
| titleId | string | An optional id for the title | |
| width | number | string | null | Custom width of the wizard |
WizardNav
| Name | Type | Default | Description |
|---|---|---|---|
| aria-label | string | Aria-label applied to the nav element | |
| aria-labelledby | string | Sets the aria-labelledby attribute on the nav element | |
| children | any | children should be WizardNavItem components | |
| isOpen | boolean | false | Whether the nav is expanded |
| ouiaSafe | No type info | true | |
| returnList | boolean | false | True to return the inner list without the wrapping nav element |
WizardNavItem
| Name | Type | Default | Description |
|---|---|---|---|
| steprequired | number | The step passed into the onNavItemClick callback | |
| children | React.ReactNode | null | Can nest a WizardNav component for substeps |
| content | React.ReactNode | '' | The content to display in the nav item |
| href | string | null | An optional url to use for when using an anchor component |
| id | string | number | The id for the nav item | |
| isCurrent | boolean | false | Whether the nav item is the currently active item |
| isDisabled | boolean | false | Whether the nav item is disabled |
| isExpandable | boolean | false | Flag indicating that this NavItem has child steps and is expandable |
| navItemComponent | 'button' | 'a' | 'button' | Component used to render WizardNavItem |
| onNavItemClick | (step: number) => any | () => undefined | Callback for when the nav item is clicked |
| ouiaSafe | No type info | true |
WizardHeader
| Name | Type | Default | Description |
|---|---|---|---|
| titlerequired | string | Title of the wizard | |
| closeButtonAriaLabel | string | Aria-label applied to the X (Close) button | |
| description | React.ReactNode | Description of the wizard | |
| descriptionComponent | 'div' | 'p' | 'div' | Component type of the description |
| descriptionId | string | id for the description | |
| hideClose | boolean | Flag indicating whether the close button should be in the header | |
| onClose | () => void | () => undefined | Callback function called when the X (Close) button is clicked |
| titleId | string | id for the title |
WizardBody
| Name | Type | Default | Description |
|---|---|---|---|
| activeSteprequired | WizardStep | The currently active WizardStep | |
| aria-labelledbyrequired | string | Adds an accessible name to the wizard body by passing the the id of one or more elements. The aria-labelledby will only be applied when the body content overflows and renders a scrollbar. | |
| childrenrequired | any | Anything that can be rendered in the Wizard body | |
| aria-label | string | Adds an accessible name to the wizard body when the body content overflows and renders a scrollbar. | |
| hasDrawer | boolean | ||
| hasNoBodyPadding | boolean | false | Set to true to remove the default body padding |
| isDrawerExpanded | boolean | Flag indicating the wizard drawer is expanded | |
| mainComponent | React.ElementType | 'div' | Component used as the primary content container |
| onExpandDrawer | () => void | Callback function for when the drawer is toggled |
WizardFooter
| Name | Type | Default | Description |
|---|---|---|---|
| childrenrequired | any | Buttons in the footer |
WizardToggle
| Name | Type | Default | Description |
|---|---|---|---|
| activeSteprequired | WizardStep | The currently active WizardStep | |
| isNavOpenrequired | boolean | If the nav is open | |
| navrequired | (isWizardNavOpen: boolean) => React.ReactElement | Function that returns the WizardNav component | |
| onNavTogglerequired | (isOpen: boolean) => void | Callback function for when the nav is toggled | |
| stepsrequired | WizardStep[] | The wizard steps | |
| aria-label | string | 'Wizard Toggle' | The button's aria-label |
| children | React.ReactNode | The WizardFooter | |
| hasDrawer | boolean | Flag indicating the wizard has a drawer for at least one of the wizard steps | |
| hasNoBodyPadding | boolean | false | Set to true to remove body padding |
| isDrawerExpanded | boolean | Flag indicating the wizard drawer is expanded | |
| isInPage | boolean | true | If the wizard is in-page |
| mainAriaLabel | string | null | Adds an accessible name to the wizard body when the body content overflows and renders a scrollbar. |
| mainAriaLabelledBy | string | null | Adds an accessible name to the wizard body by passing the the id of one or more elements. The aria-labelledby will only be applied when the body content overflows and renders a scrollbar. |
| onExpandDrawer | () => void | Callback function for when the drawer is toggled |
WizardStep
| Name | Type | Default | Description |
|---|---|---|---|
| namerequired | React.ReactNode | The name of the step | |
| canJumpTo | boolean | Enables or disables the step in the navigation. Enabled by default. | |
| component | any | The component to render in the main body | |
| drawerPanelContent | any | The content to render in the drawer panel (use when hasDrawer prop is set on the wizard). | |
| drawerToggleButton | React.ReactNode | Custom drawer toggle button that opens the drawer. | |
| enableNext | boolean | (Unused if footer is controlled) The condition needed to enable the Next button | |
| hideBackButton | boolean | (Unused if footer is controlled) True to hide the Back button | |
| hideCancelButton | boolean | (Unused if footer is controlled) True to hide the Cancel button | |
| id | string | number | Optional identifier | |
| isDisabled | boolean | Flag to disable the step in the navigation | |
| isFinishedStep | boolean | Setting to true hides the side nav and footer | |
| nextButtonText | React.ReactNode | (Unused if footer is controlled) Can change the Next button text. If nextButtonText is also set for the Wizard, this step specific one overrides it. | |
| stepNavItemProps | React.HTMLProps<HTMLButtonElement | HTMLAnchorElement> | WizardNavItemProps | Props to pass to the WizardNavItem | |
| steps | WizardStep[] | Sub steps |
CSS variables
| Expand or collapse column | Selector | Variable | Value |
|---|
