Stepper

A stepper is a control that lets users incrementally adjust numerical values using dedicated "+" and "-" buttons. It enables precise modifications within a defined range. This makes it ideal for scenarios that require controlled input.

Anatomy

The Stepper is a modular control made up of reusable sections for adjusting numerical values. Its structure supports standard implementations and allows for customization.

• Text Field Section: The container houses all interactive elements for value manipulation. It contains two icon buttons and a central text field. The icon buttons increase or decrease the value by a defined step. By default, the decrement icon button uses a minus icon, and the increment icon button uses a plus icon. Users can customize these icons. The text field displays the current value and handles input validation.
• Additional Content Section: This section contains a label and help text. If displayed, a directional control parameter determines the positions of the label and help text.

Here is the stepper for mobile devices:

Create Stepper

Create FioriStepperValue

A FioriStepperValue instance configures the numerical display behavior of the Stepper. Use rememberFioriStepperValue to create an instance of FioriStepperValue. The value argument defines the starting numerical value. The decimalPlaces argument controls decimal precision by setting the maximum number of fractional digits displayed. The valueRange argument sets the value constraints, defining the minimum and maximum allowable values. The step argument specifies the step size for each increment or decrement operation.

// The initial FioriStepperValue
var value by rememberFioriStepperValue(
        value = 1f,
        decimalPlaces = 1,
        valueRange = 0f..100f,
        step = 1f
)

Create FioriStepperContent

A FioriStepperContent instance configures the visual layout and informational elements of the Stepper component. Use FioriStepperContent to define labels, helper text, error messages, and validation requirements.

• The label argument defines the primary text identifier.

• The helperText argument provides supplemental guidance or instructions for the Stepper.

• The errorMessage argument sets the dynamic validation error message shown.

• The isRequired argument controls whether the Stepper field is marked as mandatory.

// The initial FioriStepperContent
val content = FioriStepperContent(
        label = "label",
        helperText = "helpText",
        errorMessage = "errorMsg",
        isRequired = true
)

Create FioriStepper

The FioriStepper composable function configures a numeric input control with increment and decrement actions. It integrates with state management, validation logic, and user interaction handlers. Key arguments include:

• value: Represents the current value state of the stepper. It is managed via rememberFioriStepper to persist across recomposition.

• content: Defines the textual elements displayed alongside the stepper.

• onValueChange: Callback triggered when the stepper value changes. Handles validation, error messaging, and state updates.

• isError: Controls visual error indication when input violates constraints.

• isHorizontal: Controls whether the FioriStepper uses a horizontal or vertical layout style when content non-null.

• readOnly / enabled: Disables user interaction when readOnly is true or enabled is false.

// The initial FioriStepper
FioriStepper(
    value = value,
    onValueChange = {

    },
    content = content,
    isError = isError,
    readOnly = localFormCellStates.current.readOnly,
    enabled = localFormCellStates.current.enabled,
)

Handle Value Changes

The onValueChange callback executes immediately when users modify the stepper's value through UI interactions. It passes the updated value and its metadata to the callback as a FioriStepperValue instance.

onValueChange = {
    isError = it.value !in it.valueRange
    errorMsg = when {
        it.value > it.valueRange.endInclusive -> "Exceeds the maximum limit 100"
        it.value < it.valueRange.start -> "Less than the minimum limit 0"
        else -> ""
    }
    value = it
}

Customization Icon Support

The FioriStepper component lets developers customize the increment and decrement buttons using the leadingIcon and trailingIcon parameters. You can use FioriIcon objects to personalize these icons.

• leadingIcon: Icon for the decrement button. Defaults if null.
• trailingIcon: Icon for the increment button. Defaults if null.

 FioriStepper(
    value = value,
    onValueChange = {},
    leadingIcon = FioriIcon(
        resId = R.drawable.ic_sap_icon_hide,
    ),
    trailingIcon = FioriIcon(
        resId = R.drawable.ic_sap_icon_show,
    ),
    isError = isError,
    readOnly = readOnly,
    enabled = enabled
)

API Reference

See FioriStepper

---

Last update: August 25, 2025