Hold Stepper

A plus and minus stepper. A tap changes the value by one step. Holding a button repeats, slowly at first and then faster, and stops the moment the button is released, the pointer leaves or the limit is reached. The value slides in from the direction it moved. Both buttons are 44pt, the pair reads as one adjustable control to screen readers, and reduced motion drops the slide. Built for React Native and Expo with react-native only; this page previews it in the browser through react-native-web.

Installation

CLI

npx @modus-ui/cli add hold-stepper

Manual

1. Copy the code from the component tab.
2. Create a file at components/ui/hold-stepper.tsx.
3. Paste the code.

It needs no packages beyond react-native, which your Expo or React Native app already has.

Usage

import { useState } from "react";
import { HoldStepper } from "@/components/ui/hold-stepper";

export default function Example() {
  const [guests, setGuests] = useState(2);

  return <HoldStepper label="guests" min={1} max={12} value={guests} onChange={setGuests} />;
}

Props