---
title: Stepper
description: A numeric value with decrement and increment controls.
---
import Source from './_generated/stepper.mdx';

A numeric input with decrement/increment controls. iOS renders the classic joined pill — a secondary-container background with a hairline splitting the −/value/+ segments; Android renders tonal outlined circular icon buttons flanking the value. Both platforms share the same markup — the cascade decides the look. The buttons disable at the bounds and the value carries spinbutton semantics (`aria-valuenow` / `min` / `max`).

<DemoFrame component="stepper" />

## Installation

```bash
npx touchcn add stepper
```

## Usage

<CodeGroup>

```html Angular
<tcn-stepper [(value)]="quantity" [min]="0" [max]="10" label="Quantity" />
```

```tsx React
import { TcnStepper } from '@/components/ui/stepper';

<TcnStepper value={quantity} onValueChange={setQuantity} min={0} max={10} label="Quantity" />
```

```vue Vue
<script setup lang="ts">
import { TcnStepper } from '@/components/ui/stepper';
</script>

<template>
  <TcnStepper v-model="quantity" :min="0" :max="10" label="Quantity" />
</template>
```

</CodeGroup>

Press-and-hold auto-repeat is not implemented — it needs timer/pointer lifecycle plumbing in the engine, which a future engine directive/hook can add without changing this markup.

## Props

| Prop              | Type      | Default      | Description                                       |
| ----------------- | --------- | ------------ | ------------------------------------------------- |
| `value`           | `number`  | `0`          | The current value (two-way in Angular).           |
| `min`             | `number`  | `-Infinity`  | Lower bound; the decrement button disables at it. |
| `max`             | `number`  | `Infinity`   | Upper bound; the increment button disables at it. |
| `step`            | `number`  | `1`          | Amount added or removed per press.                |
| `disabled`        | `boolean` | `false`      | Disable the whole control.                        |
| `label`           | `string`  | `''`         | Accessible name announced with the value.         |

<Source />