## Stepper  
Use the Stepper, StepperStep and StepperCompleted components to display content divided into a steps sequence  
Category: Navigation  

### Basic usage

```python
import dash_mantine_components as dmc
from dash import html, Output, Input, State, ctx, callback

min_step = 0
max_step = 3
active = 1

component = html.Div(
    [
        dmc.Stepper(
            id="stepper-basic-usage",
            active=active,
            children=[
                dmc.StepperStep(
                    label="First step",
                    description="Create an account",
                    children=dmc.Text("Step 1 content: Create an account", ta="center"),
                ),
                dmc.StepperStep(
                    label="Second step",
                    description="Verify email",
                    children=dmc.Text("Step 2 content: Verify email", ta="center"),
                ),
                dmc.StepperStep(
                    label="Final step",
                    description="Get full access",
                    children=dmc.Text("Step 3 content: Get full access", ta="center"),
                ),
                dmc.StepperCompleted(
                    children=dmc.Text(
                        "Completed, click back button to get to previous step",
                        ta="center",
                    )
                ),
            ],
        ),
        dmc.Group(
            justify="center",
            mt="xl",
            children=[
                dmc.Button("Back", id="back-basic-usage", variant="default"),
                dmc.Button("Next step", id="next-basic-usage"),
            ],
        ),
    ]
)


@callback(
    Output("stepper-basic-usage", "active"),
    Input("back-basic-usage", "n_clicks"),
    Input("next-basic-usage", "n_clicks"),
    State("stepper-basic-usage", "active"),
    prevent_initial_call=True,
)
def update(back, next_, current):
    button_id = ctx.triggered_id
    step = current if current is not None else active
    if button_id == "back-basic-usage":
        step = step - 1 if step > min_step else step
    else:
        step = step + 1 if step < max_step else step
    return step
```
### Color, radius and size

You can use any color from Mantine's theme colors. Colors can also be set on individual steps.

```python
import dash_mantine_components as dmc

dmc.Stepper(
    active=1,
    color="green",
    radius="lg",
    size="sm", 
    children=[
        dmc.StepperStep(label="First step", description="Create an account"),
        dmc.StepperStep(label="Second step", description="Verify email"),
    ],
)
```

Component size is controlled by two props: `size` and `iconSize`. `size` prop controls icon size, label and description font size.
`iconSize` allows to overwrite icon size separately from other size values.

```python
import dash_mantine_components as dmc

dmc.Stepper(
    active=1,
    iconSize=42,
    children=[
        dmc.StepperStep(label="First step", description="Create an account"),
        dmc.StepperStep(label="Second step", description="Verify email"),
    ],
)
```

### Loading state

To indicate loading state set `loading` prop on `Step` component, `Loader` will replace step icon.

```python
import dash_mantine_components as dmc
from dash import html

component = html.Div(
    [
        dmc.Stepper(
            active=1,
            children=[
                dmc.StepperStep(
                    label="First step",
                    description="Create an account",
                    children=dmc.Text("Step 1 content: Create an account", ta="center"),
                ),
                dmc.StepperStep(
                    label="Second step",
                    description="Verify email",
                    children=dmc.Text("Step 2 content: Verify email", ta="center"),
                    loading=True,
                ),
                dmc.StepperStep(
                    label="Final step",
                    description="Get full access",
                    children=dmc.Text("Step 3 content: Get full access", ta="center"),
                ),
            ],
        ),
    ]
)
```
### Custom icons

You can replace step icon by setting `icon` prop on Step component. To change completed check icon set `completedIcon` on Stepper component.
You can also change completed icon for each step, for example, to indicate error state.

```python
import dash_mantine_components as dmc
from dash import callback, Output, Input, State, ctx
from dash_iconify import DashIconify

min_step = 0
max_step = 3
active = 1


def get_icon(icon):
    return DashIconify(icon=icon, height=20)


component = dmc.Container(
    [
        dmc.Stepper(
            id="stepper-custom-icons",
            active=active,
            children=[
                dmc.StepperStep(
                    label="First step",
                    description="Create an account",
                    icon=get_icon(icon="material-symbols:account-circle"),
                    progressIcon=get_icon(icon="material-symbols:account-circle"),
                    completedIcon=get_icon(icon="mdi:account-check"),
                    children=[
                        dmc.Text("Step 1 content: Create an account", ta="center")
                    ],
                ),
                dmc.StepperStep(
                    label="Second step",
                    description="Verify email",
                    icon=get_icon(icon="ic:outline-email"),
                    progressIcon=get_icon(icon="ic:outline-email"),
                    completedIcon=get_icon(
                        icon="material-symbols:mark-email-read-rounded"
                    ),
                    children=[dmc.Text("Step 2 content: Verify email", ta="center")],
                ),
                dmc.StepperStep(
                    label="Final step",
                    description="Get full access",
                    icon=get_icon(icon="material-symbols:lock-outline"),
                    progressIcon=get_icon(icon="material-symbols:lock-outline"),
                    completedIcon=get_icon(icon="material-symbols:lock-open-outline"),
                    children=[dmc.Text("Step 3 content: Get full access", ta="center")],
                ),
                dmc.StepperCompleted(
                    children=[
                        dmc.Text(
                            "Completed, click back button to get to previous step",
                            ta="center",
                        )
                    ]
                ),
            ],
        ),
        dmc.Group(
            justify="center",
            mt="xl",
            children=[
                dmc.Button("Back", id="back-custom-icons", variant="default"),
                dmc.Button("Next step", id="next-custom-icons"),
            ],
        ),
    ]
)


@callback(
    Output("stepper-custom-icons", "active"),
    Input("back-custom-icons", "n_clicks"),
    Input("next-custom-icons", "n_clicks"),
    State("stepper-custom-icons", "active"),
    prevent_initial_call=True,
)
def update_with_icons(back, next_, current):
    button_id = ctx.triggered_id
    step = current if current is not None else active
    if button_id == "back-custom-icons":
        step = step - 1 if step > min_step else step
    else:
        step = step + 1 if step < max_step else step
    return step
```
### Vertical orientation

```python
import dash_mantine_components as dmc

component = dmc.Stepper(
    active=1,
    orientation="vertical",
    children=[
        dmc.StepperStep(label="First step", description="Create an account"),
        dmc.StepperStep(label="Second step", description="Verify email"),
        dmc.StepperStep(label="Final step", description="Get full access"),
    ],
)
```
### Styles API


This component supports Styles API. With Styles API, you can customize styles of any inner element. See the Styling and Theming sections of these docs for more information.


| Name                    | Static selector                          | Description                                   |
|:------------------------|:-----------------------------------------|:----------------------------------------------|
| root                    | .mantine-Stepper-root                    | Root element                                  |
| steps                   | .mantine-Stepper-steps                   | Steps controls wrapper                        |
| separator               | .mantine-Stepper-separator               | Separator line between step controls          |
| verticalSeparator       | .mantine-Stepper-verticalSeparator       | Vertical separator line between step controls |
| separatorActive         | .mantine-Stepper-separatorActive         | Separator active modifier                     |
| verticalSeparatorActive | .mantine-Stepper-verticalSeparatorActive | Vertical separator active modifier            |
| content                 | .mantine-Stepper-content                 | Current step content wrapper                  |
| stepWrapper             | .mantine-Stepper-stepWrapper             | Wrapper for the step icon and separator       |
| step                    | .mantine-Stepper-step                    | Step control button                           |
| stepIcon                | .mantine-Stepper-stepIcon                | Step icon wrapper                             |
| stepCompletedIcon       | .mantine-Stepper-stepCompletedIcon       | Completed step icon, rendered within stepIcon |
| stepBody                | .mantine-Stepper-stepBody                | Contains stepLabel and stepDescription        |
| stepLabel               | .mantine-Stepper-stepLabel               | Step label                                    |
| stepDescription         | .mantine-Stepper-stepDescription         | Step description                              |
| stepLoader              | .mantine-Stepper-stepLoader              | Step loader                                   |


### Keyword Arguments
#### Stepper

- children (a list of or a singular dash component, string or number; optional)

- id (string; optional):
    Unique ID to identify this component in Dash callbacks.

- active (number; required):
    Index of the active step.

- allowNextStepsSelect (boolean; optional):
    Determines whether next steps can be selected, `True` by default
    *.

- aria-* (string; optional):
    Wild card aria attributes.

- attributes (boolean | number | string | dict | list; optional):
    Passes attributes to inner elements of a component.  See Styles
    API docs.

- autoContrast (boolean; optional):
    Determines whether icon color with filled variant should depend on
    `background-color`. If luminosity of the `color` prop is less than
    `theme.luminosityThreshold`, then `theme.white` will be used for
    text color, otherwise `theme.black`. Overrides
    `theme.autoContrast`.

- className (string; optional):
    Class added to the root element, if applicable.

- classNames (dict; optional):
    Adds custom CSS class names to inner elements of a component.  See
    Styles API docs.

- color (optional):
    Key of `theme.colors` or any valid CSS color, controls colors of
    active and progress steps, `theme.primaryColor` by default.

- completedIcon (a list of or a singular dash component, string or number; optional):
    Step icon displayed when step is completed, check icon by default.

- contentPadding (number; optional):
    Key of `theme.spacing` or any valid CSS value to set `padding-top`
    of the content.

- darkHidden (boolean; optional):
    Determines whether component should be hidden in dark color scheme
    with `display: none`.

- data-* (string; optional):
    Wild card data attributes.

- hiddenFrom (string; optional):
    Breakpoint above which the component is hidden with `display:
    none`.

- icon (a list of or a singular dash component, string or number; optional):
    Step icon, default value is step index + 1.

- iconPosition (a value equal to: 'left', 'right'; optional):
    Icon position relative to the step body, `'left'` by default.

- iconSize (string | number; optional):
    Controls size of the step icon, by default icon size is inferred
    from `size` prop.

- lightHidden (boolean; optional):
    Determines whether component should be hidden in light color
    scheme with `display: none`.

- loading_state (dict; optional):
    Object that holds the loading state object coming from
    dash-renderer. For use with dash<3.

    `loading_state` is a dict with keys:

- mod (string | dict | list of string | dicts; optional):
    Element modifiers transformed into `data-` attributes. For
    example: "xl" or {"data-size": "xl"}. Can also be a list of
    strings or dicts for multiple modifiers. Falsy values are removed.

- orientation (a value equal to: 'vertical', 'horizontal'; optional):
    Stepper orientation, `'horizontal'` by default.

- progressIcon (a list of or a singular dash component, string or number; optional):
    Step icon displayed when step is in progress, default value is
    step index + 1.

- radius (number; optional):
    Key of `theme.radius` or any valid CSS value to set steps
    border-radius, `"xl"` by default.

- size (a value equal to: 'xs', 'sm', 'md', 'lg', 'xl'; optional):
    Controls size of various Stepper elements.

- styles (boolean | number | string | dict | list; optional):
    Adds inline styles directly to inner elements of a component.  See
    Styles API docs.

- tabIndex (number; optional):
    tab-index.

- variant (string; optional):
    variant.

- visibleFrom (string; optional):
    Breakpoint below which the component is hidden with `display:
    none`.

- wrap (boolean; optional):
    Determines whether steps should wrap to the next line if no space
    is available, `True` by default.
#### StepperStep

- children (a list of or a singular dash component, string or number; optional)

- id (string; optional):
    Unique ID to identify this component in Dash callbacks.

- allowStepClick (boolean; optional):
    Set to False to disable clicks on step.

- allowStepSelect (boolean; optional):
    Should step selection be allowed.

- aria-* (string; optional):
    Wild card aria attributes.

- attributes (boolean | number | string | dict | list; optional):
    Passes attributes to inner elements of a component.  See Styles
    API docs.

- className (string; optional):
    Class added to the root element, if applicable.

- classNames (dict; optional):
    Adds custom CSS class names to inner elements of a component.  See
    Styles API docs.

- color (optional):
    Key of `theme.colors`, by default controlled by Stepper component.

- completedIcon (a list of or a singular dash component, string or number; optional):
    Step icon displayed when step is completed.

- darkHidden (boolean; optional):
    Determines whether component should be hidden in dark color scheme
    with `display: none`.

- data-* (string; optional):
    Wild card data attributes.

- description (a list of or a singular dash component, string or number; optional):
    Step description.

- hiddenFrom (string; optional):
    Breakpoint above which the component is hidden with `display:
    none`.

- icon (a list of or a singular dash component, string or number; optional):
    Step icon, defaults to step index + 1 when rendered within
    Stepper.

- iconPosition (a value equal to: 'left', 'right'; optional):
    Icon position relative to step body, controlled by Stepper
    component.

- iconSize (number; optional):
    Icon wrapper size.

- label (a list of or a singular dash component, string or number; optional):
    Step label, render after icon.

- lightHidden (boolean; optional):
    Determines whether component should be hidden in light color
    scheme with `display: none`.

- loading (boolean; optional):
    Indicates loading state of the step.

- loading_state (dict; optional):
    Object that holds the loading state object coming from
    dash-renderer. For use with dash<3.

    `loading_state` is a dict with keys:

- mod (string | dict | list of string | dicts; optional):
    Element modifiers transformed into `data-` attributes. For
    example: "xl" or {"data-size": "xl"}. Can also be a list of
    strings or dicts for multiple modifiers. Falsy values are removed.

- orientation (a value equal to: 'vertical', 'horizontal'; optional):
    Component orientation.

- progressIcon (a list of or a singular dash component, string or number; optional):
    Step icon displayed when step is in progress.

- state (a value equal to: 'stepInactive', 'stepProgress', 'stepCompleted'; optional):
    Step state, controlled by Stepper component.

- step (number; optional):
    Step index, controlled by Stepper component *.

- styles (boolean | number | string | dict | list; optional):
    Adds inline styles directly to inner elements of a component.  See
    Styles API docs.

- tabIndex (number; optional):
    tab-index.

- variant (string; optional):
    variant.

- visibleFrom (string; optional):
    Breakpoint below which the component is hidden with `display:
    none`.

- withIcon (boolean; optional):
    Determines whether the icon should be displayed.
#### StepperCompleted

- children (a list of or a singular dash component, string or number; optional)