ObjectUIFields
Object Field
JSON object editor for structured data
The Object Field component provides a JSON editor for storing and editing structured data objects. It validates JSON syntax and provides a textarea interface for complex data.
Basic Usage
Basic Object Editor
{
"type": "object",
"name": "metadata",
"label": "Metadata",
"placeholder": "{\n \"key\": \"value\"\n}"
}With Schema
Structured Configuration
{
"type": "object",
"name": "config",
"label": "Configuration",
"schema": {
"api_key": "string",
"timeout": "number",
"enabled": "boolean"
}
}Nested Data
Nested Object Data
{
"type": "object",
"name": "settings",
"label": "Settings",
"value": {
"theme": "dark",
"notifications": {
"email": true,
"push": false
},
"privacy": {
"public": false
}
}
}Read-Only
Read-Only JSON Display
{
"type": "object",
"name": "response",
"label": "API Response",
"value": {
"status": 200,
"data": {
"id": 123,
"name": "Test"
}
},
"readonly": true
}Field Schema
interface ObjectFieldSchema {
type: 'object';
name: string; // Field name/ID
label?: string; // Field label
placeholder?: string; // Placeholder text
value?: Record<string, any>; // JSON object value
required?: boolean; // Is field required
readonly?: boolean; // Read-only mode
disabled?: boolean; // Disabled state
className?: string; // Additional CSS classes
// Object Options
schema?: Record<string, any>; // Optional schema definition
}JSON Validation
The field validates JSON syntax in real-time:
- Valid JSON: Updates the value immediately
- Invalid JSON: Maintains current valid value, doesn't update
- Empty Input: Sets value to
null
Data Format
The object field stores data as parsed JSON:
// Input (string)
'{"name": "John", "age": 30}'
// Stored (object)
{ name: "John", age: 30 }
// Display (formatted)
{
"name": "John",
"age": 30
}Common Patterns
Configuration Objects
{
type: 'object',
name: 'api_config',
label: 'API Configuration',
value: {
endpoint: 'https://api.example.com',
timeout: 5000,
retries: 3,
headers: {
'Content-Type': 'application/json'
}
}
}Metadata
{
type: 'object',
name: 'custom_metadata',
label: 'Custom Metadata',
value: {
tags: ['important', 'urgent'],
priority: 'high',
department: 'engineering'
}
}Preferences
{
type: 'object',
name: 'user_preferences',
label: 'Preferences',
value: {
theme: 'dark',
language: 'en',
notifications: {
email: true,
push: false,
sms: false
}
}
}Cell Renderer
In tables/grids, displays formatted JSON preview:
import { ObjectCellRenderer } from '@object-ui/fields';
// Shows: [Object] or truncated JSON in read-only modeSchema Validation
For typed object fields, you can define a schema in two formats:
Simplified Format (for documentation):
{
type: 'object',
name: 'product_specs',
label: 'Product Specifications',
schema: {
weight: 'number',
dimensions: {
width: 'number',
height: 'number',
depth: 'number'
},
materials: 'array'
}
}JSON Schema Format (for validation):
{
type: 'object',
name: 'product_specs',
label: 'Product Specifications',
schema: {
type: 'object',
properties: {
weight: { type: 'number' },
dimensions: {
type: 'object',
properties: {
width: { type: 'number' },
height: { type: 'number' },
depth: { type: 'number' }
}
},
materials: { type: 'array' }
}
}
}Use Cases
- Configuration: Application settings, API configurations
- Metadata: Custom properties, tags, attributes
- API Responses: Storing API response data
- Preferences: User preferences, feature flags
- Structured Data: Any complex structured information
- JSON Storage: Raw JSON data storage
Best Practices
- Use for Flexible Data: When schema changes frequently
- Validate on Backend: Always validate structure server-side
- Consider Alternatives: Use typed fields when structure is fixed
- Document Schema: Provide clear documentation for expected structure
- Size Limits: Set reasonable size limits for JSON data
Backend Validation
Example backend validation:
import Ajv from 'ajv';
const ajv = new Ajv();
const validateObjectField = (value: any, schema: any) => {
if (!schema) return { valid: true };
const validate = ajv.compile(schema);
const valid = validate(value);
return {
valid,
errors: validate.errors
};
};
// Example schema
const configSchema = {
type: 'object',
properties: {
api_key: { type: 'string', minLength: 1 },
timeout: { type: 'number', minimum: 0 },
enabled: { type: 'boolean' }
},
required: ['api_key']
};