Number Field

Captures formatted numeric values with precise stepping, range constraints, and keyboard control.

@rivetui/number-field

Preview

Explore each composition interactively, then open its code in the same context.

Adjust a constrained numeric value with buttons, arrow keys, or direct entry.

Replicas

Use the native Intl number format options without changing the raw numeric value.

Note

Arrow keys change the value by $100. Hold Shift for $10 steps, or Alt for $0.10 steps.

Monthly budget

Registry

Add the component source and its declared dependencies with the shadcn CLI.

Install component

$bunx --bun shadcn@latest add @rivetui/number-field

Public interface

Component-specific props are listed here. Native element and Base UI props continue to pass through.

Prop	Type	Default
`value`	`number \| null`	`—`
`defaultValue`	`number`	`—`
`onValueChange`	`(value: number \| null, details) => void`	`—`
`onValueCommitted`	`(value: number \| null, details) => void`	`—`
`min`	`number`	`—`
`max`	`number`	`—`
`step`	`number \| "any"`	`1`
`smallStep`	`number`	`0.1`
`largeStep`	`number`	`10`
`format`	`Intl.NumberFormatOptions`	`—`
`locale`	`Intl.LocalesArgument`	runtime locale
`disabled`	`boolean`	`false`
`readOnly`	`boolean`	`false`
`required`	`boolean`	`false`
`name`	`string`	`—`

Accepts native label props. Connect it to NumberFieldInput with matching htmlFor and id values.

Accepts Base UI group props and provides the shared border, focus, invalid, and disabled treatment.

Prop	Type	Default
`aria-label`	`string`	`"Decrease value"`

Prop	Type	Default
`aria-label`	`string`	`"Increase value"`