# NumberStepper

> Counter with minus/plus buttons and a typeable value; ArrowUp/ArrowDown step it, Home/End jump.

Source: https://ui.jcsoftdev.com/docs/components/number-stepper

Counter with minus/plus buttons and a typeable value; ArrowUp/ArrowDown step it, Home/End jump.

## Import

```ts
import { NumberStepper } from "@jcsoftdev/ui/forms";
```

Single-component entry points tree-shake to just this component: `@jcsoftdev/ui/forms/number-stepper`.

## Usage

```tsx
<NumberStepper
  defaultValue={2}
  min={0}
  max={10}
  step={1}
  aria-label="Cantidad de productos"
/>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `value` | `number` |  |  |
| `defaultValue` | `number` | `0` |  |
| `onValueChange` | `((value: number) => void)` |  |  |
| `min` | `number` | `Number.NEGATIVE_INFINITY` |  |
| `max` | `number` | `Number.POSITIVE_INFINITY` |  |
| `step` | `number` | `1` |  |
| `disabled` | `boolean` |  |  |
| `unit` | `string` |  | Text after the number, e.g. "min" or "unid."; read by screen readers through aria-valuetext. |
| `name` | `string` |  |  |
| `aria-label` | `string` |  |  |
| `aria-labelledby` | `string` |  |  |
| `className` | `string` |  |  |

`*` marks a required prop.

## Storybook stories

- [Default](/storybook/?path=/story/forms-numberstepper--default)
- [With Unit](/storybook/?path=/story/forms-numberstepper--with-unit)
- [Decimals](/storybook/?path=/story/forms-numberstepper--decimals)
- [Disabled](/storybook/?path=/story/forms-numberstepper--disabled)
- [Controlled Value](/storybook/?path=/story/forms-numberstepper--controlled-value)
- [Narrow](/storybook/?path=/story/forms-numberstepper--narrow)
- [Brutal Preset](/storybook/?path=/story/forms-numberstepper--brutal-preset)
- [In Shrink Wrap Row](/storybook/?path=/story/forms-numberstepper--in-shrink-wrap-row)

## Source

`packages/ui/src/forms/number-stepper/number-stepper.tsx`