Published

StepNavigation

import { StepNavigation } from "@wfp/react";

() => {
  return <StepNavigation selectedStep={1} />;
};

Prop	Default	Description	Value
children `React.ReactNode`	–	Provide the contents of your StepNavigation
className `string`	–	Provide a className that is applied to the root nav component for the StepNavigationProps
vertical `boolean`	–	Specify whether the StepNavigation will be displayed vertically	vertical
role `string`	–	By default, this value is "navigation". You can also provide an alternate role if it makes sense from the accessibility-side
selectedStep `number`	–	Optionally provide an index for the currently selected step

import { StepNavigationItem } from "@wfp/react";

() => {
  return <StepNavigationItem />;
};

Prop	Default	Description
className `string`	–	Provide a className that is applied to the StepNavigation component
helperText `ReactNode`	–	Provide text that is used alongside the control label for additional help
index `number`	–	Provide the index of the each item
label `string`	–	Provide the text that will be read by a screen reader when visiting this control
role `string`	–	By default, this value is "presentation". You can also provide an alternate role if it makes sense from the accessibility-side
selectedStep `number`	0	Optionally provide an index for the currently selected step default: 0
page `number`	0	The page number of the step. default: 0
status `StatusType`	–	Provide status one of "warning" \| "error" \| "in-progress" status prop type to your step to give more meaning.
renderAnchor `(p: object) => {}`	–	An optional parameter to allow overriding the anchor rendering. Useful for using Tab along with react-router or other client side router libraries.
onClick `(e: object) => {}`	() => {}	On click handler to change the currently active item. default: () => {}
handleTabClick `(e?: any,index?: number,label?: string) => {}`	() => {}	default: () => {}