Stepper

A controlled stepper with plus and minus buttons. children is the label and usually shows the current value.

import { Stepper, useState } from "onescript/views"

function QuantityStepper() {
  const [count, setCount] = useState(1)
  return (
    <Stepper
      value={count}
      onChange={setCount}
      min={1}
      max={10}
    >
      {`Quantity: ${count}`}
    </Stepper>
  )
}

Prop	Type	Description
`value`	`number`	Current value.
`onChange`	`(value: number) => void`	Runs when the user taps plus or minus.
`min`	`number`	Optional lower bound.
`max`	`number`	Optional upper bound. Must be greater than `min`.
`step`	`number`	Positive step. Defaults to `1`.
`onEditingChanged`	`(editing: boolean) => void`	Receives `true` while the user holds a button to repeat and `false` when they release.
`children`	`ViewChild`	The label.

The matching button is disabled at min or max.

Custom increment and decrement

Pass onIncrement and onDecrement instead of value to handle each press yourself. The side without a handler is disabled. These props cannot be combined with value, onChange, min, max, or step.

import { Stepper, useState } from "onescript/views"

function Pager({ pageCount }: { pageCount: number }) {
  const [page, setPage] = useState(1)
  return (
    <Stepper
      onIncrement={page < pageCount ? () => setPage(page + 1) : undefined}
      onDecrement={page > 1 ? () => setPage(page - 1) : undefined}
    >
      {`Page ${page}`}
    </Stepper>
  )
}

Prop	Type	Description
`onIncrement`	`() => void`	Runs when the user taps plus.
`onDecrement`	`() => void`	Runs when the user taps minus.

At least one of them is required. Also accepts Modifiers. It is only available in App and Action view sessions; widgets reject it with an unsupported view type error.

Custom increment and decrement

On this page