Stepper props

Name	Type	Default	Description
activeStep	number	-	Zero-based index of the current step.
orientation	'horizontal' | 'vertical'	'horizontal'	Layout direction.
onStepClick	(index: number) => void	-	When set, steps are buttons. @step-click fills this prop.
label	string	Progress	Accessible name of the list.
density	'compact' | 'balanced' | 'spacious'	'balanced'	Space around each step.
indicatorPosition	'separated' | 'on-track'	'separated'	Whether the marker sits on the connector or beside a separate bar.
hasCollapsibleLabels	boolean	false	In a horizontal stepper narrower than 480px, hide every label except the current one.
horizontalOptions	{ minimumStepWidth?: number, collapsedVariant?: 'withLabelAndControls' | 'withLabel' | 'hiddenLabel' }	{ minimumStepWidth: 112, collapsedVariant: 'withLabelAndControls' }	When the horizontal stepper is narrower than minimumStepWidth times the step count, it keeps the track and shows the current step. withLabelAndControls adds Previous and Next when onStepClick is set. withLabel shows the label only. hiddenLabel leaves the track.

Step props

Name	Type	Default	Description
step	number	-	Zero-based index of this step.
label	string	-	Step name.
description	string	-	Supporting line under the label.
status	'accent' | 'success' | 'warning' | 'error'	-	Recolors the indicator only. The connector stays on the progress color.
isDisabled	boolean	false	The step cannot be activated.
isOptional	boolean	false	Appends an Optional marker.
indicator	'auto' | 'number' | 'none'	'auto'	auto shows a check, a ring, or a number. number always shows the step number.
density	'compact' | 'balanced' | 'spacious'	The stepper's density	Space for this step.

Step slots

Name	Description
default	Content under the label. In a vertical separated step it sits outside the button.
icon	Replaces the built-in indicator artwork.
end	Trailing content on the label row.