Form Components

Comprehensive guide to all available form components in the ICMS Builder Form Engine.

Component Overview

Form components are the building blocks of your forms. Each component type serves a specific purpose and can be configured with various properties to meet your requirements.

Component Structure

All form components follow a consistent structure with common properties like type, name, class, and component-specific properties.

Available Component Types

{
  "components": [
    { "type": "text", "name": "firstName" },
    { "type": "textarea", "name": "description" },
    { "type": "radio", "name": "gender" },
    { "type": "checkbox", "name": "interests" },
    { "type": "toggle", "name": "notifications" },
    { "type": "switch", "name": "darkMode" },
    { "type": "selectPicker", "name": "country" },
    { "type": "datePicker", "name": "birthDate" },
    { "type": "filePicker", "name": "avatar" }
  ]
}

Dependencies

  • form: FormGroup (Required) - The parent Reactive Form group to which this input control belongs. Input must be in the form tag.
  • validatorSchema: (Required) - Validation name must be the same in the component JSON
  • name: (Required) - name must be the same as validation schema name

Validation Schema Support

All form components support validation schemas with specific data types. Each component section includes detailed information about supported validation schema types and how to configure them properly.

Text Field

The Text component is a reusable Angular form control designed for plain text input with customizable styling and configuration options. It is built to integrate seamlessly with Angular Reactive Forms, allowing developers to bind form controls, apply custom styles, and handle user input events efficiently.

Validation Schema Support

Supported Validation Types

This component supports the following validation schema types:

  • string: Text input with string validation rules
  • number: Numeric input with number validation rules
  • integer: Whole number input with integer validation rules

Note: The text component can handle various data types, but the validation schema determines the actual data type and validation rules applied.

Properties

Property Type Required Description
type string Required Must be "text"
name string Required Field name for form submission (must match validation schema name)
class array Optional Array of CSS class names to apply to the input field
style object Optional Inline styles object (e.g., {"margin":"10px"})
id string Optional ID applied to the input element
placeholder string Optional Placeholder text displayed when field is empty
default string Optional default value applied to the input
disabled boolean Optional Whether the input field is disabled. Does'nt bind value in form submission payload.
readOnly boolean Optional Whether the input field is disabled. But bind value in form submission payload.

Minimal Configuration

{
  "type": "text",
  "name": "text_field"
}

Output: <input class="input-custom fw-bold" name="text_field">

Minimal Configuration with Dependencies

{
  "type": "form",
  "validatorSchema": {
    "text_field": {
      "type": "string"
    }
  },
  "components": [
    {
      "type": "text",
      "name": "text_field"
    }
  ]
}

Maximal Configuration

{
  "type": "text",
  "name": "text_field",
  "default": "text input",
  "placeholder": "Enter text here",
  "id": "text_field",
  "class": ["input-custom", "fw-bold"],
  "style": { "style": "margin: 10px;" },
  "disabled": false
}

Output: <input class="input-custom fw-bold" placeholder="Enter text here" defaultValue="text input" id="test_field">

Textarea

Multi-line text input component for capturing longer text content such as descriptions, comments, and messages.

Validation Schema Support

Supported Validation Types

This component supports the following validation schema types:

  • string: Multi-line text input with string validation rules

Note: Textarea is designed specifically for string content and supports all string validation rules including length constraints, patterns, and format validation.

Properties

Property Type Required Description
type string Required Must be "textarea"
name string Required Field name for form submission (must match validation schema name)
class array Optional Array of CSS class names to apply to the textarea field
style object Optional Inline styles object (e.g., {"margin":"10px"})
id string Optional ID applied to the textarea element
placeholder string Optional Placeholder text displayed when field is empty
default string Optional default value applied to the textarea
disabled boolean Optional Whether the textarea field is disabled. Does'nt bind value in form submission payload.
readOnly boolean Optional Whether the textarea field is disabled. But bind value in form submission payload.

Minimal Configuration

{
  "type": "textarea",
  "name": "textarea_field"
}

Output: <textarea id="undefined" placeholder="undefined" rows="1" name="textarea_field" class="textarea-custom textarea-scrollbar"></textarea>

Minimal Configuration with Dependencies

{
  "type": "form",
  "validatorSchema": {
    "textarea_field": {
      "type": "string"
    }
  },
  "components": [
    {
      "type": "textarea",
      "name": "textarea_field"
    }
  ]
}

Maximal Configuration

{
  "type": "textarea",
  "name": "textarea_field",
  "default": "text input",
  "placeholder": "Enter text here",
  "id": "text_field",
  "class": ["input-custom", "fw-bold"],
  "style": { "margin": "10px;" },
  "disabled": false,
  "readOnly": true
}

Output: <textarea id="text_field" placeholder="Enter text here" rows="1" name="textarea_field" class="textarea-custom textarea-scrollbar fw-bold" style="{"margin":"10px"}" readonly="true"></textarea>

Radio

Radio button component for single-choice selection from a predefined list of options.

Validation Schema Support

Supported Validation Types

This component supports the following validation schema types:

  • string: Text-based option values with string validation rules
  • number: Numeric option values with number validation rules
  • integer: Whole number option values with integer validation rules
  • boolean: True/false option values with boolean validation rules

Note: Radio buttons support multiple data types depending on the option values defined in the dpRule. The validation schema should match the data type of the selected option values.

Properties

Property Type Required Description
type string Required Must be "radio"
name string Required Field name for form submission (must match validation schema name)
class array Optional Array of CSS class names to apply to the radio field
style object Optional Inline styles object (e.g., {"margin":"10px"})
id string Optional ID applied to the radio element
default string Optional default value applied to the radio (string or number)
disabled boolean Optional Whether the radio field is disabled. Does'nt bind value in form submission payload.
readOnly boolean Optional Whether the radio field is disabled. But bind value in form submission payload.
dpRule object Required Data population rule defining how options are populated (static or dynamic)

Data Population Strategies

Static Data Population

{
  "type": "radio",
  "name": "radio_field",
  "dpRule": {
    "type": "static",
    "options": [
      {
        "label": "Yes",
        "value": "yes"
      },
      {
        "label": "No",
        "value": "no"
      }
    ]
  }
}

API-based Data Population

{
  "type": "radio",
  "name": "radio_field",
  "dpRule": {
    "type": "dynamic",
    "apiEndpoint": ""
  }
}

API Requirements

  • API must be GET endpoint.
  • Expected response format:
{
  "code": "000",
  "message": "Success",
  "data": {
    "type": "group",
    "components": [
      {
        "label": "Yes",
        "value": "yes"
      },
      {
        "label": "No",
        "value": "no"
      }
    ]
  }
}

Minimal Configuration with Dependencies

{
  "type": "form",
  "validatorSchema": {
    "radio_field": {
      "type": "string"
    }
  },
  "components": [
        {
  "type": "radio",
      "name": "radio_field",
      "default": "yes",
      "dpRule": {
        "type": "static",
  "options": [
          {
            "label": "Yes",
            "value": "yes"
          },
          {
            "label": "No",
            "value": "no"
          }
        ]
      }
    }
  ]
}

Maximal Configuration

{
  "type": "radio",
  "id": "radio_field",
  "name": "radio_field",
  "class": ["input-custom", "fw-bold"],
  "style": { "margin": "10px;" },
  "disabled": false,
  "readOnly": true,
  "dpRule": {
    "type": "static",
  "options": [
      {
        "label": "Yes",
        "value": "yes"
      },
      {
        "label": "No",
        "value": "no"
      }
    ]
  }
}

Output: <input type="radio" class="radio-primary" name="radio_field" disabled=true>

Checkbox

Checkbox component for multiple-choice selection or boolean (true/false) values.

Validation Schema Support

Supported Validation Types

This component supports the following validation schema types:

  • array: Multiple selection with array validation rules
  • number: Numeric values in array with number validation rules
  • integer: Whole number values in array with integer validation rules
  • string: Text values in array with string validation rules

Note: Checkboxes are designed for multiple selections and always return an array. The validation schema should use array type with appropriate item validation rules for the option values.

Properties

Property Type Required Description
type string Required Must be "checkbox"
name string Required Field name for form submission (must match validation schema name)
class array Optional Array of CSS class names to apply to the checkbox field
style object Optional Inline styles object (e.g., {"margin":"10px"})
id string Optional ID applied to the checkbox element
default array Optional default values applied to the checkbox (array of objects with label and value)
disabled boolean Optional Whether the checkbox field is disabled. Does'nt bind value in form submission payload.
readOnly boolean Optional Whether the checkbox field is disabled. But bind value in form submission payload.
dpRule object Required Data population rule defining how options are populated (static or dynamic)

Data Population Strategies

Static Data Population

{
  "type": "checkbox",
  "name": "checkbox_field",
  "dpRule": {
    "type": "static",
    "options": [
      {
        "label": "Yes",
        "value": "yes"
      },
      {
        "label": "No",
        "value": "no"
      }
    ]
  }
}

API-based Data Population

{
  "type": "checkbox",
  "name": "checkbox_field",
  "dpRule": {
    "type": "dynamic",
    "apiEndpoint": ""
  }
}

API Requirements

  • API must be GET endpoint.
  • Expected response format:
{
  "code": "000",
  "message": "Success",
  "data": {
    "type": "group",
    "components": [
      {
        "label": "Yes",
        "value": "yes"
      },
      {
        "label": "No",
        "value": "no"
      }
    ]
  }
}

Minimal Configuration with Dependencies

{
  "type": "form",
  "validatorSchema": {
    "checkbox_field": {
      "type": "string"
    }
  },
  "components": [
    {
      "type": "checkbox",
      "name": "checkbox_field",
      "default": ["yes"],
      "dpRule": {
        "type": "static",
        "options": [
          {
            "label": "Yes",
            "value": "yes"
          },
          {
            "label": "No",
            "value": "no"
          }
        ]
      }
    }
  ]
}

Maximal Configuration

{
  "type": "checkbox",
  "id": "checkbox_field",
  "name": "checkbox_field",
  "class": ["input-custom", "fw-bold"],
  "style": { "margin": "10px;" },
  "disabled": false,
  "readOnly": true,
  "dpRule": {
    "type": "static",
    "options": [
      {
        "label": "Yes",
        "value": "yes"
      },
      {
        "label": "No",
        "value": "no"
      }
    ]
  }
}

Output: <input type="checkbox" class="checkbox-primary" name="checkbox_field" disabled=true>

Toggle

Toggle switch component for binary on/off states with modern switch-style UI.

Validation Schema Support

Supported Validation Types

This component supports the following validation schema types:

  • string: Text-based toggle values with string validation rules
  • number: Numeric toggle values with number validation rules
  • integer: Whole number toggle values with integer validation rules
  • boolean: True/false toggle values with boolean validation rules

Note: Toggle components can be configured to work with various data types. The validation schema should match the expected data type of the toggle values.

Properties

Property Type Required Description
type string Required Must be "toggle"
name string Required Field name for form submission (must match validation schema name)
class array Optional Array of CSS class names to apply to the toggle field
style object Optional Inline styles object (e.g., {"margin":"10px"})
id string Optional ID applied to the toggle element
default boolean Optional default state applied to the toggle (true/false)
disabled boolean Optional Whether the toggle field is disabled. Does'nt bind value in form submission payload.
readOnly boolean Optional Whether the toggle field is disabled. But bind value in form submission payload.

Minimal Configuration

{
  "type": "toggle",
  "name": "toggle_field"
}

Minimal Configuration with Dependencies

{
  "type": "form",
  "validatorSchema": {
    "toggle_field": {
      "type": "string"
    }
  },
      "components": [
    {
      "type": "toggle",
      "name": "toggle_field"
    }
  ]
}

Maximal Configuration

{
  "type": "toggle",
  "id": "toggle_field",
  "name": "toggle_field",
  "default": true,
  "class": ["fw-bold"],
  "style": { "margin": "10px;" },
  "disabled": false,
  "readOnly": true
}

Output: <input type="checkbox" id="toggle_field" name="checkbox_field" class="switch switch-primary">

Switch

Switch component for single-choice selection from a predefined list of options.

Validation Schema Support

Supported Validation Types

This component supports the following validation schema types:

  • boolean: True/false switch values with boolean validation rules

Note: Switch components are designed for binary states and work best with boolean validation schemas.

Properties

Property Type Required Description
type string Required Must be "switch"
name string Required Field name for form submission (must match validation schema name)
class array Optional Array of CSS class names to apply to the switch field
style object Optional Inline styles object (e.g., {"margin":"10px"})
id string Optional ID applied to the switch element
default string Optional default value applied to the switch (string or number)
disabled boolean Optional Whether the switch field is disabled. Does'nt bind value in form submission payload.
readOnly boolean Optional Whether the switch field is disabled. But bind value in form submission payload.
dpRule object Required Data population rule defining how options are populated (static or dynamic)

Data Population Strategies

Static Data Population

{
  "type": "switch",
  "name": "switch_field",
  "dpRule": {
    "type": "static",
    "options": [
      {
        "label": "Yes",
        "value": "yes"
      },
      {
        "label": "No",
        "value": "no"
      }
    ]
  }
}

API-based Data Population

{
  "type": "switch",
  "name": "switch_field",
  "dpRule": {
    "type": "dynamic",
    "apiEndpoint": ""
  }
}

API Requirements

  • API must be GET endpoint.
  • Expected response format:
{
  "code": "000",
  "message": "Success",
  "data": {
    "type": "group",
    "components": [
      {
        "label": "Yes",
        "value": "yes"
      },
      {
        "label": "No",
        "value": "no"
      }
    ]
  }
}

Minimal Configuration with Dependencies

{
  "type": "form",
  "validatorSchema": {
    "switch_field": {
      "type": "string"
    }
  },
      "components": [
    {
      "type": "switch",
      "name": "switch_field",
      "default": "yes",
      "dpRule": {
        "type": "static",
        "options": [
          {
            "label": "Yes",
            "value": "yes"
          },
          {
            "label": "No",
            "value": "no"
          }
        ]
      }
    }
  ]
}

Maximal Configuration

{
  "type": "switch",
  "id": "switch_field",
  "name": "switch_field",
  "class": ["input-custom", "fw-bold"],
  "style": { "margin": "10px;" },
  "disabled": false,
  "readOnly": true,
  "dpRule": {
    "type": "static",
    "options": [
      {
        "label": "Yes",
        "value": "yes"
      },
      {
        "label": "No",
        "value": "no"
      }
    ]
  }
}

Output: <input type="radio" class="radio-primary" name="switch_field" disabled=true>

Select Picker

Select Picker component for single-choice selection from a predefined list of options.

Validation Schema Support

Supported Validation Types

This component supports the following validation schema types:

  • string: Text-based option values with string validation rules
  • number: Numeric option values with number validation rules
  • integer: Whole number option values with integer validation rules

Note: Select Picker supports multiple data types depending on the option values defined in the dpRule. The validation schema should match the data type of the selected option values.

Properties

Property Type Required Description
type string Required Must be "selectPicker"
name string Required Field name for form submission (must match validation schema name)
class array Optional Array of CSS class names to apply to the selectPicker field
style object Optional Inline styles object (e.g., {"margin":"10px"})
id string Optional ID applied to the selectPicker element
default object Optional default value applied to the selectPicker (object with label and value)
disabled boolean Optional Whether the selectPicker field is disabled. Does'nt bind value in form submission payload.
readOnly boolean Optional Whether the selectPicker field is disabled. But bind value in form submission payload.
dpRule object Required Data population rule defining how options are populated (static or dynamic)

Data Population Strategies

Static Data Population

{
  "type": "selectPicker",
  "name": "selectPicker_field",
  "dpRule": {
    "type": "static",
    "options": [
      {
        "label": "Yes",
        "value": "yes"
      },
      {
        "label": "No",
        "value": "no"
      }
    ]
  }
}

API-based Data Population

{
  "type": "selectPicker",
  "name": "selectPicker_field",
  "dpRule": {
    "type": "dynamic",
    "apiEndpoint": ""
  }
}

API Requirements

  • API must be GET endpoint.
  • Expected response format:
{
  "code": "000",
  "message": "Success",
  "data": {
    "type": "group",
    "components": [
      {
        "label": "Yes",
        "value": "yes"
      },
      {
        "label": "No",
        "value": "no"
      }
    ]
  }
}

Minimal Configuration with Dependencies

{
  "type": "form",
  "validatorSchema": {
    "selectPicker_field": {
      "type": "string"
    }
  },
      "components": [
    {
      "type": "selectPicker",
      "name": "selectPicker_field",
      "default": {
        "label": "Yes",
        "value": "yes"
      },
      "dpRule": {
        "type": "static",
        "options": [
          {
            "label": "Yes",
            "value": "yes"
          },
          {
            "label": "No",
            "value": "no"
          }
        ]
      }
    }
  ]
}

Maximal Configuration

{
  "type": "selectPicker",
  "id": "selectPicker_field",
  "name": "selectPicker_field",
  "class": ["input-custom", "fw-bold"],
  "style": { "margin": "10px;" },
  "disabled": false,
  "readOnly": true,
  "dpRule": {
    "type": "static",
    "options": [
      {
        "label": "Yes",
        "value": "yes"
      },
      {
        "label": "No",
        "value": "no"
      }
    ]
  }
}

Output: <input type="radio" class="radio-primary" name="selectPicker_field" disabled=true>

Date Picker

Date selection component that renders a single-date picker using Tempus Dominus with a light theme, calendar-only (no clock). It binds to an Angular ExtendedFormControl and writes a formatted date string into the form.

Validation Schema Support

Supported Validation Types

This component supports the following validation schema types:

  • string: Date values as formatted strings with string validation rules

Note: Date Picker always outputs formatted date strings. The validation schema should use string type with appropriate pattern validation for the expected date format.

Component Output

  • Form Value: The control value is a string formatted by config.format
  • Example: With format: "YYYY-MM-DD" → "2025-08-10"
  • Manual Typing: Typing manually also updates the control and marks it touched/dirty

Properties

Property Type Required Description
id string Required Unique component id; used to wire TD targets
type string Required Must be "datePicker"
name string Required Form control name
format string Required Output/display format used by TD and for form value (e.g., "YYYY-MM-DD")
placeholder string Optional Input placeholder text
default string Optional Initial value (must match format if provided)
readOnly boolean Optional Makes input non-editable while still focusable (default: false)
disabled boolean Optional Disables input/control (default: false)
locale string Optional TD localization (e.g., "en", "fr")
startOfTheWeek number Optional First day of week (0=Sunday, 1=Monday)
maxWeekdayLength number Optional Weekday label length (1–n)
dayViewHeaderFormat object Optional TD header format config (month/year tokens)
validators object Optional Validation rules (required, minDate, maxDate)
class array Optional Extra classes merged onto the input (default: "input-custom")
style object Optional Inline styles bound via [ngStyle] on the input
a11y object Optional Accessibility configuration (ariaLabel, ariaDescribedBy)
description string Optional When present, wired to aria-describedby
order number Optional Optional layout hint for renderers

Component Behavior

  • Tempus Dominus Integration: Initializes TD after view init with display.viewMode = 'calendar' and display.components.clock = false
  • Light Theme: Uses light theme with custom prev/next icons
  • Popup Positioning: Container: document.body to avoid z-index issues
  • Date Selection: Shows popup on field focus/calendar icon click, formats selected date using config.format
  • Z-Index Management: Popup's z-index and positioning adjusted to appear above modals

Minimal Configuration

{
  "id": "dob",
  "type": "datePicker",
  "name": "dob",
  "placeholder": "Select date",
  "format": "YYYY-MM-DD"
}

Maximal Configuration

{
  "id": "reservationDate",
  "type": "datePicker",
  "name": "reservationDate",
  "label": "Reservation date",
  "placeholder": "DD/MM/YYYY",
  "default": "2025-08-10",
  "readOnly": false,
  "disabled": false,
  "format": "YYYY-MM-DD",
  "locale": "en",
  "startOfTheWeek": 0,
  "maxWeekdayLength": 2,
  "dayViewHeaderFormat": {
    "month": "long",
    "year": "numeric"
  },
  "validators": {
    "required": false,
    "minDate": "2020-01-01",
    "maxDate": "2030-12-31"
  },
  "class": ["input-custom"],
  "style": { "minWidth": "220px" },
  "a11y": {
    "ariaLabel": "Choose reservation date",
    "ariaDescribedBy": "reservationHelpText"
  },
  "order": 10,
  "description": "Pick a date for your reservation"
}

Validation

  • Format: The value written is always formatted using config.format
  • Required/minDate/maxDate: Surfaced via shared form validation (ExtendedFormControl + getControlErrorMessage)
  • Hard Blocking: For blocking out-of-range dates at picker level, add TD restrictions in component

Practical Examples

Simple DOB Field

{
  "id": "dob",
  "type": "datePicker",
  "name": "dob",
  "placeholder": "YYYY-MM-DD",
  "format": "YYYY-MM-DD",
  "validators": { "required": true }
}

EU-style Date with Monday Week Start

{
  "id": "startDate",
  "type": "datePicker",
  "name": "startDate",
  "placeholder": "DD/MM/YYYY",
  "format": "DD/MM/YYYY",
  "locale": "en-GB",
  "startOfTheWeek": 1,
  "maxWeekdayLength": 2
}

With Bounds and Helper Text

{
  "id": "eventDate",
  "type": "datePicker",
  "name": "eventDate",
  "format": "YYYY-MM-DD",
  "validators": {
    "required": true,
    "minDate": "2025-01-01",
    "maxDate": "2026-12-31"
  },
  "placeholder": "Select event date",
  "description": "eventDateHelp",
  "a11y": { "ariaLabel": "Select event date" }
}

Accessibility

  • Calendar Icon: Configured as a label tied to the input with TD toggle attributes
  • ARIA Support: Provide a11y.ariaLabel and/or description/ariaDescribedBy for better screen-reader context
  • Z-Index: Popup gets very high z-index and fixed positioning to ensure visibility above modals

File Picker

File upload component with two skins: uploadCards (click-to-upload cards) and dropUploadCards (drag & drop + button). It validates file type and max size, shows upload progress UI, supports single/multiple files, and writes Base64 data into the bound form control.

Validation Schema Support

Supported Validation Types

This component supports the following validation schema types:

  • string: Base64 data URL strings with string validation rules

Note: File Picker outputs Base64 data URLs as strings. The validation schema should use string type with appropriate pattern validation for Base64 data URLs.

Component Output

  • Single File Mode: Form control value becomes a single Base64 data URL string (e.g., "data:image/png;base64,iVBORw0...")
  • Multiple Files Mode: Form control value becomes an array of Base64 strings
  • File Deletion: When users delete a file from the UI, it is automatically removed from the form value

Properties

Property Type Required Description
id string Required Unique element/control id
type string Required Must be "filePicker"
name string Required Form control name (used to bind value)
skin object Optional UI skin configuration: {"type": "uploadCards" | "dropUploadCards"}
fileType string Required Allowed extensions (e.g., ".jpg,.png,.pdf")
fileSize number Required Max size per file in megabytes
multipleSelection boolean Optional Allow multiple file select/drag-drop (default: false)
label string Optional Optional visible label
placeholder string Optional Optional hint text
theme string Optional Progress bar accent color (default: "primary")
description boolean Optional Show helper text below button (default: false)
desc1 string Optional First line above button (default: "Drag & drop files")
desc2 string Optional Second line above button (default: "or")
btnText string Optional Button text/HTML (default: "Choose file")
desc3 string Optional Helper description when description = true
class array Optional Icon container classes
style object Optional Inline styles for icon container
btnclass array Optional Button classes (default: "btn btn-sm btn-secondary mt-1")
btnstyle object Optional Inline styles for the button
Divclass array Optional Wrapper classes for inner container
validators object Optional Validation rules (e.g., {"required": false})
constraints object Optional Mask/regex patterns (usually unused for files)
form object Optional Form configuration (e.g., {"defaultValue": null})
a11y object Optional Accessibility configuration (e.g., {"ariaLabel": "Upload files"})

Skin Types

uploadCards

Simple "attach" button that opens the OS file picker. Each selected file appears as a card with image/icon preview, progress, cancel, and then view/delete.

dropUploadCards

Drag & drop area with icon + helper text + button. Same upload card behavior as uploadCards. Adds visual highlight on drag-over.

Minimal Configuration

{
  "id": "fileUpload1",
  "type": "filePicker",
  "name": "upload",
  "skin": { "type": "dropUploadCards" },
  "fileType": ".jpg,.png",
  "fileSize": 5
}

Maximal Configuration

{
  "id": "fileUpload1",
  "type": "filePicker",
  "name": "upload",
  "label": "Attachments",
  "placeholder": "Select files",
  "skin": {
    "type": "dropUploadCards"
  },
  "theme": "primary",
  "fileType": ".jpg,.jpeg,.png,.svg,.pdf,.doc,.ppt,.xls",
  "fileSize": 10,
  "multipleSelection": true,
  "description": true,
  "desc1": "Drag & drop your files here",
  "desc2": "or",
  "btnText": "Browse files",
  "desc3": "Accepted: JPG, PNG, SVG, PDF up to 10 MB each",
  "class": ["ph", "ph-upload-simple", "icon", "icon-lg"],
  "style": { "opacity": "0.9" },
  "btnclass": ["btn", "btn-sm", "btn-secondary", "mt-1"],
  "btnstyle": { "minWidth": "160px" },
  "Divclass": ["d-flex","flex-column","custom-gap-10","flex-wrap","justify-content-center","align-items-center"],
  "validators": {
    "required": false
  },
  "constraints": {
    "maskPattern": null,
    "regexPattern": null
  },
  "form": {
    "defaultValue": null
  },
  "a11y": {
    "ariaLabel": "Upload attachments"
  }
}

Validation Rules

  • Type Check: File extension must match one of the fileType list (case-insensitive, leading dot optional)
  • Size Check: Each file must be ≤ fileSize MB. Exceeding files are rejected with toast error
  • Required: If validators.required = true, form validation ensures at least one Base64 value is present

Practical Examples

Single Image Upload

{
  "id": "avatar",
  "type": "filePicker",
  "name": "avatar",
  "skin": { "type": "uploadCards" },
  "fileType": ".png",
  "fileSize": 2,
  "multipleSelection": false,
  "validators": { "required": true }
}

Multiple Documents with Drag & Drop

{
  "id": "attachments",
  "type": "filePicker",
  "name": "attachments",
  "skin": { "type": "dropUploadCards" },
  "fileType": ".pdf,.doc,.docx,.ppt,.pptx,.xls,.xlsx",
  "fileSize": 10,
  "multipleSelection": true,
  "description": true,
  "desc1": "Drag & drop documents",
  "desc2": "or",
  "btnText": "Browse",
  "desc3": "PDF/DOC/PPT/XLS up to 10 MB each",
  "theme": "primary",
  "btnclass": ["btn", "btn-sm", "btn-secondary", "mt-1"],
  "Divclass": ["d-flex","flex-column","gap-2","justify-content-center","align-items-center"]
}