ObjectUIFields
Percent Field
Percentage input with automatic conversion and formatting
The Percent Field component provides a percentage input that automatically converts between stored decimal values (0-1) and displayed percentage values (0-100).
Basic Usage
Basic Percent Field
{
"type": "percent",
"name": "completion",
"label": "Completion",
"placeholder": "0"
}With Precision
With Decimal Precision
{
"type": "percent",
"name": "progress",
"label": "Progress",
"precision": 1,
"value": 0.753
}Required Field
Required Percent
{
"type": "percent",
"name": "discount",
"label": "Discount Rate",
"required": true,
"precision": 2
}Read-Only
Read-Only Percent
{
"type": "percent",
"name": "success_rate",
"label": "Success Rate",
"value": 0.875,
"readonly": true
}Field Schema
interface PercentFieldSchema {
type: 'percent';
name: string; // Field name/ID
label?: string; // Field label
placeholder?: string; // Placeholder text
value?: number; // Default value (0-1 decimal)
required?: boolean; // Is field required
readonly?: boolean; // Read-only mode
disabled?: boolean; // Disabled state
className?: string; // Additional CSS classes
// Validation
precision?: number; // Decimal places (default: 2)
min?: number; // Minimum value (0-1)
max?: number; // Maximum value (0-1)
}Value Conversion
The percent field handles automatic conversion:
- Stored Value: Decimal between 0 and 1 (e.g.,
0.75) - Display Value: Percentage between 0 and 100 (e.g.,
75%)
Example:
// Stored in database: 0.85
// Displayed to user: 85%
// User enters: 90
// Stored as: 0.90Cell Renderer
In tables/grids, values are formatted with percentage symbol:
import { PercentCellRenderer } from '@object-ui/fields';
// Renders: 85.50%Use Cases
- Progress Tracking: Task completion, project progress
- Analytics: Conversion rates, success metrics
- Financial Data: Interest rates, discount percentages
- Statistics: Performance scores, efficiency ratings