API reference for ProgressIndicator. For usage examples, see the React tab.
ProgressIndicator.Root
Name
Type
Default
children* (required)
ReactNode
—
ProgressIndicator.Step children.
compact
boolean
false
Uses compact progress segments and shows the counter summary.
completeLabel
ReactNode
Complete!
Text shown when every step is complete.
currentLabel
ReactNode
—
Compact layout: bold label for the active step.
currentStep
number
—
Compact layout: current step number shown in the counter.
isComplete
boolean
false
Shows the complete state.
nextLabel
ReactNode
—
Compact layout: next-step label rendered after "Next:".
totalSteps
number
—
Compact layout: total number of steps shown in the counter.
Name
Type
Default
aria-describedby
string
—
Identifies the element (or elements) that describes the object.
aria-details
string
—
Identifies the element (or elements) that provide a detailed, extended description for the object.
aria-label
string
—
Defines a string value that labels the current element.
aria-labelledby
string
—
Identifies the element (or elements) that labels the current element.
id
string
—
The unique identifier for the DOM element.
role
AriaRole
—
The ARIA role assigned to the element to improve accessibility. Example roles include "button", "navigation", "dialog", etc.
Name
Type
Default
className
string
—
CSS class names to apply custom styling.
style
CSSProperties
—
Inline styles specified as a React-compatible CSS properties object.
ProgressIndicator.Step
Name
Type
Default
step* (required)
number
—
The 1-based step number.
children
ReactNode
—
The content or child elements nested within this component.
label
ReactNode
—
Label for the step. Compact labels are visually hidden.
state
ProgressIndicatorStepState
inactive
The state of the step.
Name
Type
Default
id
string
—
The unique identifier for the DOM element.
role
AriaRole
—
The ARIA role assigned to the element to improve accessibility. Example roles include "button", "navigation", "dialog", etc.
Name
Type
Default
key
Key | null
—
ref
Ref<HTMLLIElement>
—
Allows getting a ref to the component instance. Once the component unmounts, React will set ref.current to null (or call the ref with null if you passed a callback ref).
