ObjectUIFields
Number Field
Numeric input field for integer and decimal numbers
The Number Field component provides a numeric input for collecting integer or decimal numbers with optional precision control.
Basic Usage
Basic Number Field
{
"type": "number",
"name": "quantity",
"label": "Quantity",
"placeholder": "0"
}With Precision
Decimal Numbers
{
"type": "number",
"name": "price",
"label": "Price",
"placeholder": "0.00",
"precision": 2
}With Min/Max
Range Validation
{
"type": "number",
"name": "age",
"label": "Age",
"placeholder": "Enter age",
"min": 0,
"max": 120
}Field Schema
interface NumberFieldSchema {
type: 'number';
name: string; // Field name/ID
label?: string; // Field label
placeholder?: string; // Placeholder text
value?: number; // Default value
required?: boolean; // Is field required
readonly?: boolean; // Read-only mode
disabled?: boolean; // Disabled state
className?: string; // Additional CSS classes
// Validation
min?: number; // Minimum value
max?: number; // Maximum value
precision?: number; // Decimal places (default: 0)
step?: number; // Increment/decrement step
}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