Inputs & Switches
Crate Quantity Ticker
Quantity stepper with directional odometer digit roll, accelerating press-and-hold repeat, and limit bump feedback.
csslight complexitysubtle motionclickmobile-readyaccessible
Open on the canvas to copy the code → Free account · 3 copies a day · membership goes unlimited
1
When to use it
Cart item quantities, order counters, and compact numeric adjusters.
When not to
Arbitrary decimal numbers or wide value ranges.
Working with an AI agent
Every component ships agent-ready metadata. An example instruction for this one:
Edit --b/--i/--c/--l tokens in :root and [data-theme="light"].
Safe to edit
- theme CSS tokens (--b/--i/--c/--l), data arrays & timings
Keep intact
- IIFE + crNN- prefix, reduced-motion, visibilitychange, theme/demo-v1
Known limitations
- Demo state resets on remount
More Inputs & Switches components
- Liquid ToggleSVG liquid toggle with a goo filter, trailing droplets and a native button. First deliberate input stops the idle demo; the chosen on/off state settles fully.
- Glow SliderSVG range slider with a muted plum-to-teal fill, glow and value bubble, driven by a native range input. First input stops demo oscillation; drag and…
- Spring StepperMint stepper with native minus/plus buttons and a number reel that settles with spring feedback. First deliberate input stops automatic steps; the chosen…
- Segmented ControlSlate-to-sage pill slides between four native segment buttons with elastic spring stretch. First input stops automatic cycling; committed selection remains.
- Checkbox MorphThree native amber checkbox buttons animate their check strokes and expose pressed state. First input stops the demo; checked values remain.
- Star RatingFive gold SVG star radio controls commit ratings on click or keyboard input and settle with a scale bounce. First input stops automatic sweeping.