A React numeric input with increment and decrement controls, bounds, step intervals, and formatting.
Import the NumberStepper component and access all parts using dot notation.
NumberStepper is a subpath-only import (@heroui-pro/react/number-stepper) because it depends on the optional @number-flow/react peer. It is not exported from the package root, so SSR apps that don't use it never need @number-flow/react installed.
import {NumberStepper} from "@heroui-pro/react/number-stepper";
<NumberStepper>
<NumberStepper.Group>
<NumberStepper.DecrementButton />
<NumberStepper.Value />
<NumberStepper.IncrementButton />
</NumberStepper.Group>
</NumberStepper>.number-stepper - Base root wrapper.number-stepper--sm - Small size.number-stepper--md - Medium size (default).number-stepper--lg - Large size.number-stepper__group - Container grouping value and buttons.number-stepper__group--sm / --md / --lg - Group size variants.number-stepper__value - Animated number display (via Number Flow).number-stepper__decrement-button - Minus button.number-stepper__increment-button - Plus button.number-stepper__input - Hidden native input for accessibility:hover or [data-hovered="true"] on buttons (background change):focus-visible or [data-focus-visible="true"] on buttons (focus ring):active or [data-pressed="true"] on buttons (scale down):disabled or [data-disabled="true"] on buttons (reduced opacity)The root component. Wraps RAC NumberField.
| Prop | Type | Default | Description |
|---|---|---|---|
size | 'sm' | 'md' | 'lg' | 'md' | Size variant |
formatOptions | Format | - | Number formatting options passed to Number Flow |
Also supports all RAC NumberField props (value, defaultValue, onChange, minValue, maxValue, step, isDisabled, etc.).
Container grouping value and buttons. Wraps RAC Group. Automatically renders a hidden input for accessibility.
Also supports all RAC Group props.
Animated number display using Number Flow.
| Prop | Type | Default | Description |
|---|---|---|---|
value | number | - | Override value (defaults to the root's current value) |
format | Format | - | Override format options |
children | ReactNode | ((props: { value: number, formatOptions?: Format }) => ReactNode) | - | Custom content or render function |
Also supports all Number Flow props except value and children.
Minus button. Wraps RAC Button with slot="decrement". Renders a default minus icon when no children are provided.
Also supports all RAC Button props.
Plus button. Wraps RAC Button with slot="increment". Renders a default plus icon when no children are provided.
Also supports all RAC Button props.