Stepper

Stepper allows users to make a selection from a range of values.

RevenueCat

RevenueCat

Add subscriptions to your apps in minutes

Ad Get started for free

Stepper

Android
@Composable
public fun Stepper(
    value: Float,
    onValueChange: (Float) -> Unit,
    steps: Int,
    decreaseIcon: @Composable () -> Unit,
    increaseIcon: @Composable () -> Unit,
    modifier: Modifier = Modifier,
    valueRange: ClosedFloatingPointRange<Float> = 0f..(steps + 1).toFloat(),
    backgroundColor: Color = MaterialTheme.colors.background,
    contentColor: Color = contentColorFor(backgroundColor),
    iconColor: Color = contentColor,
    enableRangeSemantics: Boolean = true,
    content: @Composable BoxScope.() -> Unit,
)

Parameters
value Current value of the Stepper. If outside of valueRange provided, value will be coerced to this range.
onValueChange Lambda in which value should be updated
steps Specifies the number of discrete values, excluding min and max values, evenly distributed across the whole value range. Must not be negative. If 0, stepper will have only min and max values and no steps in between
decreaseIcon A slot for an icon which is placed on the decrease (bottom) button
increaseIcon A slot for an icon which is placed on the increase (top) button
modifier Modifiers for the Stepper layout
valueRange Range of values that Stepper value can take. Passed value will be coerced to this range
backgroundColor Color representing the background color for the stepper.
contentColor Color representing the color for content in the middle.
iconColor Icon tint Color which used by increaseIcon and decreaseIcon that defaults to contentColor, unless specifically overridden.
enableRangeSemantics Boolean to decide if range semantics should be enabled. Set to false to disable default stepper range semantics. Alternatively to customize semantics set this value as false and chain new semantics to the modifier.
content Content body for the Stepper.

Stepper

Android
@Composable
public fun Stepper(
    value: Int,
    onValueChange: (Int) -> Unit,
    valueProgression: IntProgression,
    decreaseIcon: @Composable () -> Unit,
    increaseIcon: @Composable () -> Unit,
    modifier: Modifier = Modifier,
    backgroundColor: Color = MaterialTheme.colors.background,
    contentColor: Color = contentColorFor(backgroundColor),
    iconColor: Color = contentColor,
    enableRangeSemantics: Boolean = true,
    content: @Composable BoxScope.() -> Unit,
)

Parameters
value Current value of the Stepper. If outside of valueProgression provided, value will be coerced to this range.
onValueChange Lambda in which value should be updated
valueProgression Progression of values that Stepper value can take. Consists of rangeStart, rangeEnd and step. Range will be equally divided by step size
decreaseIcon A slot for an icon which is placed on the decrease (bottom) button
increaseIcon A slot for an icon which is placed on the increase (top) button
modifier Modifiers for the Stepper layout
backgroundColor Color representing the background color for the stepper.
contentColor Color representing the color for content in the middle.
iconColor Icon tint Color which used by increaseIcon and decreaseIcon that defaults to contentColor, unless specifically overridden.
enableRangeSemantics Boolean to decide if default stepper semantics should be enabled. Set to false to disable default stepper range semantics. Alternatively to customize semantics set this value as false and chain new semantics to the modifier.
content Content body for the Stepper.
Android
Deprecated This overload is provided for backwards compatibility with Compose for Wear OS 1.1. A newer overload is available with an additional enableDefaultSemantics parameter.

Stepper

@Composable
public fun Stepper(
    value: Float,
    onValueChange: (Float) -> Unit,
    steps: Int,
    decreaseIcon: @Composable () -> Unit,
    increaseIcon: @Composable () -> Unit,
    modifier: Modifier = Modifier,
    valueRange: ClosedFloatingPointRange<Float> = 0f..(steps + 1).toFloat(),
    backgroundColor: Color = MaterialTheme.colors.background,
    contentColor: Color = contentColorFor(backgroundColor),
    iconColor: Color = contentColor,
    content: @Composable BoxScope.() -> Unit,
): Unit

Parameters
value Current value of the Stepper. If outside of valueRange provided, value will be coerced to this range.
onValueChange Lambda in which value should be updated
steps Specifies the number of discrete values, excluding min and max values, evenly distributed across the whole value range. Must not be negative. If 0, stepper will have only min and max values and no steps in between
decreaseIcon A slot for an icon which is placed on the decrease (bottom) button
increaseIcon A slot for an icon which is placed on the increase (top) button
modifier Modifiers for the Stepper layout
valueRange Range of values that Stepper value can take. Passed value will be coerced to this range
backgroundColor Color representing the background color for the stepper.
contentColor Color representing the color for content in the middle.
iconColor Icon tint Color which used by increaseIcon and decreaseIcon that defaults to contentColor, unless specifically overridden.
Android
Deprecated This overload is provided for backwards compatibility with Compose for Wear OS 1.1. A newer overload is available with an additional enableDefaultSemantics parameter.

Stepper

@Composable
public fun Stepper(
    value: Int,
    onValueChange: (Int) -> Unit,
    valueProgression: IntProgression,
    decreaseIcon: @Composable () -> Unit,
    increaseIcon: @Composable () -> Unit,
    modifier: Modifier = Modifier,
    backgroundColor: Color = MaterialTheme.colors.background,
    contentColor: Color = contentColorFor(backgroundColor),
    iconColor: Color = contentColor,
    content: @Composable BoxScope.() -> Unit,
)

Parameters
value Current value of the Stepper. If outside of valueProgression provided, value will be coerced to this range.
onValueChange Lambda in which value should be updated
valueProgression Progression of values that Stepper value can take. Consists of rangeStart, rangeEnd and step. Range will be equally divided by step size
decreaseIcon A slot for an icon which is placed on the decrease (bottom) button
increaseIcon A slot for an icon which is placed on the increase (top) button
modifier Modifiers for the Stepper layout
backgroundColor Color representing the background color for the stepper.
contentColor Color representing the color for content in the middle.
iconColor Icon tint Color which used by increaseIcon and decreaseIcon that defaults to contentColor, unless specifically overridden.