Field Types Reference

Field Types Reference

This document provides a comprehensive reference for every component type supported by Formosaic. Component types are defined in packages/core/src/constants.ts as the ComponentTypes object, and each maps to a string key used in IFieldConfig.type.

There are 28 component keys: 21 editable, 6 read-only, and 1 structural (FieldArray).

Editable Field Types

Read-Only Field Types

Structural Types

Per-Field Details

Textbox

Single-line text input. In read-only mode, displays the value as static text.

Config properties: ellipsifyTextCharacters (number), placeHolder (string)

{
  "title": {
    "type": "Textbox",
    "label": "Title",
    "required": true,
    "config": { "ellipsifyTextCharacters": 100 }
  }
}

Dropdown

Single-select dropdown populated from options.

Config properties: placeHolder (string), setDefaultKeyIfOnlyOneOption (boolean)

{
  "status": {
    "type": "Dropdown",
    "label": "Status",
    "required": true,
    "options": [
      { "value": "active", "label": "Active" },
      { "value": "inactive", "label": "Inactive" }
    ]
  }
}

Toggle

Boolean on/off switch. In read-only mode, displays "Yes" or "No".

Note: Since v1.4.2, required: true on a Toggle validates that the value is true (the user must actively toggle it on) — e.g. for consent checkboxes. Omit required for optional toggles where false is an acceptable answer.

Number

Numeric input field. Uses a 1500ms auto-save debounce.

Clearing the input sets the field value to null — never 0. An empty Number field and an explicit 0 are distinct values; validators and rules that need to distinguish "no answer" from zero can rely on this across all adapters.

Multiselect

Multi-select dropdown. Value type is string[].

DateControl

Date picker with clear button. Stores dates as ISO 8601 strings.

Slider

Range slider. Config properties: min (number), max (number), step (number)

{
  "confidence": {
    "type": "Slider",
    "label": "Confidence Level",
    "config": { "min": 0, "max": 100, "step": 5 }
  }
}

Textarea

Multi-line text area with an expand-to-modal feature.

Config properties: numberOfRows (number), ellipsifyTextCharacters (number), maxLimit (number)

DocumentLinks

CRUD component for managing URL links. Value type: IDocumentLink[].

StatusDropdown

Dropdown with color-coded status indicators.

Config properties: statusColors (maps option values to CSS color strings)

{
  "workflowStatus": {
    "type": "StatusDropdown",
    "label": "Status",
    "options": [
      { "value": "draft", "label": "Draft" },
      { "value": "approved", "label": "Approved" }
    ],
    "config": {
      "statusColors": { "draft": "#8A8886", "approved": "#107C10" }
    }
  }
}

FieldArray

Repeating field group. Uses items, minItems, and maxItems on the field config.

{
  "contacts": {
    "type": "FieldArray",
    "label": "Contacts",
    "items": {
      "name": { "type": "Textbox", "label": "Name", "required": true },
      "email": { "type": "Textbox", "label": "Email" }
    },
    "minItems": 1,
    "maxItems": 10
  }
}

RadioGroup

Single-select radio button group. Value type is string.

Config properties: orientation ("horizontal" | "vertical", adapter-specific)

{
  "plan": {
    "type": "RadioGroup",
    "label": "Plan",
    "required": true,
    "options": [
      { "value": "basic", "label": "Basic" },
      { "value": "pro", "label": "Pro" },
      { "value": "enterprise", "label": "Enterprise" }
    ]
  }
}

CheckboxGroup

Multi-select checkbox group. Value type is string[]. Matches the same options contract as Multiselect.

{
  "interests": {
    "type": "CheckboxGroup",
    "label": "Interests",
    "options": [
      { "value": "music", "label": "Music" },
      { "value": "sports", "label": "Sports" },
      { "value": "travel", "label": "Travel" }
    ]
  }
}

Rating

Star rating input. Value type is number.

Config properties: max (number, default 5), allowHalf (boolean, default false)

{
  "satisfaction": {
    "type": "Rating",
    "label": "Satisfaction",
    "config": { "max": 5, "allowHalf": true }
  }
}

ColorPicker

Color picker returning a hex string.

{
  "themeColor": {
    "type": "ColorPicker",
    "label": "Theme color"
  }
}

Autocomplete

Searchable single-select with type-ahead. Value type is string. Uses options for the search set. Native implementations (e.g. antd AutoComplete, Mantine Autocomplete, React Aria ComboBox) render natively; other adapters fall back to semantic HTML.

{
  "city": {
    "type": "Autocomplete",
    "label": "City",
    "options": [
      { "value": "nyc", "label": "New York" },
      { "value": "sf", "label": "San Francisco" },
      { "value": "sea", "label": "Seattle" }
    ]
  }
}

FileUpload

File picker. Value type is File | File[] depending on config.

Config properties: multiple (boolean), accept (MIME-type string), maxSizeMb (number -- validated by built-in size validator)

{
  "resume": {
    "type": "FileUpload",
    "label": "Resume",
    "config": { "accept": ".pdf", "maxSizeMb": 5 }
  }
}

DateRange

Two date inputs (From / To). Value type is { start: string; end: string } (ISO 8601 date strings).

{
  "vacation": {
    "type": "DateRange",
    "label": "Vacation dates"
  }
}

DateTime

Combined date + time input. Value type is an ISO datetime-local string (e.g. "2026-04-16T14:30").

{
  "scheduledAt": {
    "type": "DateTime",
    "label": "Scheduled at"
  }
}

PhoneInput

Phone input with inline masking. Value type is string.

Config properties: format ("us" | "international" | "raw", default "us")

{
  "phone": {
    "type": "PhoneInput",
    "label": "Phone",
    "config": { "format": "us" }
  }
}

IOption Interface

interface IOption {
  value: string | number;
  label: string;
  disabled?: boolean;
  hidden?: boolean;
  selected?: boolean;
  title?: string;
  data?: unknown;
}

IFieldProps Interface

All field components receive their props via IFieldProps<T>, which is passed through React.cloneElement() by RenderField:

interface IFieldProps<T> {
  fieldName?: string;
  readOnly?: boolean;
  required?: boolean;
  error?: FieldError;
  saving?: boolean;
  value?: unknown;
  config?: T;
  options?: IOption[];
  label?: string;
  type?: string;
  setFieldValue?: (fieldName: string, fieldValue: unknown, skipSave?: boolean, timeout?: number) => void;
}