Skip to content

fields

Directory actions

More options

Directory actions

More options

Latest commit

 

History

History

fields

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
src
src
 
 
CHANGELOG.md
CHANGELOG.md
 
 
LICENSE
LICENSE
 
 
README.md
README.md
 
 
package.json
package.json
 
 
tsconfig.json
tsconfig.json
 
 
vite.config.ts
vite.config.ts
 
 
vitest.config.ts
vitest.config.ts
 
 

README.md

@object-ui/fields

The standard field library and registry for Object UI.

Features

  • 📚 Standard Fields - Implementation of all ObjectStack protocol fields (Text, Number, Date, Lookup, etc.)
  • 🔌 Plugin System - FieldRegistry allows registering custom renderers or overriding standard ones.
  • 🛠 Helpers - Utilities for schema mapping, validation, and expression evaluation.

Installation

npm install @object-ui/fields

Field Registry

The Field Registry is the core mechanism that allows decoupling view components from specific field implementations.

Registering a Custom Field

You can override standard fields or add new ones:

import { registerFieldRenderer } from '@object-ui/fields';
import { MyCustomColorPicker } from './MyCustomColorPicker';

// Register a new 'color' field type
registerFieldRenderer('color', MyCustomColorPicker);

Using Standard Fields

View components use getCellRenderer to resolve the correct component for a field type.

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

const MyGridCell = ({ field, value }) => {
  const Renderer = getCellRenderer(field.type);
  return <Renderer field={field} value={value} />;
};

Standard Field Types

Supported types out of the box:

  • Basic: text, textarea, number, boolean
  • Format: currency, percent
  • Date: date, datetime, time
  • Selection: select, lookup, master_detail
  • Contact: email, phone, url
  • Media: file, image
  • System: formula, summary, auto_number

Cascading & role-gated select options

select options support a per-option visibleWhen CEL predicate (offered only when TRUE, evaluated against the live record + current_user) and a field-level dependsOn. Together they drive dependent selects (country → province → city) and role-gated options with no bespoke matrix — the same primitives dependent lookups use. While a dependsOn parent is empty the control is gated; a parent change re-filters the list and clears a now-invalid value. Client-side hiding is UX only — gate authorization-sensitive values on the server too. See content/docs/fields/select.mdx.

Compatibility

  • React: 18.x or 19.x
  • Node.js: ≥ 18
  • TypeScript: ≥ 5.0 (strict mode)
  • @objectstack/spec: ^3.3.0
  • @objectstack/client: ^3.3.0
  • Tailwind CSS: ≥ 3.4 (for packages with UI)

Links

License

MIT — see LICENSE.