objectui/content/docs/plugins/views/object-field.mdx at 1e780273f0d989e47da19b66ef9329d7c07f157f · objectstack-ai/objectui

title	ObjectField Types
description	Comprehensive guide to all field types supported in ObjectForm with interactive examples

import { InteractiveDemo } from '@/app/components/InteractiveDemo';

ObjectUI supports 29 field types for building comprehensive forms. Each field type provides specialized rendering and validation for different data types.

Text Fields

Text Field

Single-line text input with optional validation.

{
  "name": "firstName",
  "type": "text",
  "label": "First Name",
  "required": true,
  "placeholder": "Enter first name",
  "min_length": 2,
  "max_length": 50
}

Number Field

Numeric input with min/max validation.

{
  "name": "age",
  "type": "number",
  "label": "Age",
  "min": 0,
  "max": 150,
  "step": 1,
  "placeholder": "Enter age"
}

Textarea Field

Multi-line text input.

{
  "name": "notes",
  "type": "textarea",
  "label": "Notes",
  "rows": 4,
  "max_length": 1000,
  "placeholder": "Add your notes here..."
}

Markdown Field

Markdown-formatted text editor.

{
  "name": "description",
  "type": "markdown",
  "label": "Description",
  "max_length": 5000,
  "placeholder": "Enter markdown formatted text"
}

HTML Field

Rich text HTML content editor.

{
  "name": "content",
  "type": "html",
  "label": "Content",
  "max_length": 10000,
  "placeholder": "Enter rich text content"
}

Numeric Fields

Currency Field

Monetary values with currency symbol.

{
  "name": "price",
  "type": "currency",
  "label": "Price",
  "currency": "USD",
  "precision": 2,
  "min": 0,
  "required": true
}

Percent Field

Percentage values.

{
  "name": "discount",
  "type": "percent",
  "label": "Discount",
  "precision": 2,
  "min": 0,
  "max": 100,
  "placeholder": "0.00"
}

Boolean Field

Boolean (Checkbox)

True/false checkbox input.

{
  "name": "isActive",
  "type": "boolean",
  "label": "Active Status",
  "defaultValue": true
}

Date & Time Fields

Date Field

Date picker input.

{
  "name": "birthDate",
  "type": "date",
  "label": "Birth Date",
  "format": "MM/DD/YYYY"
}

DateTime Field

Date and time picker.

{
  "name": "appointmentTime",
  "type": "datetime",
  "label": "Appointment",
  "format": "MM/DD/YYYY HH:mm"
}

Time Field

Time-only picker.

{
  "name": "preferredContactTime",
  "type": "time",
  "label": "Preferred Time",
  "format": "HH:mm"
}

Selection Fields

Select Field (Single)

Single-select dropdown with options.

{
  "name": "status",
  "type": "select",
  "label": "Status",
  "required": true,
  "options": [
    { "value": "active", "label": "Active", "color": "green" },
    { "value": "inactive", "label": "Inactive", "color": "gray" },
    { "value": "pending", "label": "Pending", "color": "yellow" }
  ],
  "defaultValue": "active"
}

Select Field (Multiple)

Multi-select dropdown.

{
  "name": "tags",
  "type": "select",
  "label": "Tags",
  "multiple": true,
  "searchable": true,
  "options": [
    { "value": "vip", "label": "VIP", "color": "red" },
    { "value": "partner", "label": "Partner", "color": "blue" },
    { "value": "prospect", "label": "Prospect", "color": "yellow" }
  ]
}

Contact Fields

Email Field

Email input with validation.

{
  "name": "email",
  "type": "email",
  "label": "Email Address",
  "required": true,
  "max_length": 255,
  "placeholder": "user@example.com"
}

Phone Field

Phone number input.

{
  "name": "phone",
  "type": "phone",
  "label": "Phone Number",
  "format": "+1 (XXX) XXX-XXXX",
  "placeholder": "+1 (555) 123-4567"
}

URL Field

Website URL input.

{
  "name": "website",
  "type": "url",
  "label": "Website",
  "max_length": 500,
  "placeholder": "https://example.com"
}

Password Field

Secure password input.

{
  "name": "password",
  "type": "password",
  "label": "Password",
  "required": true,
  "min_length": 8,
  "max_length": 128,
  "placeholder": "Enter secure password"
}

File & Media Fields

File Upload Field

File upload with constraints.

{
  "name": "attachments",
  "type": "file",
  "label": "Attachments",
  "multiple": true,
  "max_files": 5,
  "max_size": 10485760,
  "accept": ["application/pdf", "application/msword", "text/plain"]
}

Image Upload Field

Image upload with preview.

{
  "name": "avatar",
  "type": "image",
  "label": "Profile Picture",
  "accept": ["image/jpeg", "image/png", "image/webp"],
  "max_size": 2097152,
  "max_width": 1024,
  "max_height": 1024
}

Relationship Fields

Lookup Field

Reference to related records.

{
  "name": "company",
  "type": "lookup",
  "label": "Company",
  "reference_to": "accounts",
  "reference_field": "name",
  "searchable": true,
  "required": true
}

Master-Detail Field

Master-detail relationship.

{
  "name": "parentAccount",
  "type": "master_detail",
  "label": "Parent Account",
  "reference_to": "accounts",
  "searchable": true
}

User Fields

User Field

User selector with avatars.

{
  "name": "assignedTo",
  "type": "user",
  "label": "Assigned To",
  "multiple": false
}

Owner Field

Record owner selector.

{
  "name": "owner",
  "type": "owner",
  "label": "Record Owner",
  "required": true
}

Location Field

Geographic coordinates input.

{
  "name": "address",
  "type": "location",
  "label": "Address",
  "default_zoom": 15,
  "placeholder": "Enter address or coordinates"
}

Computed Fields

Formula Field

Read-only calculated field.

{
  "name": "fullName",
  "type": "formula",
  "label": "Full Name",
  "formula": "CONCAT(firstName, ' ', lastName)",
  "readonly": true
}

Summary Field

Aggregated values (rollup).

{
  "name": "totalRevenue",
  "type": "summary",
  "label": "Total Revenue",
  "summary_object": "opportunities",
  "summary_field": "amount",
  "summary_type": "sum",
  "readonly": true
}

Auto Number Field

Auto-incrementing number.

{
  "name": "ticketNumber",
  "type": "auto_number",
  "label": "Ticket #",
  "format": "TICKET-{0000}",
  "starting_number": 1,
  "readonly": true
}

Advanced Fields

Object Field

JSON object data.

{
  "name": "metadata",
  "type": "object",
  "label": "Custom Metadata",
  "schema": {
    "source": { "type": "string" },
    "campaign": { "type": "string" },
    "referrer": { "type": "string" }
  }
}

Vector Field

Embedding/vector data (read-only).

{
  "name": "embedding",
  "type": "vector",
  "label": "Text Embedding",
  "dimensions": 1536,
  "readonly": true
}

Grid Field

Sub-table/inline grid.

{
  "name": "lineItems",
  "type": "grid",
  "label": "Line Items",
  "columns": [
    { "name": "product", "type": "text", "label": "Product" },
    { "name": "quantity", "type": "number", "label": "Qty" },
    { "name": "price", "type": "currency", "label": "Price" },
    { "name": "total", "type": "currency", "label": "Total", "formula": "quantity * price" }
  ]
}

Field Type Summary

Field Type	Category	Description	Use Case
text	Text	Single-line text	Names, titles, short text
number	Numeric	Numeric values	Quantities, counts, IDs
textarea	Text	Multi-line text	Notes, descriptions
markdown	Text	Markdown formatted	Rich documentation
html	Text	HTML content	Rich content editing
currency	Numeric	Money values	Prices, amounts
percent	Numeric	Percentage	Rates, ratios
boolean	Boolean	True/false	Flags, toggles
date	Temporal	Date only	Birth dates, deadlines
datetime	Temporal	Date + time	Appointments, timestamps
time	Temporal	Time only	Operating hours
select	Selection	Dropdown options	Status, categories
email	Contact	Email address	Contact information
phone	Contact	Phone number	Contact information
url	Contact	Web address	Websites, links
password	Security	Masked input	Authentication
file	Media	File upload	Documents, attachments
image	Media	Image upload	Photos, avatars
location	Spatial	GPS coordinates	Addresses, locations
lookup	Relationship	Foreign key	References to other records
master_detail	Relationship	Parent-child	Hierarchical data
user	Identity	User reference	Assignments, ownership
owner	Identity	Owner reference	Record ownership
formula	Computed	Calculated	Derived values
summary	Computed	Aggregation	Rollups, totals
auto_number	Computed	Auto-increment	Sequential IDs
object	Advanced	JSON data	Flexible structured data
vector	Advanced	Embeddings	AI/ML applications
grid	Advanced	Sub-table	Line items, nested lists

Related Components

ObjectForm - Complete form component
ObjectTable - Display lists of data
ObjectView - Complete CRUD interface

Uh oh!

FilesExpand file tree

object-field.mdx

Latest commit

History