Primitive

Stepper

Compact numeric control group with decrement and increment actions.

Use Stepper for the HTML and styling of bounded numeric adjustment. Keep clamping, min/max, controlled state, and field validation in the owning component.
form
DOM renderImage render
StepperDefault
Caps parallel tool calls.

Playground

Controls update query params directly, so every primitive state can be linked, rendered, and screenshotted deterministically.

Loading playground

Rendered matrix

Every state maps to the same primitive render route through the state query param.

Default

Bounded numeric steppers in dense field composition.
Caps parallel tool calls.
Render state

Error

Invalid numeric field state.
Choose at least one reviewer.
Render state

Disabled

Disabled stepper control.
Render state

Public contract

The public prop table is generated from item metadata and schema-backed controls.
NameTypeDefaultDescription
disabledbooleanfalseWhether the stepper surface is disabled.
StepperAction.direction *'decrement' | 'increment'-Action icon and label direction.
StepperInput.invalidboolean-Invalid state forwarded to aria-invalid.
childrenReactNode-StepperAction, StepperInput, StepperAction anatomy.