react-test/docs/data/joy/components/stepper/stepper.md

productId, title, components, githubLabel, materialDesign

productId	title	components	githubLabel	materialDesign
joy-ui	React Stepper component	Stepper, Step, StepButton, StepIndicator	scope: stepper	https://m1.material.io/components/steppers.html

Stepper

Steppers convey progress through numbered steps. It provides a wizard-like workflow.

{{"component": "@mui/docs/ComponentLinkHeader"}}

Introduction

Stepper displays progress through a sequence of logical and numbered steps. It support horizontal and vertical orientation for desktop and mobile viewports.

Joy UI Steppers are implemented using a collection of related components:

• Stepper - a required container for steps. Renders as a <ol> by default.
• Step - a step. Renders as a <li> by default.
• StepIndicator - an optional indicator of a step.

{{"demo": "StepperUsage.js", "hideToolbar": true, "bg": "gradient"}}

Basics

import Stepper from '@mui/joy/Stepper';
import Step from '@mui/joy/Step';

{{"demo": "BasicStepper.js"}}

Customization

Indicator

Pass StepIndicator as an element to Step's indicator prop to create number or icon indicators.

The StepIndicator supports Joy UI's four global variants: soft (default), solid, outlined, and plain.

{{"demo": "IndicatorStepper.js"}}

:::info To learn how to add your own variants, check out Themed components—Extend variants. Note that you lose the global variants when you add custom variants. :::

Indicator at the top

Set Step's orientation="vertical" to show an indicator at the top.

{{"demo": "IndicatorTopStepper.js"}}

Button

To make the Step clickable, renders the StepButton component as a direct child of the Step.

{{"demo": "ButtonStepper.js"}}

Sizes

The Stepper component comes in three sizes: sm, md (default), and lg.

{{"demo": "SizesStepper.js"}}

:::info To learn how to add custom sizes to the component, check out Themed components—Extend sizes. :::

Vertical

Use orientation="vertical" to display the Stepper vertically. If you don't provide an indicator prop to the Step, a dot (pseudo element) will be used as the indicator.

{{"demo": "VerticalStepper.js"}}

Extra content

For vertical Steppers, you can pass more content to the Step by grouping it inside an HTML element.

The Step switches its display to CSS grid when the Stepper's orientation is vertical.

{{"demo": "VerticalExtraContentStepper.js"}}

Connector

The connector is a pseudo element of the Step. To customize it, target ::after element of the Step using sx prop.

{{"demo": "ConnectorStepper.js"}}

CSS Variables

{{"demo": "StepperVariables.js"}}

Common examples

Company registration

{{"demo": "CompanyRegistrationStepper.js"}}

Dotted connector

{{"demo": "DottedConnector.js"}}

Icon stepper

{{"demo": "IconStepper.js"}}