Stepper API

API documentation for Stepper component

StepperRoot#

Props#

Defines valid properties in Stepper component.

name	type	default	description
ref	Ref<unknown>	null	The reference to the component instance.
pIf	boolean	true	Whether the component should be rendered.
style	CSSProperties \| ((instance?: StepperRootInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: StepperRootInstance) => string)	null	The class name to apply to the component.
as	string \| number \| bigint \| boolean \| ComponentClass<any, any> \| FunctionComponent<any> \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode, any, any> \| ReactPortal \| Promise<AwaitedReactNode>	null	The component type to render.
asChild	boolean	false	Whether the component should be rendered as a child component.
pt	SafeRecord<StepperRootPassThrough>	null	The pass-through props to pass to the component
ptOptions	PassThroughOptions	null	The pass-through options to pass to the component
unstyled	boolean	null	Whether the component should be rendered without classes.
dt	unknown	null	The design token to use for the component.
styles	StylesOptions<ComponentInstance>	null	The styles to use for the component.
children	ReactNode \| ((instance: StepperRootInstance) => ReactNode)	null	The children to render.
defaultValue	string \| number	null	Default value of the active step.
value	string \| number	null	Value of the active step.
linear	boolean	false	Whether the steps are clickable or not.
onValueChange	(event: useStepperChangeEvent) => void	null	Callback fired when the stepper's value changes.
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

State#

Defines valid state in Stepper component.

name	type	default	description
value	string \| number	null	Value of the active step.

Exposes#

Defines the methods and properties exposed by Stepper component.

name	type	default	description
state	useStepperState	null	The state of the useStepper.
setActiveStep	(value: string \| number) => void	null	The method to update the value of the active step.
isStepActive	(value: string \| number) => boolean	null	The method to check if the step is active.
isStepDisabled	() => boolean	null	The method to check if the step is disabled.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of Stepper component.

name	type	default	description
root	StepperRootPassThroughType<HTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the root's DOM element.
list	StepperRootPassThroughType<HTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the list's DOM element.
step	StepperRootPassThroughType<HTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the step's DOM element.
header	StepperRootPassThroughType<HTMLAttributes<HTMLButtonElement>>	null	Used to pass attributes to the header's DOM element.
number	StepperRootPassThroughType<HTMLAttributes<HTMLSpanElement>>	null	Used to pass attributes to the number's DOM element.
title	StepperRootPassThroughType<HTMLAttributes<HTMLSpanElement>>	null	Used to pass attributes to the title's DOM element.
separator	StepperRootPassThroughType<HTMLAttributes<HTMLSpanElement>>	null	Used to pass attributes to the separator's DOM element.
panels	StepperRootPassThroughType<HTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the panels's DOM element.
panel	StepperRootPassThroughType<HTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the panel's DOM element.
item	StepperRootPassThroughType<HTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the item's DOM element.
content	StepperRootPassThroughType<HTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the content's DOM element.

Types#

Instance

Instance of Stepper component.

values
ComponentInstance<StepperRootProps, StepperRootState, StepperRootExposes>

StepperList#

Props#

Defines valid properties in StepperList component.

name	type	default	description
ref	Ref<unknown>	null	The reference to the component instance.
pIf	boolean	true	Whether the component should be rendered.
style	CSSProperties \| ((instance?: StepperListInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: StepperListInstance) => string)	null	The class name to apply to the component.
as	string \| number \| bigint \| boolean \| ComponentClass<any, any> \| FunctionComponent<any> \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode, any, any> \| ReactPortal \| Promise<AwaitedReactNode>	null	The component type to render.
asChild	boolean	false	Whether the component should be rendered as a child component.
pt	SafeRecord<StepperListPassThrough>	null	The pass-through props to pass to the component
ptOptions	PassThroughOptions	null	The pass-through options to pass to the component
unstyled	boolean	null	Whether the component should be rendered without classes.
dt	unknown	null	The design token to use for the component.
styles	StylesOptions<ComponentInstance>	null	The styles to use for the component.
children	ReactNode \| ((instance: StepperListInstance) => ReactNode)	null	The children to render.
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

Exposes#

Defines the methods and properties exposed by StepperList component.

name	type	default	description
stepper	StepperRootInstance	null	The Stepper component instance.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of StepperList component.

name	type	default	description
root	StepperListPassThroughType<HTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the root's DOM element.

Types#

Instance

Instance of StepperList component.

values
ComponentInstance<StepperListProps, StepperListState, StepperListExposes>

StepperStep#

Props#

Defines valid properties in StepperStep component.

name	type	default	description
ref	Ref<unknown>	null	The reference to the component instance.
pIf	boolean	true	Whether the component should be rendered.
style	CSSProperties \| ((instance?: StepperStepInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: StepperStepInstance) => string)	null	The class name to apply to the component.
as	string \| number \| bigint \| boolean \| ComponentClass<any, any> \| FunctionComponent<any> \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode, any, any> \| ReactPortal \| Promise<AwaitedReactNode>	null	The component type to render.
asChild	boolean	false	Whether the component should be rendered as a child component.
pt	SafeRecord<StepperStepPassThrough>	null	The pass-through props to pass to the component
ptOptions	PassThroughOptions	null	The pass-through options to pass to the component
unstyled	boolean	null	Whether the component should be rendered without classes.
dt	unknown	null	The design token to use for the component.
styles	StylesOptions<ComponentInstance>	null	The styles to use for the component.
children	ReactNode \| ((instance: StepperStepInstance) => ReactNode)	null	The children to render.
value	string \| number	null	Value of the step.
disabled	boolean	false	Whether the step is disabled.
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

Exposes#

Defines the methods and properties exposed by StepperStep component.

name	type	default	description
stepper	StepperRootInstance	null	The Stepper component instance.
stepperitem	StepperItemInstance	null	The StepperItem component instance.
activeValue	string \| number	null	Current active value of the stepper.
active	boolean	null	Whether the step is active or not.
disabled	boolean	null	Whether the step is disabled or not.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of StepperStep component.

name	type	default	description
root	StepperStepPassThroughType<HTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the root's DOM element.

Types#

Instance

Instance of StepperStep component.

values
ComponentInstance<StepperStepProps, StepperStepState, StepperStepExposes>

StepperNumber#

Props#

Defines valid properties in StepperNumber component.

name	type	default	description
ref	Ref<unknown>	null	The reference to the component instance.
pIf	boolean	true	Whether the component should be rendered.
style	CSSProperties \| ((instance?: StepperNumberInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: StepperNumberInstance) => string)	null	The class name to apply to the component.
as	string \| number \| bigint \| boolean \| ComponentClass<any, any> \| FunctionComponent<any> \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode, any, any> \| ReactPortal \| Promise<AwaitedReactNode>	null	The component type to render.
asChild	boolean	false	Whether the component should be rendered as a child component.
pt	SafeRecord<StepperNumberPassThrough>	null	The pass-through props to pass to the component
ptOptions	PassThroughOptions	null	The pass-through options to pass to the component
unstyled	boolean	null	Whether the component should be rendered without classes.
dt	unknown	null	The design token to use for the component.
styles	StylesOptions<ComponentInstance>	null	The styles to use for the component.
children	ReactNode \| ((instance: StepperNumberInstance) => ReactNode)	null	The children to render.
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

Exposes#

Defines the methods and properties exposed by StepperNumber component.

name	type	default	description
stepper	StepperRootInstance	null	The Stepper component instance.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of StepperNumber component.

name	type	default	description
root	StepperNumberPassThroughType<HTMLAttributes<HTMLSpanElement>>	null	Used to pass attributes to the root's DOM element.

Types#

Instance

Instance of StepperNumber component.

values
ComponentInstance<StepperNumberProps, StepperNumberState, StepperNumberExposes>

StepperTitle#

Props#

Defines valid properties in StepperTitle component.

name	type	default	description
ref	Ref<unknown>	null	The reference to the component instance.
pIf	boolean	true	Whether the component should be rendered.
style	CSSProperties \| ((instance?: StepperTitleInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: StepperTitleInstance) => string)	null	The class name to apply to the component.
as	string \| number \| bigint \| boolean \| ComponentClass<any, any> \| FunctionComponent<any> \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode, any, any> \| ReactPortal \| Promise<AwaitedReactNode>	null	The component type to render.
asChild	boolean	false	Whether the component should be rendered as a child component.
pt	SafeRecord<StepperTitlePassThrough>	null	The pass-through props to pass to the component
ptOptions	PassThroughOptions	null	The pass-through options to pass to the component
unstyled	boolean	null	Whether the component should be rendered without classes.
dt	unknown	null	The design token to use for the component.
styles	StylesOptions<ComponentInstance>	null	The styles to use for the component.
children	ReactNode \| ((instance: StepperTitleInstance) => ReactNode)	null	The children to render.
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

Exposes#

Defines the methods and properties exposed by StepperTitle component.

name	type	default	description
stepper	StepperRootInstance	null	The Stepper component instance.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of StepperTitle component.

name	type	default	description
root	StepperTitlePassThroughType<HTMLAttributes<HTMLSpanElement>>	null	Used to pass attributes to the root's DOM element.

Types#

Instance

Instance of StepperTitle component.

values
ComponentInstance<StepperTitleProps, StepperTitleState, StepperTitleExposes>

StepperSeparator#

Props#

Defines valid properties in StepperSeparator component.

name	type	default	description
ref	Ref<unknown>	null	The reference to the component instance.
pIf	boolean	true	Whether the component should be rendered.
style	CSSProperties \| ((instance?: StepperSeparatorInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: StepperSeparatorInstance) => string)	null	The class name to apply to the component.
as	string \| number \| bigint \| boolean \| ComponentClass<any, any> \| FunctionComponent<any> \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode, any, any> \| ReactPortal \| Promise<AwaitedReactNode>	null	The component type to render.
asChild	boolean	false	Whether the component should be rendered as a child component.
pt	SafeRecord<StepperSeparatorPassThrough>	null	The pass-through props to pass to the component
ptOptions	PassThroughOptions	null	The pass-through options to pass to the component
unstyled	boolean	null	Whether the component should be rendered without classes.
dt	unknown	null	The design token to use for the component.
styles	StylesOptions<ComponentInstance>	null	The styles to use for the component.
children	ReactNode \| ((instance: StepperSeparatorInstance) => ReactNode)	null	The children to render.
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

Exposes#

Defines the methods and properties exposed by StepperSeparator component.

name	type	default	description
stepper	StepperRootInstance	null	The Stepper component instance.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of StepperSeparator component.

name	type	default	description
root	StepperSeparatorPassThroughType<HTMLAttributes<HTMLSpanElement>>	null	Used to pass attributes to the root's DOM element.

StepperPanels#

Props#

Defines valid properties in StepperPanels component.

name	type	default	description
ref	Ref<unknown>	null	The reference to the component instance.
pIf	boolean	true	Whether the component should be rendered.
style	CSSProperties \| ((instance?: StepperPanelsInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: StepperPanelsInstance) => string)	null	The class name to apply to the component.
as	string \| number \| bigint \| boolean \| ComponentClass<any, any> \| FunctionComponent<any> \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode, any, any> \| ReactPortal \| Promise<AwaitedReactNode>	null	The component type to render.
asChild	boolean	false	Whether the component should be rendered as a child component.
pt	SafeRecord<StepperPanelsPassThrough>	null	The pass-through props to pass to the component
ptOptions	PassThroughOptions	null	The pass-through options to pass to the component
unstyled	boolean	null	Whether the component should be rendered without classes.
dt	unknown	null	The design token to use for the component.
styles	StylesOptions<ComponentInstance>	null	The styles to use for the component.
children	ReactNode \| ((instance: StepperPanelsInstance) => ReactNode)	null	The children to render.
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

Exposes#

Defines the methods and properties exposed by StepperPanels component.

name	type	default	description
stepper	StepperRootInstance	null	The Stepper component instance.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of StepperPanels component.

name	type	default	description
root	StepperPanelsPassThroughType<HTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the root's DOM element.

StepperPanel#

Props#

Defines valid properties in StepperPanel component.

name	type	default	description
ref	Ref<unknown>	null	The reference to the component instance.
pIf	boolean	true	Whether the component should be rendered.
style	CSSProperties \| ((instance?: StepperPanelInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: StepperPanelInstance) => string)	null	The class name to apply to the component.
as	string \| number \| bigint \| boolean \| ComponentClass<any, any> \| FunctionComponent<any> \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode, any, any> \| ReactPortal \| Promise<AwaitedReactNode>	null	The component type to render.
asChild	boolean	false	Whether the component should be rendered as a child component.
pt	SafeRecord<StepperPanelPassThrough>	null	The pass-through props to pass to the component
ptOptions	PassThroughOptions	null	The pass-through options to pass to the component
unstyled	boolean	null	Whether the component should be rendered without classes.
dt	unknown	null	The design token to use for the component.
styles	StylesOptions<ComponentInstance>	null	The styles to use for the component.
children	ReactNode \| ((instance: StepperPanelInstance) => ReactNode)	null	The children to render.
value	string \| number	null	Value of the step.
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

Exposes#

Defines the methods and properties exposed by StepperPanel component.

name	type	default	description
stepper	StepperRootInstance	null	The Stepper component instance.
stepperitem	StepperItemInstance	null	The StepperItem component instance.
activeValue	string \| number	null	Current active value of the stepper.
active	boolean	null	Whether the step is active or not.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of StepperPanel component.

name	type	default	description
root	StepperPanelPassThroughType<HTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the root's DOM element.

StepperItem#

Props#

Defines valid properties in StepperItem component.

name	type	default	description
ref	Ref<unknown>	null	The reference to the component instance.
pIf	boolean	true	Whether the component should be rendered.
style	CSSProperties \| ((instance?: StepperItemInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: StepperItemInstance) => string)	null	The class name to apply to the component.
as	string \| number \| bigint \| boolean \| ComponentClass<any, any> \| FunctionComponent<any> \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode, any, any> \| ReactPortal \| Promise<AwaitedReactNode>	null	The component type to render.
asChild	boolean	false	Whether the component should be rendered as a child component.
pt	SafeRecord<StepperItemPassThrough>	null	The pass-through props to pass to the component
ptOptions	PassThroughOptions	null	The pass-through options to pass to the component
unstyled	boolean	null	Whether the component should be rendered without classes.
dt	unknown	null	The design token to use for the component.
styles	StylesOptions<ComponentInstance>	null	The styles to use for the component.
children	ReactNode \| ((instance: StepperItemInstance) => ReactNode)	null	The children to render.
value	string \| number	null	Value of the step.
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

Exposes#

Defines the methods and properties exposed by StepperItem component.

name	type	default	description
stepper	StepperRootInstance	null	The Stepper component instance.
active	boolean	null	Whether the step is active or not.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of StepperItem component.

name	type	default	description
root	StepperItemPassThroughType<HTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the root's DOM element.

StepperContent#

Props#

Defines valid properties in StepperContent component.

name	type	default	description
ref	Ref<unknown>	null	The reference to the component instance.
pIf	boolean	true	Whether the component should be rendered.
style	CSSProperties \| ((instance?: StepperContentInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: StepperContentInstance) => string)	null	The class name to apply to the component.
as	string \| number \| bigint \| boolean \| ComponentClass<any, any> \| FunctionComponent<any> \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode, any, any> \| ReactPortal \| Promise<AwaitedReactNode>	null	The component type to render.
asChild	boolean	false	Whether the component should be rendered as a child component.
pt	SafeRecord<StepperContentPassThrough>	null	The pass-through props to pass to the component
ptOptions	PassThroughOptions	null	The pass-through options to pass to the component
unstyled	boolean	null	Whether the component should be rendered without classes.
dt	unknown	null	The design token to use for the component.
styles	StylesOptions<ComponentInstance>	null	The styles to use for the component.
children	ReactNode \| ((instance: StepperContentInstance) => ReactNode)	null	The children to render.
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

Exposes#

Defines the methods and properties exposed by StepperContent component.

name	type	default	description
stepper	StepperRootInstance	null	The Stepper component instance.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of StepperContent component.

name	type	default	description
root	StepperContentPassThroughType<HTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the root's DOM element.

useStepper#

Props#

Defines valid properties in useStepper.

name	type	default	description
defaultValue	string \| number	null	Default value of the active step.
value	string \| number	null	Value of the active step.
linear	boolean	false	Whether the steps are clickable or not.
onValueChange	(event: useStepperChangeEvent) => void	null	Callback fired when the stepper's value changes.

State#

Defines valid state in useStepper.

name	type	default	description
value	string \| number	null	Value of the active step.

Exposes#

Defines the methods and properties exposed by useStepper.

name	type	default	description
state	useStepperState	null	The state of the useStepper.
setActiveStep	(value: string \| number) => void	null	The method to update the value of the active step.
isStepActive	(value: string \| number) => boolean	null	The method to check if the step is active.
isStepDisabled	() => boolean	null	The method to check if the step is disabled.

Events#

useStepperChangeEvent

Event fired when the stepper's value changes.

name	type	description
value	string \| number	The value of the stepper.

Types#

Instance

Instance of useStepper headless.

values
HeadlessInstance<useStepperProps, useStepperState, useStepperExposes>