Stepper

An unstyled, accessible stepper component with compound composition for multi-step workflows.

Build fully custom step-by-step workflows with complete control over layout and styling.

Content I

basic-demo

Pre-styled Versions

Choose a pre-styled library to use Stepper with ready-made designs.

Styled

Theme-based styling with CSS variables

Tailwind

Utility-first styling with Tailwind CSS

For hook-based usage without components, see the Headless API.

Features#

Compound component API with eleven sub-components: Root, List, Step, Item, Header, Number, Title, Separator, Panels, Panel, Content
Horizontal layout via List + Step + Panels + Panel
Vertical layout via Item + Step + Panel + Content
Steps-only mode by omitting Panels/Panel

Usage#

import { Stepper } from 'primereact/stepper';

<Stepper.Root>
    <Stepper.List>
        <Stepper.Step>
            <Stepper.Header>
                <Stepper.Number></Stepper.Number>
                <Stepper.Title></Stepper.Title>
            </Stepper.Header>
            <Stepper.Separator />
        </Stepper.Step>
    </Stepper.List>
    <Stepper.Panels>
        <Stepper.Panel></Stepper.Panel>
    </Stepper.Panels>
</Stepper.Root>

Vertical Layout#

Wrap each step header and panel inside Stepper.Item for vertical orientation. Use Stepper.Separator and Stepper.Content inside Stepper.Panel for proper vertical structure.

<Stepper.Root>
    <Stepper.Item>
        <Stepper.Step>
            <Stepper.Header>
                <Stepper.Number></Stepper.Number>
                <Stepper.Title></Stepper.Title>
            </Stepper.Header>
        </Stepper.Step>
        <Stepper.Panel>
            <Stepper.Separator />
            <Stepper.Content></Stepper.Content>
        </Stepper.Panel>
    </Stepper.Item>
</Stepper.Root>

Behavior#

Motion Animation#

Use motionProps on Root to configure panel open/close animations in vertical layout.

<Stepper.Root motionProps={{ name: 'p-collapsible', cssVarPrefix: 'stepper-panel', hideStrategy: 'remove' }}></Stepper.Root>

See Motion for animation phases, CSS variables, and hide strategies.

Polymorphic Rendering#

Use as on any sub-component to change the rendered HTML element.

<Stepper.Root as="nav">
    <Stepper.List as="ol">
        <Stepper.Step as="li"></Stepper.Step>
    </Stepper.List>
</Stepper.Root>

Default elements: Root=div, List=div, Step=div, Item=div, Header=button, Number=span, Title=span, Separator=span, Panels=div, Panel=div, Content=div.

Render Function Children#

Panel accepts a render function as children, providing access to the component instance. The instance exposes stepper (root instance), stepperitem (parent item instance), active, and activeValue.

<Stepper.Panel>{(instance) => <div>Step is {instance.active ? 'active' : 'inactive'}</div>}</Stepper.Panel>

Pass Through#

Some parts may not be visible in the preview depending on the component's current state.

Content I

/* Select a part to see its CSS selector for custom styling */

API#

StepperRoot#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: StepperRootInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: StepperRootInstance) => string)`	—
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>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`StepperRootInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<StepperRootPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: StepperRootInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`defaultValue`	`string` \| `number`	—
Default value of the active step.
`value`	`string` \| `number`	—
Value of the active step.
`linear`	`boolean`	`false`
Whether the steps are clickable or not.
`onValueChange`	`(event: useStepperChangeEvent) => void`	—
Callback fired when the stepper's value changes.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Attribute	Value
`data-scope`	`"stepper"`
`data-part`	`"root"`

Defines passthrough(pt) options of Stepper component.

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

StepperList#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: StepperListInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: StepperListInstance) => string)`	—
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>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`StepperListInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<StepperListPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: StepperListInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Defines passthrough(pt) options of StepperList component.

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

StepperItem#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: StepperItemInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: StepperItemInstance) => string)`	—
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>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`StepperItemInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<StepperItemPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: StepperItemInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`value`	`string` \| `number`	—
Value of the step.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Attribute	Value
`data-scope`	`"stepper"`
`data-part`	`"item"`
`data-active`	Present when item is active

Defines passthrough(pt) options of StepperItem component.

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

StepperStep#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: StepperStepInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: StepperStepInstance) => string)`	—
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>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`StepperStepInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<StepperStepPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: StepperStepInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`value`	`string` \| `number`	—
Value of the step.
`disabled`	`boolean`	`false`
Whether the step is disabled.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Attribute	Value
`data-scope`	`"stepper"`
`data-part`	`"step"`
`data-active`	Present when step is active
`data-disabled`	Present when step is disabled

Defines passthrough(pt) options of StepperStep component.

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

StepperHeader#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: StepperHeaderInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: StepperHeaderInstance) => string)`	—
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>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`StepperHeaderInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<StepperHeaderPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: StepperHeaderInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Attribute	Value
`data-scope`	`"stepper"`
`data-part`	`"header"`

Defines passthrough(pt) options of StepperHeader component.

label	type	description
root	StepperHeaderPassThroughType<HTMLAttributes<HTMLButtonElement>>	Used to pass attributes to the root's DOM element.

StepperNumber#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: StepperNumberInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: StepperNumberInstance) => string)`	—
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>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`StepperNumberInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<StepperNumberPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: StepperNumberInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Defines passthrough(pt) options of StepperNumber component.

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

StepperTitle#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: StepperTitleInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: StepperTitleInstance) => string)`	—
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>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`StepperTitleInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<StepperTitlePassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: StepperTitleInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Defines passthrough(pt) options of StepperTitle component.

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

StepperSeparator#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: StepperSeparatorInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: StepperSeparatorInstance) => string)`	—
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>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`StepperSeparatorInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<StepperSeparatorPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: StepperSeparatorInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Defines passthrough(pt) options of StepperSeparator component.

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

StepperPanels#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: StepperPanelsInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: StepperPanelsInstance) => string)`	—
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>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`StepperPanelsInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<StepperPanelsPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: StepperPanelsInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Defines passthrough(pt) options of StepperPanels component.

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

StepperPanel#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: StepperPanelInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: StepperPanelInstance) => string)`	—
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>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`StepperPanelInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<StepperPanelPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: StepperPanelInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`value`	`string` \| `number`	—
Value of the step.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Attribute	Value
`data-scope`	`"stepper"`
`data-part`	`"panel"`
`data-active`	Present when panel is active

Defines passthrough(pt) options of StepperPanel component.

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

StepperContent#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: StepperContentInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: StepperContentInstance) => string)`	—
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>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`StepperContentInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<StepperContentPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: StepperContentInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Defines passthrough(pt) options of StepperContent component.

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

Accessibility#

Stepper container is defined with the tablist role. Each stepper header has a tab role and aria-controls to refer to the corresponding stepper content element. The content element of each stepper has tabpanel role, an id to match the aria-controls of the header and aria-labelledby reference to the header as the accessible name. Use aria-labelledby on the root element to specify an element to describe the Stepper.

Tab Header Keyboard Support#

Key	Function
`tab`	Moves focus through the header.
`enter`	Activates the focused stepper header.
`space`	Activates the focused stepper header.