Variable StepperConst

Type Declaration

• • (props: StepperPropsExtend): Element

  • Create a customized Material UI Stepper component. This component provides a step-by-step interface with configurable labels and content for each step.

    Parameters

    • props: StepperPropsExtend

      The properties passed to the Stepper element

    Returns Element

    The Stepper component

    Component

    Example

    // Basic usage
    <Stepper
      activeStep={1}
      steps={[
        {
          stepLabel: { label: 'Step 1' },
          stepContent: { children: 'Content for step 1' }
        },
        {
          stepLabel: { label: 'Step 2' },
          stepContent: { children: 'Content for step 2' }
        }
      ]}
    />
    
    // With custom styling and optional step
    <Stepper
      activeStep={0}
      orientation="vertical"
      steps={[
        {
          id: "step1",
          stepLabel: {
            label: 'First Step',
            optional: <Typography variant="caption">Optional</Typography>
          },
          stepContent: { children: 'Step content' },
          props: { sx: { my: 1 } }
        },
        null,  // Skip this step
        {
          stepLabel: { label: 'Final Step' },
          stepContent: { children: 'Final content' }
        }
      ]}
    />
    Copy

    See

    https://mui.com/material-ui/react-stepper/