Selection And Input
Steppers
A three-part minus/value/plus row built at the same 36px height as every other compact control, with the value field reusing Text Field anatomy.
Findings
What's actually in /ig
- Every part of the stepper composition is confirmed: the 36px control height shared by Text Fields and Tertiary Buttons, and the tertiary button's border/radius treatment for the two tap targets.
Rationale
Why this component exists
A stepper is two tertiary icon-buttons flanking a Text Field — there's no need for new anatomy because incrementing and decrementing are already button actions, and the value display is already a field. Keeping all three parts at the same 36px height is what makes the row read as one control instead of three.
Usage
When to use it
Use when
Adjusting a small numeric value in fixed increments — quantity, a count with a small bounded range.
Avoid when
The range is large or continuous (use Sliders) or the value can be typed directly without needing increment buttons.
Anatomy
Anatomy
- 01
Minus button (tertiary, 36×36px)
- 02
Value field (Text Field anatomy, center-aligned)
- 03
Plus button (tertiary, 36×36px)
Specification
Spacing, colour, type, and motion
- Control height
- 36px throughout, matching Text Fields and Tertiary Buttons
- Button width
- 36px (square), tertiary button styling
- Value field
- Center-aligned text, system-16, numeric input mode
- Radius
- 6px on the end buttons, square inner edges where they meet the field
States
States
| State | Behaviour |
|---|---|
| Default | Both buttons enabled, current value shown. |
| At minimum | Minus button disabled at opacity .5. |
| At maximum | Plus button disabled at opacity .5. |
Examples
Real interface compositions
Story sticker
Story countdown duration
Minus and plus square buttons flank a centered numeric value for days remaining, disabling the minus button at the minimum rather than letting the value wrap.
36px controls, tertiary buttons, center-aligned value field, disabled opacity .5
Do / Don't
Do / Don't
Do
- Keep the whole row at one consistent 36px height so it reads as a single control.
Don’t
- Let the value field accept free text — constrain it to the same bounds the buttons respect.