Counter

PreviewCopy Anchor Link

UsageCopy Anchor Link

import { Counter } from '@vitnode/core/components/ui/counter'

const [quantity, setQuantity] = React.useState(1)

<Counter aria-label="Tickets" max={10} min={1} onValueChange={setQuantity} value={quantity} />

Digits roll the short way round: 9 → 10 rolls to 0 as a new 1 slides in. For uncontrolled use, pass defaultValue.

Steps and limitsCopy Anchor Link

A step that would pass a limit stops at it: with max={12} and step={5}, 10 goes to 12. Buttons disable at min and max.

Sliding numberCopy Anchor Link

The rolling digits on their own, for any number.

import { SlidingNumber } from '@vitnode/core/components/ui/sliding-number'

<SlidingNumber className="text-5xl font-semibold" value={downloads} />

It inherits font size and color, uses tabular figures, and handles negatives and up to 6 decimals.

In a formCopy Anchor Link

Counter is a standalone control. To save a number with AutoForm, use Number Field.

AccessibilityCopy Anchor Link

• The buttons are labelled "Decrease" / "Increase" in the user's language.
• Screen readers hear each new value, not the rolling digits.
• Name the counter with aria-label or aria-labelledby. "Increase" what?
• With reduced motion, digits change instantly.

PropsCopy Anchor Link

CounterCopy Anchor Link

SlidingNumberCopy Anchor Link