Selection and input

Stepper

A number nudged up and down.

iOSSwiftUI StepperAndroidCompose row with minus and plus buttonsRenders in a Screen or an Island
iOSSwiftUI Stepper
AndroidCompose row with minus and plus buttons

Import

ts
import {Stepper} from '@hzblj/kara-ui'

Props

A number with minus and plus buttons beside a label: SwiftUI's Stepper on iOS; on Android the label, the value and two icon buttons in a row. A native atom — it renders inside <Screen> or <Island>.

PropTypeDefaultDescription
label*string—

The leading text. iOS shows only the label, not the value — put the value in it if it should be seen. Android shows the value between its buttons.

onValueChange*(value: number) => void—

A button was pressed; it passes the new value, kept within min and max.

value*number—

The current value. Update it from onValueChange. iOS's native stepper counts in whole numbers.

maxnumberAndroid Number.MAX_SAFE_INTEGER

The highest value. When unset, Android has no upper limit and iOS stops at 100.

minnumberAndroid Number.MIN_SAFE_INTEGER

The lowest value. When unset, Android has no lower limit and iOS stops at 0.

stepnumber1

How much one press adds or takes away. 1 by default.

label*
string

The leading text. iOS shows only the label, not the value — put the value in it if it should be seen. Android shows the value between its buttons.

onValueChange*
(value: number) => void

A button was pressed; it passes the new value, kept within min and max.

value*
number

The current value. Update it from onValueChange. iOS's native stepper counts in whole numbers.

maxAndroid Number.MAX_SAFE_INTEGER
number

The highest value. When unset, Android has no upper limit and iOS stops at 100.

minAndroid Number.MIN_SAFE_INTEGER
number

The lowest value. When unset, Android has no lower limit and iOS stops at 0.

step1
number

How much one press adds or takes away. 1 by default.

Platform notes

  • Without min and max, iOS stops at 0 and 100 and Android has no limits — set both.
  • iOS steps in whole numbers.