Stepper
Adjusts a number up or down in fixed steps.
Installation
pnpm dlx shadcn@latest add @paneui/stepperUsage
Examples
Motion
With reduced motion the rolling digits cross-fade instead.
Keyboard
Click the number to type a value. Arrow Up and Arrow Down step it. The − and + buttons switch off at min and max.
API Reference
Built on the Number Field primitive. Only the props this library adds or changes are listed; everything else passes through.
Stepper
Number field with − and + step buttons. Also accepts every prop of NumberField.Root.
- aria-label
- string
- Accessible name, applied to the value input (not the root).
- decrementLabel= "Decrease"
- string
- Accessible name of the − button; translate it with the rest of your UI.
- incrementLabel= "Increase"
- string
- Accessible name of the + button.
- unit
- ReactNode
- Text after the number, e.g. "guests". Visual only.
- size= "default"
- "sm" | "default"
- Control height (32 / 40px).
- value
- number | null
- Controlled value.
- defaultValue
- number
- Value on first render.
- onValueChange
- (value: number | null, details) => void
- Called when the value changes.
- format
- Intl.NumberFormatOptions
- Formats both the input and the rolling display, e.g. currency.
- locale
- Intl.LocalesArgument
- Locale used by
format.
| Prop | Type | Default | Description |
|---|---|---|---|
| aria-label | string | — | Accessible name, applied to the value input (not the root). |
| decrementLabel | string | "Decrease" | Accessible name of the − button; translate it with the rest of your UI. |
| incrementLabel | string | "Increase" | Accessible name of the + button. |
| unit | ReactNode | — | Text after the number, e.g. "guests". Visual only. |
| size | "sm" | "default" | "default" | Control height (32 / 40px). |
| value | number | null | — | Controlled value. |
| defaultValue | number | — | Value on first render. |
| onValueChange | (value: number | null, details) => void | — | Called when the value changes. |
| format | Intl.NumberFormatOptions | — | Formats both the input and the rolling display, e.g. currency. |
| locale | Intl.LocalesArgument | — | Locale used by format. |
- data-disabled
- Present on the group when disabled.
| Data attribute | Description |
|---|---|
| data-disabled | Present on the group when disabled. |