Number Field

The Number Field component provides a numeric input for collecting integer or decimal numbers with optional precision control.

Basic Usage

With Precision

With Min/Max

Field Schema

A number field is authored as NumberFieldMetadata (@object-ui/types), which is the source of truth for the key set: it extends BaseFieldMetadata with the numeric bounds, the stored precision and scale, and the stepper increment.

import type { NumberFieldMetadata } from '@object-ui/types';

const quantity: NumberFieldMetadata = {
  type: 'number',
  name: 'quantity',
  label: 'Quantity',
  placeholder: '0',
  required: true,
  min: 0,
  max: 9999,
  precision: 10,
  scale: 0,
  step: 1,
};

The value being edited, and the className / disabled a host supplies, are not metadata keys — they are runtime widget props. See Field Widget Props.

What the browser rewrites before this field sees it

This widget renders a native type="number" input, so the browser decides what the box accepts. Two things can happen and only one of them is announced:

• Announced. Text the browser cannot read at all — 1e, a lone -, a lone . — leaves the box visibly showing what was typed while its value reads empty. The field is marked aria-invalid and draws "Not saved: the text in this box is not a number."
• ⚠️ Not announced. Entries the browser silently truncates: pasting 1.2.3 stores 1.23, and 0x10 stores 10. No warning is possible here — the browser discards the extra characters as they arrive, so nothing reaches ObjectUI to check.

⛔ "No warning" therefore does not mean "the value is right." Full explanation and the reasoning: What a number field silently rewrites.

Use Cases

• Quantities: Order quantities, stock levels
• Measurements: Dimensions, weights, distances
• Ratings: Numeric ratings or scores
• Ages: User age or duration values

Cell Renderer

In tables/grids, numbers are displayed with tabular formatting:

import { NumberCellRenderer } from '@object-ui/fields';

// Renders with precision and tabular-nums font
// Example: 1,234.56