Adaptive stepper

When to use #

Use it for

Cart lines and guest counts that start at none.
Small integer quantities with a maximum.

Skip it when

The value can be large or typed; use a number field.

Installation #

terminal

pnpm dlx shadcn@latest add https://caliperui.site/r/adaptive-stepper.json

Adds its 4 files to components/ui/, each with its own stylesheet, and installs their packages. No account needed. The first part also adds Caliper UI’s tokens; import them once as in Installation.

Usage #

This is the code behind the preview above.

example.tsx

import { useState } from "react"
import { AdaptiveStepper } from "@/components/ui/adaptive-stepper"

export function GuestCount() {
  const [guests, setGuests] = useState(0);
  return <AdaptiveStepper label="Guests" value={guests} min={0} max={6} onValueChange={setGuests} />;
}

API reference #

AdaptiveStepper

component

PropTypeDefault

labelstring"Quantity"

valuenumber—

defaultValuenumber0

minnumber0

maxnumber10

stepnumber1

disabledboolean—

namestring—

onValueChange((value: number) => void)—

classNamestring—

It exposes group and spinbutton semantics, with aria-label, aria-disabled, aria-hidden, aria-valuenow, aria-valuemin and aria-valuemax kept in step with state.

KeyBehaviour

↑Moves to the previous item or value.

→Moves to the next item or value.

↓Moves to the next item or value.

←Moves to the previous item or value.

HomeJumps to the first item or the minimum.

EndJumps to the last item or the maximum.

Motion #

It declares no animation in its component source. Any transition comes from its stylesheet, which uses the duration tokens that collapse to instant under prefers-reduced-motion.