# Stepper

Plus and minus quantity control whose number slides in the direction you change it. Hold to repeat faster, with an optional fill showing how close you are to the limit.

> Primitive · Free · Forms & Inputs — React Native, Expo Go compatible.

## Install

```bash
npx @lumioui/cli add stepper
```

## Import

```tsx
import { Stepper } from "@/components/ui/stepper/stepper";
```

## Variants

- `compact` — Compact: `npx @lumioui/cli add stepper-compact`
- `quantity` — Quantity: `npx @lumioui/cli add stepper-quantity`

## Props

| Prop | Type | Notes |
| --- | --- | --- |
| `value?` | `number` | Controlled value. Omit + use defaultValue for uncontrolled. |
| `defaultValue?` | `number` | Uncontrolled initial value. Default 0. |
| `onValueChange?` | `(value: number) => void` | — |
| `min?` | `number` | — |
| `max?` | `number` | — |
| `step?` | `number` | — |
| `disabled?` | `boolean` | — |
| `className?` | `string` | — |
| `showValue?` | `boolean` | Show the value in the center. Default true. Set false for a compact segment pair (just -/+). |
| `repeat?` | `boolean` | Press-and-hold to repeat. Default true. |
| `meter?` | `boolean` | Light follows the value: a dim accent fill behind the count, sized to  how far the value sits between `min` and `max`. At `max` the fill meets  the edge, brightens and the edge lights; a further + flickers that edge.  Needs finite bounds and the value pill (`showValue`). Default false. |

## Icons rendered

- `minus` — /icons.html?i=minus
- `plus` — /icons.html?i=plus

Source: https://lumioui.com/components/stepper