components / 34

marked number field

numbers respond to more than typing. drag the label, hold a stepper, use the wheel, or press a modified arrow key.

shadcnnpx shadcn@latest add berkantay/cheez/marked-number-field

live

tune the voice, not just the value

48px

type size / px ↔

drag the label, type, or hold a stepper

human
measure.

12 / 120 px

ink

size

character

raw value48

<MarkedNumberField
  value={typeSize}
  onValueChange={(value) => setTypeSize(value ?? 12)}
  min={12}
  max={120}
  step={2}
  tone="orange"
>
  <MarkedNumberFieldScrubArea>
    <MarkedNumberFieldLabel>type size ↔</MarkedNumberFieldLabel>
  </MarkedNumberFieldScrubArea>
  <MarkedNumberFieldGroup>
    <MarkedNumberFieldDecrement />
    <MarkedNumberFieldInput />
    <MarkedNumberFieldIncrement />
  </MarkedNumberFieldGroup>
</MarkedNumberField>

format

raw values can speak locally

Intl.NumberFormat

budget

currency

opacity

percent

temperature

unit

states

the boundary explains the constraint

invalid, readonly, disabled

width

must be 120 or less

columns

locked by the grid

copies

unavailable now

reference

api

Base UI arithmetic, Cheez pressure

part	prop	type	default	purpose
Root	`value`	`number \| null`	`—`	controlled raw value
Root	`onValueChange`	`function`	`—`	continuous value callback
Root	`onValueCommitted`	`function`	`—`	blur or pointer-release callback
Root	`min / max`	`number`	`—`	range constraints
Root	`step`	`number \| "any"`	`1`	button, key, and scrub step
Root	`smallStep / largeStep`	`number`	`0.1 / 10`	Alt and Shift modifiers
Root	`format`	`Intl.NumberFormatOptions`	`—`	locale-aware presentation
Root	`allowWheelScrub`	`boolean`	`false`	wheel changes while focused
Root	`snapOnStep`	`boolean`	`false`	snap interactive changes
Root	`invalid`	`boolean`	`false`	controlled Cheez error state
ScrubArea	`direction`	`"horizontal" \| "vertical"`	`"horizontal"`	drag axis
ScrubArea	`pixelSensitivity`	`number`	`2`	drag distance per step
Input	`aria-label`	`string`	`—`	accessible name without label

behavior notes

typing, paste, keys, wheel, steppers, and scrubbing report distinct change reasons
pressing and holding either stepper repeats the change
Alt uses smallStep; Shift uses largeStep
formatted text and raw numeric value stay separate
the hidden native number input carries form constraints and submission value
parsing, clamping, pointer lock, and repeat behavior come from Base UI
no Framer Motion is shipped