Stepper — React Native component

Installation

Install just this component (copies the source into your project, no npm dependency)

npx orn-ui add stepper

Or install the whole package and import it

pnpm add orn-ui
import { Stepper } from 'orn-ui/stepper';

Depends on:core (theme + icons)

Usage

when to use — Small numeric amounts adjusted by hand: quantities, units, servings.
value / onChangeText — The value is a string: the field stays editable and empty states do not turn into NaN.
size — `md` by default, `sm` inside dense rows such as a cart line.

Demo clip not recorded yet — see MEDIA.md

Variants

size="md"

<Stepper
  value={qty}
  onChangeText={setQty}
  onIncrement={() => setQty((q) => String(Number(q) + 1))}
  onDecrement={() => setQty((q) => String(Math.max(0, Number(q) - 1)))}
/>

size="sm"

<Stepper
  value={qtySmall}
  onChangeText={setQtySmall}
  onIncrement={() => setQtySmall((q) => String(Number(q) + 1))}
  onDecrement={() => setQtySmall((q) => String(Math.max(0, Number(q) - 1)))}
  size="sm"
/>

Full demo source

const variants: VariantDef[] = [
  {
    label: 'size="md"',
    content: (
      <Stepper
        value={qty}
        onChangeText={setQty}
        onIncrement={() => setQty((q) => String(Number(q) + 1))}
        onDecrement={() => setQty((q) => String(Math.max(0, Number(q) - 1)))}
      />
    ),
  },
  {
    label: 'size="sm"',
    content: (
      <Stepper
        value={qtySmall}
        onChangeText={setQtySmall}
        onIncrement={() => setQtySmall((q) => String(Number(q) + 1))}
        onDecrement={() => setQtySmall((q) => String(Math.max(0, Number(q) - 1)))}
        size="sm"
      />
    ),
  },
];
return <VariantList variants={variants} />;

Props

Also accepts testID, forwarded to the root node. It exists for end-to-end tests (Maestro drives the app by the accessibility tree) and has no effect on how the component looks or behaves.

Name	Type	Default	Description
`value`	`string`	—	—
`onChangeText`	`(text: string) => void`	—	—
`onIncrement`	`() => void`	—	—
`onDecrement`	`() => void`	—	—
`size?`	`'sm' \| 'md' \| 'lg'`	md	Scale of the control: height, buttons, icon and typography.
`block?`	`boolean`	false	Takes up all available width and the input absorbs the extra space.
`editable?`	`boolean`	true	When false the value can only be changed with the buttons: the keyboard doesn't open and the field loses the background that marks it as editable.
`min?`	`number`	—	Minimum allowed value. Disables "-" when reached and clamps the typed value on blur. Negative values are only accepted if `min` is negative.
`max?`	`number`	—	Maximum allowed value. Disables "+" when reached and clamps the typed value.
`allowDecimals?`	`boolean`	false	Accepts a decimal separator, normalizing comma to dot.
`style?`	`StyleProp<ViewStyle>`	—	—
`incrementAccessibilityLabel?`	`string`	Increment	—
`decrementAccessibilityLabel?`	`string`	Decrement	—