Number Field
Edits a bounded numeric value through typing, stepping buttons, keyboard commands, or a scrub area.
Contract
| Axis | Behavior |
|---|---|
| value | uncontrolled with defaultValue, controlled with value and onValueChange; empty resolves to null |
| bounds | min, max, and step govern buttons, keys, and native validity |
| anatomy | Root → ScrubArea + Group → Decrement + Input + Increment |
Install
pnpm add @tinyrack/uiScroll inside the code area to read long lines.
Styles
@import '@tinyrack/ui/components/number-field.css';Scroll inside the code area to read long lines.
Imports
import { TRField } from '@tinyrack/ui/components/field';
import { TRNumberField } from '@tinyrack/ui/components/number-field';Scroll inside the code area to read long lines.
Playground
Usage
Examples
Sizes permalink
Use uiSize to align the NumberField with neighboring Input, Select, or Button controls. md fits dense and default rows, while lg is for primary inputs.
Bounds, step, and unit formatting permalink
Typing, buttons, arrow keys, and scrub gestures share the same 16–256 GB range and 16 GB step.
Locale-aware decimal input permalink
The locale controls both displayed grouping and the decimal separator accepted while typing or pasting.
Form submission and reset permalink
The hidden numeric input submits the raw number, and an uncontrolled field returns to defaultValue on native form reset.
API
TRNumberField contains Root, Group, Decrement, Input, Increment, ScrubArea, and ScrubAreaCursor; every part also has a named export, prop type, and state type from @tinyrack/ui/components/number-field. value accepts number | null, while defaultValue initializes uncontrolled state. locale and format control display, typing, and paste parsing. onValueChange and onValueCommitted include reasons such as keyboard, button press, paste, wheel, and scrub. Use name and optional form for native submission, required/min/max/step for validity, and inputRef for the hidden numeric input. Root accepts uiSize?: 'md' | 'lg' (default md) to match the height of neighboring Input, Select, or Button controls. Native reset restores an uncontrolled field to defaultValue; controlled owners reset their own value. Keep min ≤ max and use a positive numeric step or "any". The Playground normalizes invalid control combinations and its Reset action restores the initial args.