Stylish UI/com.segnities007.stylishui.components.molecules/StylishStepper

StylishStepper

fun StylishStepper(steps: List<String>, modifier: Modifier = Modifier, currentStep: Int = 0, completedSteps: Set<Int> = emptySet(), enabled: Boolean = true, onStepClick: (Int) -> Unit? = null, circleSize: Dp = 28.dp, connectorHeight: Dp = 2.dp, labelStyle: TextStyle = MaterialTheme.typography.labelMedium, completedColor: Color = MaterialTheme.colorScheme.primary, activeColor: Color = MaterialTheme.colorScheme.primary, inactiveColor: Color = MaterialTheme.colorScheme.surfaceVariant, contentColor: Color = MaterialTheme.colorScheme.onSurface)

A horizontal step indicator (the web "Stepper" pattern from MUI and Chakra UI).

Each step is drawn as a numbered (or check-marked) circle connected by a line to the next step. Completed steps show a check mark, the current step is highlighted, and later steps are muted. Steps can be made tappable via onStepClick for free navigation through a flow.

Parameters

steps

The step labels, in order.

modifier

Modifier applied to the root row.

currentStep

Index of the active step. Defaults to 0.

completedSteps

Indices of steps that are already finished. Defaults to an empty set.

enabled

When false, step circles are not clickable.

onStepClick

Optional callback invoked when a step circle is tapped. When null, steps are display-only.

circleSize

Diameter of each step circle. Defaults to 28 dp.

connectorHeight

Thickness of the line between steps. Defaults to 2 dp.

labelStyle

Typography of the step labels. Defaults to MaterialTheme.typography.labelMedium.

completedColor

Fill of completed step circles. Defaults to MaterialTheme.colorScheme.primary.

activeColor

Fill of the current step circle. Defaults to MaterialTheme.colorScheme.primary.

inactiveColor

Fill of future step circles. Defaults to MaterialTheme.colorScheme.surfaceVariant.

contentColor

Icon/number color inside the circles. Defaults to MaterialTheme.colorScheme.onSurface.