Field Types 

Advanced Input

Features

• Text Input Field: Simple, clean text input with advanced validation
• Comprehensive Validation: Min/max length, regex patterns, required fields
• Custom Error Messages: User-friendly validation feedback
• Default Values: Pre-filled content for new entries
• Placeholder Support: Helpful hints for content creators
• Field Notes: Display helpful notes below the field
• Private Fields: Hide sensitive data from API responses

Configuration Example

// Example: Text validation with custom error message and field note
{
  "required": true,
  "maxLength": 255,
  "minLength": 3,
  "regex": "^[a-zA-Z0-9\\s]+$",
  "options": {
    "customErrorMessage": "Please enter valid text",
    "placeholder": "Enter your text here",
    "defaultValue": "Default text",
    "fieldNote": "This field accepts alphanumeric characters and spaces only"
  }
}

Use Cases

• Email addresses with regex validation
• Phone numbers with format validation
• URLs with pattern matching
• Custom text fields with length restrictions
• Password fields (with private option enabled)

Advanced Checkbox

Features

• Single & Multiple Modes: Toggle between single checkbox or multiple selections
• Dynamic Options: Define options with value|label format
• Min/Max Validation: Control minimum and maximum selections
• Layout Options: Vertical, horizontal, or grid layouts
• Default Selections: Pre-select options for new entries
• Field Notes: Display helpful notes below the field

Configuration Example

// Example: Multiple checkbox with validation and field note
{
  "required": true,
  "options": {
    "checkboxType": "multiple",
    "checkboxOptions": "1|Option 1\n2|Option 2\n3|Option 3",
    "minChoices": 1,
    "maxChoices": 2,
    "layout": "vertical",
    "defaultSelected": "1\n2",
    "fieldNote": "Please select at least 1 and at most 2 options"
  }
}

Checkbox Types

Single Checkbox

Use "checkboxType": "single" for a single checkbox that acts as a boolean toggle.

Multiple Checkboxes

Use "checkboxType": "multiple" to allow users to select multiple options from a list.

Layout Options

• Vertical: Options stacked vertically (default)
• Horizontal: Options arranged in a row
• Grid: Options displayed in a responsive grid

Advanced Radio

Features

• Single & Multiple Selection: Choose between single or multiple radio selections
• Dynamic Options: Flexible option configuration
• Selection Limits: Control minimum and maximum choices
• Layout Flexibility: Multiple visual layouts
• Custom Validation: Tailored error messages
• Field Notes: Display helpful notes below the field

Configuration Example

// Example: Single radio with dynamic options and field note
{
  "required": true,
  "options": {
    "selectionType": "single",
    "radioOptions": "small|Small\nmedium|Medium\nlarge|Large",
    "layout": "horizontal",
    "defaultSelected": "medium",
    "fieldNote": "Choose the size that best fits your needs"
  }
}

Selection Types

Single Selection

Use "selectionType": "single" for traditional radio button behavior where only one option can be selected.

Multiple Selection

Use "selectionType": "multiple" to allow users to select multiple radio options.

Advanced Enumeration

Features

• Multiple Enum Selection: Select multiple predefined values
• Enum-style Options: Maintain structured enum-like values
• Min/Max Selection Control: Limit how many options can be selected
• Default Selected Values: Preselect values for new entries
• Custom Validation: Tailored error messages
• Field Notes: Display helpful notes below the field

Configuration Example

// Example: Enumeration with dynamic options and field note
{
  "required": true,
  "options": {
    "enumOptions": "red|Red\nblue|Blue\ngreen|Green\nyellow|Yellow",
    "defaultSelected": "red\nblue",
    "minChoices": 1,
    "customErrorMessage": "Please select at least one color",
    "fieldNote": "You can select up to 3 colors"
  }
}

Use Cases

• Color selections
• Category tags
• Status indicators
• Predefined option lists
• Multi-select enums

Advanced Color

Features

• Color Picker: Intuitive color selection input
• Multiple Formats: Supports hex, rgb, and hsl display formats
• Alpha Channel: Optional transparency (RGBA/HSLA)
• Default Value: Preselect a color for new entries
• Palette: Provide a curated set of quick-pick colors
• Field Notes: Display helpful notes below the field
• Private Fields: Hide sensitive data from API responses

Configuration Example

{
  "required": true,
  "options": {
    "format": "hex",          // "hex" | "rgb" | "hsl"
    "alpha": true,            // enable transparency
    "defaultValue": "#1e90ff",
    "palette": "#000000\n#ffffff\n#1e90ff\n#ff4757",
    "allowCustom": true,
    "fieldNote": "Use brand primary color or choose from the palette"
  },
  "private": false
}

Use Cases

• Brand and theme color selection
• Button/background/text color fields
• Charts and visualization accent colors