Forms

Number field

Captures and formats numeric input with stepping, bounds, and scrub interactions.

idle

Usage

import {
	NumberField,
	NumberFieldDecrement,
	NumberFieldGroup,
	NumberFieldIncrement,
	NumberFieldInput,
} from "@mizen-labs/ui";

Anatomy

The parts and how they nest, taken from the preview above.

<NumberField>
	<NumberFieldGroup>
		<NumberFieldDecrement />
		<NumberFieldInput />
		<NumberFieldIncrement />
	</NumberFieldGroup>
</NumberField>

Examples

Purchase details

Adjust the transaction amount and quantity.

Canvas spacing

Drag a label to adjust its numeric value.

Control sizes

Limits and validation

Recommendations

Guidance	Practice
Do	Set meaningful bounds and steps. Specify locale and formatting when displaying currency or other units.

Usage boundaries

Guidance	Boundary
Scope	Use Input for identifiers such as account numbers. Validate numeric business limits again on submission.

API reference

Public props from @mizen-labs/ui. Use exported prop types for the complete TypeScript contract.

Prop	Type	Default	Description
`value`	`number \| null`	`—`	Controlled numeric value.
`defaultValue`	`number`	`—`	Initial numeric value for uncontrolled operation.
`onValueChange`	`(value: number \| null, eventDetails: NumberFieldPrimitive.Root.ChangeEventDetails) => void`	`—`	Callback invoked when the numeric value changes.
`min`	`number`	`—`	Minimum allowed numeric value.
`max`	`number`	`—`	Maximum allowed numeric value.
`step`	`number \| "any"`	`1`	Amount by which the value increases or decreases on step.
`format`	`Intl.NumberFormatOptions`	`—`	Options passed to Intl.NumberFormat for displaying formatted values.
`locale`	`Intl.LocalesArgument`	`navigator.language`	BCP 47 language tag used for formatting and parsing.
`disabled`	`boolean`	`false`	Prevents interaction and communicates the disabled state.
`readOnly`	`boolean`	`false`	Renders in a non-editable, readable presentation.
`size`	`"default" \| "sm" \| "lg"`	`"default"`	Sets control dimensions across the input and steppers.
`NumberField`	`NumberFieldProps`	`"div"`	Root numeric field container providing context and state coordination.
`NumberFieldGroup`	`NumberFieldGroupProps`	`"div"`	Container grouping input and steppers with focus ring and borders.
`NumberFieldInput`	`NumberFieldInputProps`	`"input"`	Textbox accepting direct typed input and displaying formatted values.
`NumberFieldIncrement`	`NumberFieldIncrementProps`	`"button"`	Stepper button incrementing the value.
`NumberFieldDecrement`	`NumberFieldDecrementProps`	`"button"`	Stepper button decrementing the value.
`NumberFieldScrubArea`	`NumberFieldScrubAreaProps`	`"span"`	Interactive area enabling pointer scrubbing.
`NumberFieldPrimitive`	`typeof BaseNumberField`	`—`	Low-level Base UI number field primitive namespace.