Form Fields Types

The plugin system supports various form field types for different data inputs:

Basic Field Types

String: Simple text input and numbers **

{ key: 'firstName', label: 'First Name', type: 'string', required: true }

File: Single file upload

{ key: 'cvDocument', label: 'CV', type: 'file', required: false }

Files: Multiple file upload

{ key: 'otherFiles', label: 'Other Files', type: 'files', required: false }

Date: Date input (datepicker)

{ key: 'startDate', label: 'Start date', type: 'date', required: false }

📘
There is no dedicated type for numbers - use string

Layout Fields

Divider: Visual separator

{ key: 'divider', label: 'Divider', type: 'divider' }

Heading: Section title

{ key: 'heading', label: 'Files', type: 'heading' }

Callout: Notification or message

{
  key: 'apiKeyCallout',
  type: 'callout',
  label: 'No API key',
  intent: 'danger',
  description: 'Please configure the plugin with an API Key.'
}

Selection Fields

Please note that all of the below have string as a main type.

SingleSelect: Dropdown selection

{
  key: 'spices',
  label: 'Spices',
  type: 'string',
  placeholder: 'Select spices...',
  multiSelectOptions: [
    { label: 'Cinnamon', value: 'cinnamon' },
    { label: 'Turmeric', value: 'turmeric' },
    # More options...
  ]
}

MultiSelect: Multiple selection field

{
  key: 'spices',
  label: 'Spices',
  type: 'string',
  placeholder: 'Select spices...',
  multiSelectOptions: [
    { label: 'Cinnamon', value: 'cinnamon' },
    { label: 'Turmeric', value: 'turmeric' },
    # More options...
  ]
}

SingleSelect with async options fetching: Dropdown selection with options fetched from a separate endpoint after rendering the form (used to improve the load time of the form when loading options for a given selectbox takes long time and blocks initial render of the form)

{
  key: 'spices',
  label: 'Spices',
  type: 'string',
  placeholder: 'Select spices...',
  singleSelectOptionsListKey: "spices", # Reference to a `listEndpoint` key for dynamic options. Must be a `key` of one of the endpoints defined in the `listEndpoints` array (of the meta response) 
}

MultiSelect with async options fetching: Dropdown selection with options fetched from a separate endpoint after rendering the form (used to improve the load time of the form when loading options for a given selectbox takes long time and blocks initial render of the form)

{
  key: 'spices',
  label: 'Spices',
  type: 'string',
  placeholder: 'Select spices...',
  multiSelectOptionsListKey: "spices", # Reference to a `listEndpoint` key for dynamic options. Must be a `key` of one of the endpoints defined in the `listEndpoints` array (of the meta response)More options...
  ]
}

Radio: Radio button selection

{
  key: 'temperaturePreference',
  label: 'Temperature Preference',
  type: 'string',
  required: true,
  value: 'hot',
  radioOptions: [
    { label: 'Hot', value: 'hot' },
    { label: 'Cold', value: 'cold' }
  ]
}

Checkbox: Checkbox selection

{
  key: 'sweeteners',
  label: 'Sweeteners',
  type: 'string',
  checkboxOptions: [
    { label: 'Honey', value: 'honey' },
    { label: 'Sugar', value: 'sugar' },
    # More options...
  ]
}