Kinetic

Home7

Scrub Number Input

Interactive playground for a Figma-like scrub number input. Digit animation by Calligraph. Adjust settings, then copy the generated usage snippet.

MIT·Jayant Acharya

Demo

00123456789

Input

Select all on edit
Logo mode
Logo icon
Wheel scroll
Direction
Pixel sensitivity
00123456789

Limits

Start
End
Bound feedback

Up/Down arrow nudge

Step
00123456789
Small step (Alt)
00123456789.00123456789
Large step (Shift)
0012345678900123456789

animation by Calligraph

Variant
Animation
Stagger
00123456789.001234567890012345678900123456789
Auto-size

Usage

"use client"

import { useState } from "react"
import { ScrubNumberField } from "@/components/ui/scrub-number-input"
import "@/components/ui/scrub-number-input.css"

export function Example() {
  const [value, setValue] = useState(0)

  return (
    <ScrubNumberField
      aria-label="Value"
      value={value}
      onValueChange={setValue}
    />
  )
}