# Stepper

A small integer with − and + keys either side, in one well.

Kit part · With the Kit · https://tactileui.dev/parts/stepper

> The code and styling for this part come with the Tactile UI Kit, which is in the Founder Pass. Sign in if you have it. Sign in: https://tactileui.dev/auth/sign-in The price: https://tactileui.dev/pricing

## Anatomy

A native number input between two kit keys, in one recess. The kit does not ship script for the keys.

## Variants

- In a settings row

## States

- Rest
- Pressing +
- Focus

## Props and options

| Name | Kind | Description |
| - | - | - |
| input[type=number] | element | Native: 5ch wide, centred, tabular, spinner hidden. |
| data-step | attribute | Read by the few lines of script above; the kit does not wire the keys itself. |
| change | event | Native from typing; dispatch it yourself from the keys. |
| Arrows | keyboard | Native number input: Up and Down step it. |

## Usage notes

Press − and +, or type, or use the arrow keys in the number.

## Related parts

- [Field](https://tactileui.dev/parts/field): Text entry in a recess, the label printed above it, and a hint that says how to fix an error.
- [Combo](https://tactileui.dev/parts/combo): One field with its one action in a shared well: subscribe, search, add.
- [Fader](https://tactileui.dev/parts/fader): A continuous value along a line: a native range whose cap rides in a slot cut into the plate, with a printed scale.