Default with steppers
Use stepper buttons or type a number.
Muted stepper dividers
Hairline borders between +/- and the value — outer field chrome stays full weight.
Use stepper buttons or type a number.
Steppers on hover
Keeps the field width tight — hover or focus the control to reveal +/- steppers.
Use stepper buttons or type a number.
Compact density
Shorter control for tables — pair with stepperReveal="hover" for matching corner radius.
Use stepper buttons or type a number.
Compact row (data table)
LyricismProdMelodyImpact
Use stepper buttons or type a number.
Use stepper buttons or type a number.
Use stepper buttons or type a number.
Use stepper buttons or type a number.
Inline pair
Use stepper buttons or type a number.
Use stepper buttons or type a number.
Without steppers
Plain number field when steppers are not needed.
Compact without steppers
Step size & bounds
Use stepper buttons or type a number.
Table seats — even numbers only, 2 to 20.
Error
Use stepper buttons or type a number.
Maximum order is 5 items.
Compact error
Use stepper buttons or type a number.
Max is 5.
Disabled & read-only
Use stepper buttons or type a number.
Use stepper buttons or type a number.
Compact disabled
Use stepper buttons or type a number.
Animation variants
animationVariant — click each control to compare press feedback.
Use stepper buttons or type a number.
Use stepper buttons or type a number.
Use stepper buttons or type a number.
Use stepper buttons or type a number.
Use stepper buttons or type a number.
Use stepper buttons or type a number.
Use stepper buttons or type a number.
Use stepper buttons or type a number.
API
| Prop | Required | Type | Default | Description |
|---|---|---|---|---|
| theme | Optional | SiteTheme | atelier | Visual theme. |
| showSteppers | Optional | boolean | true | Shows increment/decrement buttons. |
| stepperReveal | Optional | "always" | "hover" | always | When steppers are on: always visible, or reveal on hover/focus to keep the field narrow. |
| borderTone | Optional | "muted" | "normal" | normal | Divider weight between +/- steppers and the value — muted uses hairline borders; normal uses full theme border weight. |
| density | Optional | "default" | "compact" | default | Compact uses a shorter h-9 control and smaller stepper buttons — for data tables and dense grids. |
| step | Optional | number | 1 | Stepper increment amount. |
| min / max | Optional | number | — | Value bounds; steppers clamp to range. |
| label / hint / error | Optional | string | — | Field shell props. |
| animationVariant | Optional | PressAnimationVariant | default | Press animation — default, none, ripple, scale, sink, lift, pulse, or glow. |