NumberField

A locale-aware spinbutton with numeric app state, step controls, and native form submission.@gemologic/sheen · forms

Playground

label

Budget

<NumberField label="Budget" defaultValue={1250.5} min={0} step={0.5} formatOptions={{ style: "currency", currency: "USD" }} name="budget" />

Localized amount

Budget

Package

@gemologic/sheen

Source

packages/ui/src/primitives/NumberField.tsx

Tokens

Role: spinbuttonKeyboard: ArrowUp, ArrowDown, PageUp, PageDown, Home, End

Do not parse the formatted visible input in form submit handlers; use the hidden raw value.

Name	Type	Default	Description
`label` *	`string`	—	Required visible label.
`value`	`number \| null`	—	Controlled numeric value; null presents an empty field.
`defaultValue`	`number \| null`	—	Initial uncontrolled numeric value; null starts empty.
`onValueChange`	`(value: number \| null) => void`	—	Receives a finite number, or null for an empty/partial value.
`min`	`number`	—	Finite inclusive lower bound.
`max`	`number`	—	Finite inclusive upper bound.
`step`	`number`	`1`	Positive finite arrow and trigger increment.
`largeStep`	`number`	—	Positive finite Page Up and Page Down increment; defaults to ten steps.
`formatOptions`	`Intl.NumberFormatOptions`	—	Intl number options evaluated with the effective scoped locale.
`name`	`string`	—	Native hidden-input form name.
`form`	`string`	—	ID of a form outside the component ancestry.
`description`	`string`	—	Supporting text associated with the spinbutton.
`error`	`string`	—	Validation text that marks the field invalid.
`disabled`	`boolean`	`false`	Disables input, triggers, focus, and submission.
`readOnly`	`boolean`	`false`	Prevents edits while retaining focus and submission.
`required`	`boolean`	`false`	Marks the native field required.
`inputRef`	`HTMLInputElement \| ((element: HTMLInputElement) => void)`	—	Receives the visible native input.

Native Solid/HTML attributes remain available and are omitted from this authored-prop view.