Stepper

Sets a whole number a step at a time: − and + either side of it, the number between them. The landing's seats count with it. Built on Okami's secondary icon buttons.

Playground

import { Stepper } from "@/components/shared/stepper";

<Stepper
  value={seats}
  onValueChange={setSeats}
  min={1}
  max={20}
  aria-label="Seats"
  decreaseLabel="One fewer"
  increaseLabel="One more"
/>

Stepper

Min

Max

Label

Reading

Announce

With a question and a total

The landing's pricing: the question names the stepper (aria-labelledby), and the total beside it says the month aloud, so the stepper keeps quiet (announce={false}).

How many of you take bookings?

€117 a month for 3 seats

import { Stepper } from "@/components/shared/stepper";

<Stepper
  aria-labelledby="seats"
  value={seats}
  onValueChange={setSeats}
  min={1}
  max={20}
  decreaseLabel="One seat fewer"
  increaseLabel="One seat more"
  announce={false}
/>
<span id="seats">How many of you take bookings?</span>
<p aria-live="polite">{total} a month for {seats} seats</p>

At its ends

The number never passes min or max: at the least, − rests; at the most, + does.

import { Stepper } from "@/components/shared/stepper";

<Stepper value={1} min={1} max={20} … />
<Stepper value={20} min={1} max={20} … />

API reference

Prop	Type	Default	Description
value	number	—	The number shown. Pair with onValueChange.
onValueChange	(value: number) => void	—	Called with the next number, already within min and max.
min	number	0	The least it counts to; − rests there.
max	number	Infinity	The most it counts to; + rests there.
decreaseLabel	string	—	The − button's name: “One seat fewer”.
increaseLabel	string	—	The + button's name: “One seat more”.
announce	boolean	true	Says the number aloud as it changes. Off when a line beside it says more.
aria-label \| aria-labelledby	string	—	What it counts. One of the two is required.

Usage

For a small count people nudge: seats, guests, sessions. A number someone types (a price, a duration) is an Input.
Name what it counts, and name each button by what it does to it: “One seat more”, not “Plus”.
Give it real ends. A stepper that climbs forever is a field in disguise.