Scrub field

When to use #

Use it for

Design and media values people tune by feel: opacity, radius, blur, gain.
Values with meaningful stops, like 25, 50 and 75 percent.

Skip it when

The value is money or a count that must be typed exactly; use a number field.

Installation #

terminal

pnpm dlx shadcn@latest add @caliper/scrub-field

Adds its 2 files to components/ui/, each with its own stylesheet, and installs their packages. Pro installs with your access token, set up once per project. See Pro access. The first part also adds Caliper UI’s tokens; import them once as in Installation.

Usage #

Import it from your copy of the source. The example behind the preview comes with the source.

example.tsx

import { ScrubField } from "@/components/ui/scrub-field"

The worked example comes with Pro

The 15-line example behind the preview opens here with a Pro or Team licence.

Checking your licence…

API reference #

ScrubField

component

PropTypeDefaultDescription

label *string—

valuenumber—

defaultValuenumber0

onValueChange((value: number) => void)—

minnumber0

maxnumber100

stepnumber1

unitstring—Shown after the number, e.g. "%" or "px".

detentsnumber[][]Values that catch the scrub, e.g. [25, 50, 75].

pixelsPerStepnumber2Pointer travel per step while scrubbing.

disabledbooleanfalse

classNamestring—

It exposes spinbutton semantics, with aria-hidden, aria-valuemin, aria-valuemax, aria-valuenow, aria-valuetext and aria-invalid kept in step with state.

KeyBehaviour

↑Moves to the previous item or value.

↓Moves to the next item or value.

HomeJumps to the first item or the minimum.

EndJumps to the last item or the maximum.

EnterActivates the focused control.

Motion #

It checks prefers-reduced-motion itself and settles immediately instead of travelling. Every state is still reachable.