Element Attributes

ajaxForm

Requests a form via AJAX call. A form is constructed in the PHP controller file. ajaxForm attribute settings.json file example:
{
  ...
  "widget": {
    "type": "ajaxForm",
    "access": "public",
    "value": {
      "key": "",
      "value": ""
    },
    "options": {
      "label": "",
      "action": "vcv:wpWidgets:form"
    }
  }
  ...
}

animateDropdown

Although animation list is already available for each element in Design Options, this attribute allows adding an additional drop-down with a list of animation classes (e.g. animation for the nested element.) animateDrodown attribute settings.json file example:
{
  ...
  "buttonAnimation": {
    "type": "animateDropdown",
    "access": "public",
    "value": "fadeInLeft",
    "options": {
      "label": "Animate button"
    }
  },
  ...
}

attachimage

Allows adding an image from Media Library. attachimage attribute settings.json file example:
{
  ...
  "image": {
    "type": "attachimage",
    "access": "public",
    "value": "image.jpg",
    "options": {
      "label": "Image",
      "defaultValue": "image.jpg"
    }
  },
  ...
}

attachvideo

Allows adding a video from Media Library. attachvideo attribute settings.json file example:
{
  ...
  "video": {
    "type": "attachvideo",
    "access": "public",
    "value": "",
    "options": {
      "label": "Video"
    }
  },
  ...
}

autocomplete

Allows searching for value through the list. Usually, this attribute is used in shortcode based elements. autocomplete attribute settings.json file example:
{
  ...
  "source": {
    "type": "autocomplete",
    "access": "public",
    "value": "",
    "options": {
      "action": "actionName",
      "validation": true,
      "label": "Search items",
      "single": true
    }
  },
  ...
}
Inside your PHP controller create a method that will render all posts list as an autocomplete field:
...
public function __construct()
{
    ...
    $this->addFilter('vcv:autocomplete:actionName:render', 'methodName');
    ...
}
...
protected function methodName($response, $payload)
{
    global $wpdb;
    $searchValue = $payload['searchValue'];
    $sourceId = (int)$searchValue;
    $postMetaInfos = $wpdb->get_results(
        $wpdb->prepare(
            "SELECT ID AS id, post_title AS title
                FROM {$wpdb->posts} 
                WHERE post_status = 'publish' AND ( ID = '%d' OR post_title LIKE '%%%s%%' )",
            $sourceId > 0 ? $sourceId : -1,
            stripslashes($searchValue)
        ),
        ARRAY_A
    );
    $response['results'] = [];
    if (is_array($postMetaInfos) && !empty($postMetaInfos)) {
        foreach ($postMetaInfos as $value) {
            $data = [];
            $data['value'] = $value['id'];
            $data['label'] = __('Id', 'visualcomposer') . ': ' . $value['id'] . ((strlen($value['title']) > 0)
                    ? ' - ' . __('Title', 'visualcomposer') . ': ' . $value['title'] : '');
            $response['results'][] = $data;
        }
    }

    return $response;
}
...

buttonGroup

A set of buttons allowing to select one value out of multiple. Buttons may contain an icon or text. To set the desired view of a button just define icon or text property in the value object. List of default Visual Composer icon classes for buttonGroup attribute, class names are self-explanatory:
  • vcv-ui-icon-attribute-vertical-alignment-top
  • vcv-ui-icon-attribute-vertical-alignment-middle
  • vcv-ui-icon-attribute-vertical-alignment-bottom
  • vcv-ui-icon-attribute-alignment-left
  • vcv-ui-icon-attribute-alignment-right
  • vcv-ui-icon-attribute-alignment-center
  • vcv-ui-icon-attribute-shape-square
  • vcv-ui-icon-attribute-shape-rounded
  • vcv-ui-icon-attribute-shape-round
  • vcv-ui-icon-attribute-row-width-boxed
  • vcv-ui-icon-attribute-row-width-stretched
  • vcv-ui-icon-attribute-row-width-stretched-content
  • vcv-ui-icon-attribute-background-position-left-top
  • vcv-ui-icon-attribute-background-position-center-top
  • vcv-ui-icon-attribute-background-position-right-top
  • vcv-ui-icon-attribute-background-position-left-center
  • vcv-ui-icon-attribute-background-position-center-center
  • vcv-ui-icon-attribute-background-position-right-center
  • vcv-ui-icon-attribute-background-position-left-bottom
  • vcv-ui-icon-attribute-background-position-center-bottom
  • vcv-ui-icon-attribute-background-position-right-bottom
buttonGroup attribute settings.json file example:
{
  ...
  "alignment": {
    "type": "buttonGroup",
    "access": "public",
    "value": "left",
    "options": {
      "label": "Alignment",
      "values": [
        {
          "label": "Left",
          "value": "left",
          "icon": "vcv-ui-icon-attribute-alignment-left"
        },
        {
          "label": "Center",
          "value": "center",
          "icon": "vcv-ui-icon-attribute-alignment-center"
        },
        {
          "label": "Right",
          "value": "right",
          "icon": "vcv-ui-icon-attribute-alignment-right"
        }
      ]
    }
  },
  ...
}
or
{
  ...
  "size": {
    "type": "buttonGroup",
    "access": "public",
    "value": "large",
    "options": {
      "label": "Size",
      "values": [
        {
          "label": "Small",
          "value": "small",
          "text": "S"
        },
        {
          "label": "Medium",
          "value": "medium",
          "text": "M"
        },
        {
          "label": "Large",
          "value": "large",
          "text": "L"
        },
      ]
    }
  },
  ...
}

calendar

An attribute that allows selecting date and time. Attribute returns selected date as a Date object. The default value is an empty string. The attribute sets the field value to the current date, but inside a component.js file a condition needs to be added:
render () {
  ...
  const { datepicker } = this.props.atts
  datepicker = datepicker || new Date()
  ...
}
calendar attribute settings.json file example:
{
  ...
  "datepicker": {
    "type": "calendar",
    "access": "public",
    "value": "",
    "options": {
      "label": "Date",
      "time": true,
      "timeIntervals": 15
    }
  },
  ...
}

checkbox

A simple checkbox. checkbox attribute settings.json file example:
{
  ...
  "devices": {
    "type": "checkbox",
    "access": "public",
    "value": [],
    "options": {
      "label": "Devices",
      "values": [ 
        {
          "label": "Desktop",
          "value": "xl"
        },
        {
          "label": "Mobile",
          "value": "xs"
        }
      ]
    }
  },
  ...
}

color

Colorpicker for value. Usually, cssMixin property must be listed inside options. color attribute settings.json file example:
{
  ...
  "backgroundColor": {
    "type": "color",
    "access": "public",
    "value": "#b3a694",
    "options": {
      "label": "Background color",
      "cssMixin": {
        "mixin": "backgroundColor",
        "property": "backgroundColor",
        "namePattern": "[\\da-f]+"
      }
    }
  },
  ...
}

customId

String field used to add a custom id to the element wrapper. customId attribute settings.json file example:
{
  ...
  "metaCustomId": {
    "type": "customId",
    "access": "public",
    "value": "",
    "options": {
      "label": "Element ID",
      "description": "Apply unique ID to element to link directly to it by using #your_id (for element ID use lowercase input only)."
    }
  },
  ...
}

designOptions

Design options to set up margins, paddings, background color etc. designOptions attribute settings.json file example:
{
  ...
  "designOptions": {
    "type": "designOptions",
    "access": "public",
    "value": {},
    "options": {
      "label": "Design Options"
    }
  },
  ...
}
List of values in a select tag dropdown attribute settings.json file example:
{
  ...
  "videoSource": {
    "type": "dropdown",
    "access": "public",
    "value": "youtube",
    "options": {
      "label": "Video source",
      "values": [
        {
          "label": "Youtube",
          "value": "youtube"
        },
        {
          "label": "Vimeo",
          "value": "vimeo"
        }
      ]
    }
  },
  ...
}

element

Allows inserting another element. The inserted element will be displayed as a separate section in Edit Form, thus the attribute must be listed in the metaEditFormTabs attribute. element attribute settings.json file example:
{
  ...
  "button": {
    "type": "element",
    "access": "public",
    "value": {
      "tag": "basicButton"
    },
    "options": {
      "category": "Button",
      "tabLabel": "Button"
    }
  },
  "metaEditFormTabs": {
    "type": "group",
    "access": "protected",
    "value": [
      "editFormTab1",
      "button",
      "designOptions"
    ]
  },
  ...
}

googleFonts

List of available google fonts with weight. googleFonts attribute settings.json file example:
{
  ...
  "font": {
    "type": "googleFonts",
    "access": "public",
    "value": {
      "fontFamily": "Lato",
      "fontStyle": {
        "weight": "400",
        "style": "regular"
      },
      "status": "active",
      "fontText": "The sky was cloudless and of a deep dark blue."
    },
    "options": {
      "label": "Font"
    }
  },
  ...
}

group

List of data values. Used to group edit form attributes in the Edit Form. group attribute settings.json file example:
{
  ...
  "editFormTab1": {
    "type": "group",
    "access": "protected",
    "value": [
      "alignment",
      "color",
      "metaCustomId",
      "customClass"
    ],
    "options": {
      "label": "General"
    }
  },
  ...
}

htmleditor

Wordpress Classic TinyMCE editor. htmleditor attribute settings.json file example:
{
  ...
  "output": {
    "type": "htmleditor",
    "access": "public",
    "value": "<h2>Hello there!</h2>\n<p>This is just some text.</p>",
    "options": {
      "label": "Content"
    }
  },
  ...
}

iconpicker

Icon picker allows selecting an icon from predefined libraries. iconpicker attribute settings.json file example:
{
  ...
  "iconPicker": {
    "type": "iconpicker",
    "access": "public",
    "value": {
      "icon": "vcv-ui-icon-material vcv-ui-icon-material-mode_edit",
      "iconSet": "material"
    },
    "options": {
      "label": "Icon"
    }
  },
  ...
}

inputIcon

An input with an icon on the side. Input type can be changed to number or string. inputIcon attribute settings.json file example:
{
  ...
  "desktopWidth": {
    "type": "inputIcon",
    "access": "public",
    "value": "600",
    "options": {
      "min": "1",
      "label": "Width on a desktop",
      "iconClasses": "vcv-ui-icon vcv-ui-icon-desktop",
      "inputType": "number"
    }
  },
  "mobileWidth": {
    "type": "inputIcon",
    "access": "public",
    "value": "200",
    "options": {
      "min": "1",
      "label": "Width on a mobile",
      "iconClasses": "vcv-ui-icon vcv-ui-icon-mobile-portrait",
      "inputType": "number"
    }
  },
  ...
}

inputSelect

Selector with a search to browse multi-data. Currently, only currency data is available. inputSelect attribute settings.json file example:
{
  ...
  "price": {
    "type": "inputSelect",
    "access": "public",
    "value": {
      "input": "19,95",
      "select": "$_"
    },
    "options": {
      "type": "currency",
      "label": "Price",
      "values": []
    }
  },
  ...
}

number

Input field with number type. Can take min and max properties in options. number attribute settings.json file example:
{
  ...
  "width": {
    "type": "number",
    "access": "public",
    "value": "150",
    "options": {
      "label": "Width",
      "min": 1,
      "max": 300
    }
  },
  ...
}

paramsGroup

This attribute allows to contain and operate a certain set of attributes within a separate group. A group can be added, edited, removed, cloned and moved (relative to each other, up and down.) Initial groups are set within a settings.json file. Inside elements Edit Form paramsGroup attribute is displayed similar to Tree View, once clicked on edit, Edit Form will re-render with attributes bound to this group. The options values within each group will affect the corresponding child element of the initial parent element (e.g. Bar in Progress Bars element.) The below code examples shows how Progress Bars element is built. paramsGroup attribute settings.json file example:
"bars": {
    "type": "paramsGroup",
    "access": "public",
    "value": {
      "value": [
        {
          "title": "Web Design",
          "value": 80,
          "color": "#50E3C2"
        },
        {
          "title": "Marketing",
          "value": 50,
          "color": "#50E3C2"
        }, 
        {
          "title": "Social Media",
          "value": 60,
          "color": "#50E3C2"
        }
      ]
    },
    "options": {
      "label": "General",
      "title": "Progress bar",
      "groupDefaultTile": "Progress bar",
      "settings": {
        "title": {
          "type": "string",
          "access": "public",
          "value": "Progress bar",
          "options": {
            "label": "Title"
          }
        },
        "value": {
          "type": "range",
          "access": "public",
          "value": "70",
          "options": {
            "label": "Value",
            "cssMixin": {
              "mixin": "barValue",
              "property": "value",
              "namePattern": "[\\da-f]+"
            }
          }
        },
        "color": {
          "type": "color",
          "access": "public",
          "value": "#50E3C2",
          "options": {
            "label": "Bar color",
            "cssMixin": {
              "mixin": "barColor",
              "property": "color",
              "namePattern": "[\\da-f]+"
            }
          }
        },
        "_paramGroupEditFormTab1": {
          "type": "group",
          "access": "protected",
          "value": [
            "title",
            "value",
            "color"
          ],
          "options": {
            "label": "General"
          }
        },
        "metaEditFormTabs": {
          "type": "group",
          "access": "protected",
          "value": [
            "_paramGroupEditFormTab1"
          ]
        }
      }
    }
  }
paramsGroup attribute component.js file example:
import React from 'react'
import vcCake from 'vc-cake'
import classNames from 'classnames'
import ProgressBar from './progressBar'
const vcvAPI = vcCake.getService('api')

export default class ProgressBars extends vcvAPI.elementComponent {
  /**
   * getMixin method returns a PCSS mixin specific to the child element,
   * it uses VC native method getMixinData to get PCSS mixin.
   */
  getMixin (mixinName, i) {
    const elementMixins = this.getMixinData()
    return elementMixins['bars'][i][mixinName]
  }

  /**
   * getContent method returns an array of child elements,
   * from <ProgressBar /> component.
   * Proper attributes must be passed
   */
  getContent () {
    const { bars } = this.props.atts
    // All the necessary code for elements' child components

    ...

    const items = bars.value ? bars.value : bars
    return items.map((item, i) => {
      let key = `progressBar-${this.props.id}-${i}`
      let attributes = item.progressBar || item
      attributes.atts = {}
      // tag property is a must have, the system will recognize to which element it belongs
      attributes.atts.tag = this.props.atts.tag
      attributes.atts.title = item.title
      attributes.atts.value = item.value
      attributes.itemIndex = i
      attributes.getMixin = this.getMixin.bind(this)
      return <ProgressBar {...attributes} key={key} />
    })
  }

  render () {
    const { id, atts, editor } = this.props

    // All the necessary code to render element component

    ...
  
    return (
      <div {...editor} id={`el-${id}`} className={containerClasses} {...doAll}>
        <div className='vce-progress-bars' {...customProps}>
          {this.getContent()}
        </div>
      </div>
    )
  }
}
paramsGroup attribute childComponent.js file example:
import React from 'react'
import classNames from 'classnames'

export default class ProgressBar extends React.Component {
  render () {
    const { getMixin, itemIndex } = this.props
    const { title, value } = this.props.atts
    let containerClasses = [ 'vce-progress-bar-container' ]
    let mixin = getMixin('barValue', itemIndex)
    if (mixin) {
      containerClasses.push(`vce-progress-bar--value-${mixin.selector}`)
    }

    mixin = getMixin('barColor', itemIndex)
    if (mixin) {
      let colorClass = `vce-progress-bar--${colorType}-${mixin.selector}`
      containerClasses.push(colorClass)
    }

    containerClasses = classNames(containerClasses)

    // All the necessary code to render child element component
    ...

    return <div className={containerClasses}>
      <div className='vce-progress-bar-text'>
        <div className='vce-progress-bar-title'>{title}</div>
        <div className='vce-progress-bar-value' />
      </div>
      <div className='vce-progress-bar-wrapper'>
        <progress className='vce-progress-bar' value={value} max='100'>{value} %</progress>
      </div>
    </div>
  }
}

radio

Input field with radio type. radio attribute settings.json file example:
{
  ...
  "device": {
    "type": "radio",
    "access": "public",
    "value": "xs",
    "options": {
      "label": "Device",
      "values": [
        {
          "label": "Desktop",
          "value": "xl"
        },
        {
          "label": "Mobile",
          "value": "xs"
        }
      ]
    }
  },
  ...
}

range

Slider with a range of values. range attribute settings.json file example:
{
 ...
  "width": {
    "type": "range",
    "access": "public",
    "value": "60",
    "options": {
      "label": "Width",
      "min": 1,
      "max": 100
    }
  },
  ...
}

rawCode

Raw code editor, mode property can be set to html or javascript. rawCode attribute settings.json file example:
{
  ...
  "rawHtml": {
    "type": "rawCode",
    "access": "public",
    "value": "<p><strong>HyperText Markup Language (HTML)</strong> is the standard markup language for creating web pages and web applications.</p>",
    "options": {
      "label": "Raw HTML",
      "mode": "html"
    }
  },
  ...
}

string

Input field with text type. string attribute settings.json file example:
{
  ...
  "title": {
    "type": "string",
    "access": "public",
    "value": "Hello World!",
    "options": {
      "label": "Title"
    }
  },
  ...
}

textarea

A simple Textarea input type. textarea attribute settings.json file example:
{
  ...
  "text": {
    "type": "textarea",
    "access": "public",
    "value": "Lorem ipsum dolor sit amet...",
    "options": {
      "label": "Text"
    }
  },
  ...
}

toggle

Toggle switcher like a checkbox. toggle attribute settings.json file example:
{
  ...
  "toggleTitle": {
    "type": "toggle",
    "access": "public",
    "value": "true",
    "options": {
      "label": "Toggle title"
    }
  },
  ...
}

toggleSmall

A small version of toggle attribute is used to toggle skin color of a tinyMCE editor. toggleSmall attribute settings.json file example:
{
  ...
    "darkTextSkin": {
      "type": "toggleSmall",
      "access": "public",
      "value": true
    },
    "description": {
      "type": "htmleditor",
      "access": "public",
      "value": "Lorem ipsum dolor sit amet...",
      "options": {
        "label": "Description",
        "skinToggle": "darkTextSkin"
      }
    },
  ...
}

treeView

Displays child elements as Tree View in Edit Form. treeView attribute settings.json file example:
{
  ...
  "buttons": {
    "type": "treeView",
    "access": "public",
    "value": {},
    "options": {
      "label": "Buttons"
    }
  },
  ...
}

url

Link field which works via Link editor for Wordpress. url attribute settings.json file example:
{
  ...
  "buttonUrl": {
    "type": "url",
    "access": "public",
    "value": {
      "url": "",
      "title": "",
      "targetBlank": false,
      "relNofollow": false
    },
    "options": {
      "label": "Link selection"
    }
  },
  ...
}

ajaxForm

Requests a form via AJAX call. A form is constructed in the PHP controller file. ajaxForm attribute settings.json file example:
{
  ...
  "widget": {
    "type": "ajaxForm",
    "access": "public",
    "value": {
      "key": "",
      "value": ""
    },
    "options": {
      "label": "",
      "action": "vcv:wpWidgets:form"
    }
  }
  ...
}

animateDropdown

Although animation list is already available for each element in Design Options, this attribute allows adding an additional drop-down with a list of animation classes (e.g. animation for the nested element.) animateDrodown attribute settings.json file example:
{
  ...
  "buttonAnimation": {
    "type": "animateDropdown",
    "access": "public",
    "value": "fadeInLeft",
    "options": {
      "label": "Animate button"
    }
  },
  ...
}

attachimage

Allows adding an image from Media Library. attachimage attribute settings.json file example:
{
  ...
  "image": {
    "type": "attachimage",
    "access": "public",
    "value": "image.jpg",
    "options": {
      "label": "Image",
      "defaultValue": "image.jpg"
    }
  },
  ...
}

attachvideo

Allows adding a video from Media Library. attachvideo attribute settings.json file example:
{
  ...
  "video": {
    "type": "attachvideo",
    "access": "public",
    "value": "",
    "options": {
      "label": "Video"
    }
  },
  ...
}

autocomplete

Allows searching for value through the list. Usually, this attribute is used in shortcode based elements. autocomplete attribute settings.json file example:
{
  ...
  "source": {
    "type": "autocomplete",
    "access": "public",
    "value": "",
    "options": {
      "action": "actionName",
      "validation": true,
      "label": "Search items",
      "single": true
    }
  },
  ...
}
Inside your PHP controller create a method that will render all posts list as an autocomplete field:
...
public function __construct()
{
    ...
    $this->addFilter('vcv:autocomplete:actionName:render', 'methodName');
    ...
}
...
protected function methodName($response, $payload)
{
    global $wpdb;
    $searchValue = $payload['searchValue'];
    $sourceId = (int)$searchValue;
    $postMetaInfos = $wpdb->get_results(
        $wpdb->prepare(
            "SELECT ID AS id, post_title AS title
                FROM {$wpdb->posts} 
                WHERE post_status = 'publish' AND ( ID = '%d' OR post_title LIKE '%%%s%%' )",
            $sourceId > 0 ? $sourceId : -1,
            stripslashes($searchValue)
        ),
        ARRAY_A
    );
    $response['results'] = [];
    if (is_array($postMetaInfos) && !empty($postMetaInfos)) {
        foreach ($postMetaInfos as $value) {
            $data = [];
            $data['value'] = $value['id'];
            $data['label'] = __('Id', 'visualcomposer') . ': ' . $value['id'] . ((strlen($value['title']) > 0)
                    ? ' - ' . __('Title', 'visualcomposer') . ': ' . $value['title'] : '');
            $response['results'][] = $data;
        }
    }

    return $response;
}
...

buttonGroup

A set of buttons allowing to select one value out of multiple. Buttons may contain an icon or text. To set the desired view of a button just define icon or text property in the value object. List of default Visual Composer icon classes for buttonGroup attribute, class names are self-explanatory:
  • vcv-ui-icon-attribute-vertical-alignment-top
  • vcv-ui-icon-attribute-vertical-alignment-middle
  • vcv-ui-icon-attribute-vertical-alignment-bottom
  • vcv-ui-icon-attribute-alignment-left
  • vcv-ui-icon-attribute-alignment-right
  • vcv-ui-icon-attribute-alignment-center
  • vcv-ui-icon-attribute-shape-square
  • vcv-ui-icon-attribute-shape-rounded
  • vcv-ui-icon-attribute-shape-round
  • vcv-ui-icon-attribute-row-width-boxed
  • vcv-ui-icon-attribute-row-width-stretched
  • vcv-ui-icon-attribute-row-width-stretched-content
  • vcv-ui-icon-attribute-background-position-left-top
  • vcv-ui-icon-attribute-background-position-center-top
  • vcv-ui-icon-attribute-background-position-right-top
  • vcv-ui-icon-attribute-background-position-left-center
  • vcv-ui-icon-attribute-background-position-center-center
  • vcv-ui-icon-attribute-background-position-right-center
  • vcv-ui-icon-attribute-background-position-left-bottom
  • vcv-ui-icon-attribute-background-position-center-bottom
  • vcv-ui-icon-attribute-background-position-right-bottom
buttonGroup attribute settings.json file example:
{
  ...
  "alignment": {
    "type": "buttonGroup",
    "access": "public",
    "value": "left",
    "options": {
      "label": "Alignment",
      "values": [
        {
          "label": "Left",
          "value": "left",
          "icon": "vcv-ui-icon-attribute-alignment-left"
        },
        {
          "label": "Center",
          "value": "center",
          "icon": "vcv-ui-icon-attribute-alignment-center"
        },
        {
          "label": "Right",
          "value": "right",
          "icon": "vcv-ui-icon-attribute-alignment-right"
        }
      ]
    }
  },
  ...
}
or
{
  ...
  "size": {
    "type": "buttonGroup",
    "access": "public",
    "value": "large",
    "options": {
      "label": "Size",
      "values": [
        {
          "label": "Small",
          "value": "small",
          "text": "S"
        },
        {
          "label": "Medium",
          "value": "medium",
          "text": "M"
        },
        {
          "label": "Large",
          "value": "large",
          "text": "L"
        },
      ]
    }
  },
  ...
}

calendar

An attribute that allows selecting date and time. Attribute returns selected date as a Date object. The default value is an empty string. The attribute sets the field value to the current date, but inside a component.js file a condition needs to be added:
render () {
  ...
  const { datepicker } = this.props.atts
  datepicker = datepicker || new Date()
  ...
}
calendar attribute settings.json file example:
{
  ...
  "datepicker": {
    "type": "calendar",
    "access": "public",
    "value": "",
    "options": {
      "label": "Date",
      "time": true,
      "timeIntervals": 15
    }
  },
  ...
}

checkbox

A simple checkbox. checkbox attribute settings.json file example:
{
  ...
  "devices": {
    "type": "checkbox",
    "access": "public",
    "value": [],
    "options": {
      "label": "Devices",
      "values": [ 
        {
          "label": "Desktop",
          "value": "xl"
        },
        {
          "label": "Mobile",
          "value": "xs"
        }
      ]
    }
  },
  ...
}

color

Colorpicker for value. Usually, cssMixin property must be listed inside options. color attribute settings.json file example:
{
  ...
  "backgroundColor": {
    "type": "color",
    "access": "public",
    "value": "#b3a694",
    "options": {
      "label": "Background color",
      "cssMixin": {
        "mixin": "backgroundColor",
        "property": "backgroundColor",
        "namePattern": "[\\da-f]+"
      }
    }
  },
  ...
}

customId

String field used to add a custom id to the element wrapper. customId attribute settings.json file example:
{
  ...
  "metaCustomId": {
    "type": "customId",
    "access": "public",
    "value": "",
    "options": {
      "label": "Element ID",
      "description": "Apply unique ID to element to link directly to it by using #your_id (for element ID use lowercase input only)."
    }
  },
  ...
}

designOptions

Design options to set up margins, paddings, background color etc. designOptions attribute settings.json file example:
{
  ...
  "designOptions": {
    "type": "designOptions",
    "access": "public",
    "value": {},
    "options": {
      "label": "Design Options"
    }
  },
  ...
}
List of values in a select tag dropdown attribute settings.json file example:
{
  ...
  "videoSource": {
    "type": "dropdown",
    "access": "public",
    "value": "youtube",
    "options": {
      "label": "Video source",
      "values": [
        {
          "label": "Youtube",
          "value": "youtube"
        },
        {
          "label": "Vimeo",
          "value": "vimeo"
        }
      ]
    }
  },
  ...
}

element

Allows inserting another element. The inserted element will be displayed as a separate section in Edit Form, thus the attribute must be listed in the metaEditFormTabs attribute. element attribute settings.json file example:
{
  ...
  "button": {
    "type": "element",
    "access": "public",
    "value": {
      "tag": "basicButton"
    },
    "options": {
      "category": "Button",
      "tabLabel": "Button"
    }
  },
  "metaEditFormTabs": {
    "type": "group",
    "access": "protected",
    "value": [
      "editFormTab1",
      "button",
      "designOptions"
    ]
  },
  ...
}

googleFonts

List of available google fonts with weight. googleFonts attribute settings.json file example:
{
  ...
  "font": {
    "type": "googleFonts",
    "access": "public",
    "value": {
      "fontFamily": "Lato",
      "fontStyle": {
        "weight": "400",
        "style": "regular"
      },
      "status": "active",
      "fontText": "The sky was cloudless and of a deep dark blue."
    },
    "options": {
      "label": "Font"
    }
  },
  ...
}

group

List of data values. Used to group edit form attributes in the Edit Form. group attribute settings.json file example:
{
  ...
  "editFormTab1": {
    "type": "group",
    "access": "protected",
    "value": [
      "alignment",
      "color",
      "metaCustomId",
      "customClass"
    ],
    "options": {
      "label": "General"
    }
  },
  ...
}

htmleditor

Wordpress Classic TinyMCE editor. htmleditor attribute settings.json file example:
{
  ...
  "output": {
    "type": "htmleditor",
    "access": "public",
    "value": "<h2>Hello there!</h2>\n<p>This is just some text.</p>",
    "options": {
      "label": "Content"
    }
  },
  ...
}

iconpicker

Icon picker allows selecting an icon from predefined libraries. iconpicker attribute settings.json file example:
{
  ...
  "iconPicker": {
    "type": "iconpicker",
    "access": "public",
    "value": {
      "icon": "vcv-ui-icon-material vcv-ui-icon-material-mode_edit",
      "iconSet": "material"
    },
    "options": {
      "label": "Icon"
    }
  },
  ...
}

inputIcon

An input with an icon on the side. Input type can be changed to number or string. inputIcon attribute settings.json file example:
{
  ...
  "desktopWidth": {
    "type": "inputIcon",
    "access": "public",
    "value": "600",
    "options": {
      "min": "1",
      "label": "Width on a desktop",
      "iconClasses": "vcv-ui-icon vcv-ui-icon-desktop",
      "inputType": "number"
    }
  },
  "mobileWidth": {
    "type": "inputIcon",
    "access": "public",
    "value": "200",
    "options": {
      "min": "1",
      "label": "Width on a mobile",
      "iconClasses": "vcv-ui-icon vcv-ui-icon-mobile-portrait",
      "inputType": "number"
    }
  },
  ...
}

inputSelect

Selector with a search to browse multi-data. Currently, only currency data is available. inputSelect attribute settings.json file example:
{
  ...
  "price": {
    "type": "inputSelect",
    "access": "public",
    "value": {
      "input": "19,95",
      "select": "$_"
    },
    "options": {
      "type": "currency",
      "label": "Price",
      "values": []
    }
  },
  ...
}

number

Input field with number type. Can take min and max properties in options. number attribute settings.json file example:
{
  ...
  "width": {
    "type": "number",
    "access": "public",
    "value": "150",
    "options": {
      "label": "Width",
      "min": 1,
      "max": 300
    }
  },
  ...
}

paramsGroup

This attribute allows to contain and operate a certain set of attributes within a separate group. A group can be added, edited, removed, cloned and moved (relative to each other, up and down.) Initial groups are set within a settings.json file. Inside elements Edit Form paramsGroup attribute is displayed similar to Tree View, once clicked on edit, Edit Form will re-render with attributes bound to this group. The options values within each group will affect the corresponding child element of the initial parent element (e.g. Bar in Progress Bars element.) The below code examples shows how Progress Bars element is built. paramsGroup attribute settings.json file example:
"bars": {
    "type": "paramsGroup",
    "access": "public",
    "value": {
      "value": [
        {
          "title": "Web Design",
          "value": 80,
          "color": "#50E3C2"
        },
        {
          "title": "Marketing",
          "value": 50,
          "color": "#50E3C2"
        }, 
        {
          "title": "Social Media",
          "value": 60,
          "color": "#50E3C2"
        }
      ]
    },
    "options": {
      "label": "General",
      "title": "Progress bar",
      "groupDefaultTile": "Progress bar",
      "settings": {
        "title": {
          "type": "string",
          "access": "public",
          "value": "Progress bar",
          "options": {
            "label": "Title"
          }
        },
        "value": {
          "type": "range",
          "access": "public",
          "value": "70",
          "options": {
            "label": "Value",
            "cssMixin": {
              "mixin": "barValue",
              "property": "value",
              "namePattern": "[\\da-f]+"
            }
          }
        },
        "color": {
          "type": "color",
          "access": "public",
          "value": "#50E3C2",
          "options": {
            "label": "Bar color",
            "cssMixin": {
              "mixin": "barColor",
              "property": "color",
              "namePattern": "[\\da-f]+"
            }
          }
        },
        "_paramGroupEditFormTab1": {
          "type": "group",
          "access": "protected",
          "value": [
            "title",
            "value",
            "color"
          ],
          "options": {
            "label": "General"
          }
        },
        "metaEditFormTabs": {
          "type": "group",
          "access": "protected",
          "value": [
            "_paramGroupEditFormTab1"
          ]
        }
      }
    }
  }
paramsGroup attribute component.js file example:
import React from 'react'
import vcCake from 'vc-cake'
import classNames from 'classnames'
import ProgressBar from './progressBar'
const vcvAPI = vcCake.getService('api')

export default class ProgressBars extends vcvAPI.elementComponent {
  /**
   * getMixin method returns a PCSS mixin specific to the child element,
   * it uses VC native method getMixinData to get PCSS mixin.
   */
  getMixin (mixinName, i) {
    const elementMixins = this.getMixinData()
    return elementMixins['bars'][i][mixinName]
  }

  /**
   * getContent method returns an array of child elements,
   * from <ProgressBar /> component.
   * Proper attributes must be passed
   */
  getContent () {
    const { bars } = this.props.atts
    // All the necessary code for elements' child components

    ...

    const items = bars.value ? bars.value : bars
    return items.map((item, i) => {
      let key = `progressBar-${this.props.id}-${i}`
      let attributes = item.progressBar || item
      attributes.atts = {}
      // tag property is a must have, the system will recognize to which element it belongs
      attributes.atts.tag = this.props.atts.tag
      attributes.atts.title = item.title
      attributes.atts.value = item.value
      attributes.itemIndex = i
      attributes.getMixin = this.getMixin.bind(this)
      return <ProgressBar {...attributes} key={key} />
    })
  }

  render () {
    const { id, atts, editor } = this.props

    // All the necessary code to render element component

    ...
  
    return (
      <div {...editor} id={`el-${id}`} className={containerClasses} {...doAll}>
        <div className='vce-progress-bars' {...customProps}>
          {this.getContent()}
        </div>
      </div>
    )
  }
}
paramsGroup attribute childComponent.js file example:
import React from 'react'
import vcCake from 'vc-cake'
import classNames from 'classnames'

const vcvAPI = vcCake.getService('api')

export default class ProgressBar extends vcvAPI.elementComponent {
  render () {
    const { getMixin, itemIndex } = this.props
    const { title, value } = this.props.atts
    let containerClasses = [ 'vce-progress-bar-container' ]
    let mixin = getMixin('barValue', itemIndex)
    if (mixin) {
      containerClasses.push(`vce-progress-bar--value-${mixin.selector}`)
    }

    mixin = getMixin('barColor', itemIndex)
    if (mixin) {
      let colorClass = `vce-progress-bar--${colorType}-${mixin.selector}`
      containerClasses.push(colorClass)
    }

    containerClasses = classNames(containerClasses)

    // All the necessary code to render child element component
    ...

    return <div className={containerClasses}>
      <div className='vce-progress-bar-text'>
        <div className='vce-progress-bar-title'>{title}</div>
        <div className='vce-progress-bar-value' />
      </div>
      <div className='vce-progress-bar-wrapper'>
        <progress className='vce-progress-bar' value={value} max='100'>{value} %</progress>
      </div>
    </div>
  }
}

radio

Input field with radio type. radio attribute settings.json file example:
{
  ...
  "device": {
    "type": "radio",
    "access": "public",
    "value": "xs",
    "options": {
      "label": "Device",
      "values": [
        {
          "label": "Desktop",
          "value": "xl"
        },
        {
          "label": "Mobile",
          "value": "xs"
        }
      ]
    }
  },
  ...
}

range

Slider with a range of values. range attribute settings.json file example:
{
 ...
  "width": {
    "type": "range",
    "access": "public",
    "value": "60",
    "options": {
      "label": "Width",
      "min": 1,
      "max": 100
    }
  },
  ...
}

rawCode

Raw code editor, mode property can be set to html or javascript. rawCode attribute settings.json file example:
{
  ...
  "rawHtml": {
    "type": "rawCode",
    "access": "public",
    "value": "<p><strong>HyperText Markup Language (HTML)</strong> is the standard markup language for creating web pages and web applications.</p>",
    "options": {
      "label": "Raw HTML",
      "mode": "html"
    }
  },
  ...
}

string

Input field with text type. string attribute settings.json file example:
{
  ...
  "title": {
    "type": "string",
    "access": "public",
    "value": "Hello World!",
    "options": {
      "label": "Title"
    }
  },
  ...
}

textarea

A simple Textarea input type. textarea attribute settings.json file example:
{
  ...
  "text": {
    "type": "textarea",
    "access": "public",
    "value": "Lorem ipsum dolor sit amet...",
    "options": {
      "label": "Text"
    }
  },
  ...
}

toggle

Toggle switcher like a checkbox. toggle attribute settings.json file example:
{
  ...
  "toggleTitle": {
    "type": "toggle",
    "access": "public",
    "value": "true",
    "options": {
      "label": "Toggle title"
    }
  },
  ...
}

toggleSmall

A small version of toggle attribute is used to toggle skin color of a tinyMCE editor. toggleSmall attribute settings.json file example:
{
  ...
    "darkTextSkin": {
      "type": "toggleSmall",
      "access": "public",
      "value": true
    },
    "description": {
      "type": "htmleditor",
      "access": "public",
      "value": "Lorem ipsum dolor sit amet...",
      "options": {
        "label": "Description",
        "skinToggle": "darkTextSkin"
      }
    },
  ...
}

treeView

Displays child elements as Tree View in Edit Form. treeView attribute settings.json file example:
{
  ...
  "buttons": {
    "type": "treeView",
    "access": "public",
    "value": {},
    "options": {
      "label": "Buttons"
    }
  },
  ...
}

url

Link field which works via Link editor for Wordpress. url attribute settings.json file example:
{
  ...
  "buttonUrl": {
    "type": "url",
    "access": "public",
    "value": {
      "url": "",
      "title": "",
      "targetBlank": false,
      "relNofollow": false
    },
    "options": {
      "label": "Link selection"
    }
  },
  ...
}

ajaxForm

Requests a form via AJAX call. A form is constructed in the PHP controller file. ajaxForm attribute settings.json file example:
{
  ...
  "widget": {
    "type": "ajaxForm",
    "access": "public",
    "value": {
      "key": "",
      "value": ""
    },
    "options": {
      "label": "",
      "action": "vcv:wpWidgets:form"
    }
  }
  ...
}

animateDropdown

Although animation list is already available for each element in Design Options, this attribute allows adding an additional drop-down with a list of animation classes (e.g. animation for the nested element.) animateDrodown attribute settings.json file example:
{
  ...
  "buttonAnimation": {
    "type": "animateDropdown",
    "access": "public",
    "value": "fadeInLeft",
    "options": {
      "label": "Animate button"
    }
  },
  ...
}

attachimage

Allows adding an image from Media Library. attachimage attribute settings.json file example:
{
  ...
  "image": {
    "type": "attachimage",
    "access": "public",
    "value": "image.jpg",
    "options": {
      "label": "Image",
      "defaultValue": "image.jpg"
    }
  },
  ...
}

attachvideo

Allows adding a video from Media Library. attachvideo attribute settings.json file example:
{
  ...
  "video": {
    "type": "attachvideo",
    "access": "public",
    "value": "",
    "options": {
      "label": "Video"
    }
  },
  ...
}

autocomplete

Allows searching for value through the list. Usually, this attribute is used in shortcode based elements. autocomplete attribute settings.json file example:
{
  ...
  "source": {
    "type": "autocomplete",
    "access": "public",
    "value": "",
    "options": {
      "action": "actionName",
      "validation": true,
      "label": "Search items",
      "single": true
    }
  },
  ...
}
Inside your PHP controller create a method that will render all posts list as an autocomplete field:
...
public function __construct()
{
    ...
    $this->addFilter('vcv:autocomplete:actionName:render', 'methodName');
    ...
}
...
protected function methodName($response, $payload)
{
    global $wpdb;
    $searchValue = $payload['searchValue'];
    $sourceId = (int)$searchValue;
    $postMetaInfos = $wpdb->get_results(
        $wpdb->prepare(
            "SELECT ID AS id, post_title AS title
                FROM {$wpdb->posts} 
                WHERE post_status = 'publish' AND ( ID = '%d' OR post_title LIKE '%%%s%%' )",
            $sourceId > 0 ? $sourceId : -1,
            stripslashes($searchValue)
        ),
        ARRAY_A
    );
    $response['results'] = [];
    if (is_array($postMetaInfos) && !empty($postMetaInfos)) {
        foreach ($postMetaInfos as $value) {
            $data = [];
            $data['value'] = $value['id'];
            $data['label'] = __('Id', 'visualcomposer') . ': ' . $value['id'] . ((strlen($value['title']) > 0)
                    ? ' - ' . __('Title', 'visualcomposer') . ': ' . $value['title'] : '');
            $response['results'][] = $data;
        }
    }

    return $response;
}
...

buttonGroup

A set of buttons allowing to select one value out of multiple. Buttons may contain an icon or text. To set the desired view of a button just define icon or text property in the value object. List of default Visual Composer icon classes for buttonGroup attribute, class names are self-explanatory:
  • vcv-ui-icon-attribute-vertical-alignment-top
  • vcv-ui-icon-attribute-vertical-alignment-middle
  • vcv-ui-icon-attribute-vertical-alignment-bottom
  • vcv-ui-icon-attribute-alignment-left
  • vcv-ui-icon-attribute-alignment-right
  • vcv-ui-icon-attribute-alignment-center
  • vcv-ui-icon-attribute-shape-square
  • vcv-ui-icon-attribute-shape-rounded
  • vcv-ui-icon-attribute-shape-round
  • vcv-ui-icon-attribute-row-width-boxed
  • vcv-ui-icon-attribute-row-width-stretched
  • vcv-ui-icon-attribute-row-width-stretched-content
  • vcv-ui-icon-attribute-background-position-left-top
  • vcv-ui-icon-attribute-background-position-center-top
  • vcv-ui-icon-attribute-background-position-right-top
  • vcv-ui-icon-attribute-background-position-left-center
  • vcv-ui-icon-attribute-background-position-center-center
  • vcv-ui-icon-attribute-background-position-right-center
  • vcv-ui-icon-attribute-background-position-left-bottom
  • vcv-ui-icon-attribute-background-position-center-bottom
  • vcv-ui-icon-attribute-background-position-right-bottom
buttonGroup attribute settings.json file example:
{
  ...
  "alignment": {
    "type": "buttonGroup",
    "access": "public",
    "value": "left",
    "options": {
      "label": "Alignment",
      "values": [
        {
          "label": "Left",
          "value": "left",
          "icon": "vcv-ui-icon-attribute-alignment-left"
        },
        {
          "label": "Center",
          "value": "center",
          "icon": "vcv-ui-icon-attribute-alignment-center"
        },
        {
          "label": "Right",
          "value": "right",
          "icon": "vcv-ui-icon-attribute-alignment-right"
        }
      ]
    }
  },
  ...
}
or
{
  ...
  "size": {
    "type": "buttonGroup",
    "access": "public",
    "value": "large",
    "options": {
      "label": "Size",
      "values": [
        {
          "label": "Small",
          "value": "small",
          "text": "S"
        },
        {
          "label": "Medium",
          "value": "medium",
          "text": "M"
        },
        {
          "label": "Large",
          "value": "large",
          "text": "L"
        },
      ]
    }
  },
  ...
}

calendar

An attribute that allows selecting date and time. Attribute returns selected date as a Date object. The default value is an empty string. The attribute sets the field value to the current date, but inside a component.js file a condition needs to be added:
render () {
  ...
  const { datepicker } = this.props.atts
  datepicker = datepicker || new Date()
  ...
}
calendar attribute settings.json file example:
{
  ...
  "datepicker": {
    "type": "calendar",
    "access": "public",
    "value": "",
    "options": {
      "label": "Date",
      "time": true,
      "timeIntervals": 15
    }
  },
  ...
}

checkbox

A simple checkbox. checkbox attribute settings.json file example:
{
  ...
  "devices": {
    "type": "checkbox",
    "access": "public",
    "value": [],
    "options": {
      "label": "Devices",
      "values": [ 
        {
          "label": "Desktop",
          "value": "xl"
        },
        {
          "label": "Mobile",
          "value": "xs"
        }
      ]
    }
  },
  ...
}

color

Colorpicker for value. Usually, cssMixin property must be listed inside options. color attribute settings.json file example:
{
  ...
  "backgroundColor": {
    "type": "color",
    "access": "public",
    "value": "#b3a694",
    "options": {
      "label": "Background color",
      "cssMixin": {
        "mixin": "backgroundColor",
        "property": "backgroundColor",
        "namePattern": "[\\da-f]+"
      }
    }
  },
  ...
}

customId

String field used to add a custom id to the element wrapper. customId attribute settings.json file example:
{
  ...
  "metaCustomId": {
    "type": "customId",
    "access": "public",
    "value": "",
    "options": {
      "label": "Element ID",
      "description": "Apply unique ID to element to link directly to it by using #your_id (for element ID use lowercase input only)."
    }
  },
  ...
}

designOptions

Design options to set up margins, paddings, background color etc. designOptions attribute settings.json file example:
{
  ...
  "designOptions": {
    "type": "designOptions",
    "access": "public",
    "value": {},
    "options": {
      "label": "Design Options"
    }
  },
  ...
}
List of values in a select tag dropdown attribute settings.json file example:
{
  ...
  "videoSource": {
    "type": "dropdown",
    "access": "public",
    "value": "youtube",
    "options": {
      "label": "Video source",
      "values": [
        {
          "label": "Youtube",
          "value": "youtube"
        },
        {
          "label": "Vimeo",
          "value": "vimeo"
        }
      ]
    }
  },
  ...
}

element

Allows inserting another element. The inserted element will be displayed as a separate section in Edit Form, thus the attribute must be listed in the metaEditFormTabs attribute. element attribute settings.json file example:
{
  ...
  "button": {
    "type": "element",
    "access": "public",
    "value": {
      "tag": "basicButton"
    },
    "options": {
      "category": "Button",
      "tabLabel": "Button"
    }
  },
  "metaEditFormTabs": {
    "type": "group",
    "access": "protected",
    "value": [
      "editFormTab1",
      "button",
      "designOptions"
    ]
  },
  ...
}

googleFonts

List of available google fonts with weight. googleFonts attribute settings.json file example:
{
  ...
  "font": {
    "type": "googleFonts",
    "access": "public",
    "value": {
      "fontFamily": "Lato",
      "fontStyle": {
        "weight": "400",
        "style": "regular"
      },
      "status": "active",
      "fontText": "The sky was cloudless and of a deep dark blue."
    },
    "options": {
      "label": "Font"
    }
  },
  ...
}

group

List of data values. Used to group edit form attributes in the Edit Form. group attribute settings.json file example:
{
  ...
  "editFormTab1": {
    "type": "group",
    "access": "protected",
    "value": [
      "alignment",
      "color",
      "metaCustomId",
      "customClass"
    ],
    "options": {
      "label": "General"
    }
  },
  ...
}

htmleditor

Wordpress Classic TinyMCE editor. htmleditor attribute settings.json file example:
{
  ...
  "output": {
    "type": "htmleditor",
    "access": "public",
    "value": "<h2>Hello there!</h2>\n<p>This is just some text.</p>",
    "options": {
      "label": "Content"
    }
  },
  ...
}

iconpicker

Icon picker allows selecting an icon from predefined libraries. iconpicker attribute settings.json file example:
{
  ...
  "iconPicker": {
    "type": "iconpicker",
    "access": "public",
    "value": {
      "icon": "vcv-ui-icon-material vcv-ui-icon-material-mode_edit",
      "iconSet": "material"
    },
    "options": {
      "label": "Icon"
    }
  },
  ...
}

inputIcon

An input with an icon on the side. Input type can be changed to number or string. inputIcon attribute settings.json file example:
{
  ...
  "desktopWidth": {
    "type": "inputIcon",
    "access": "public",
    "value": "600",
    "options": {
      "min": "1",
      "label": "Width on a desktop",
      "iconClasses": "vcv-ui-icon vcv-ui-icon-desktop",
      "inputType": "number"
    }
  },
  "mobileWidth": {
    "type": "inputIcon",
    "access": "public",
    "value": "200",
    "options": {
      "min": "1",
      "label": "Width on a mobile",
      "iconClasses": "vcv-ui-icon vcv-ui-icon-mobile-portrait",
      "inputType": "number"
    }
  },
  ...
}

inputSelect

Selector with a search to browse multi-data. Currently, only currency data is available. inputSelect attribute settings.json file example:
{
  ...
  "price": {
    "type": "inputSelect",
    "access": "public",
    "value": {
      "input": "19,95",
      "select": "$_"
    },
    "options": {
      "type": "currency",
      "label": "Price",
      "values": []
    }
  },
  ...
}

number

Input field with number type. Can take min and max properties in options. number attribute settings.json file example:
{
  ...
  "width": {
    "type": "number",
    "access": "public",
    "value": "150",
    "options": {
      "label": "Width",
      "min": 1,
      "max": 300
    }
  },
  ...
}

paramsGroup

This attribute allows to contain and operate a certain set of attributes within a separate group. A group can be added, edited, removed, cloned and moved (relative to each other, up and down.) Initial groups are set within a settings.json file. Inside elements Edit Form paramsGroup attribute is displayed similar to Tree View, once clicked on edit, Edit Form will re-render with attributes bound to this group. The options values within each group will affect the corresponding child element of the initial parent element (e.g. Bar in Progress Bars element.) The below code examples shows how Progress Bars element is built. paramsGroup attribute settings.json file example:
"bars": {
    "type": "paramsGroup",
    "access": "public",
    "value": {
      "value": [
        {
          "title": "Web Design",
          "value": 80,
          "color": "#50E3C2"
        },
        {
          "title": "Marketing",
          "value": 50,
          "color": "#50E3C2"
        }, 
        {
          "title": "Social Media",
          "value": 60,
          "color": "#50E3C2"
        }
      ]
    },
    "options": {
      "label": "General",
      "title": "Progress bar",
      "groupDefaultTile": "Progress bar",
      "settings": {
        "title": {
          "type": "string",
          "access": "public",
          "value": "Progress bar",
          "options": {
            "label": "Title"
          }
        },
        "value": {
          "type": "range",
          "access": "public",
          "value": "70",
          "options": {
            "label": "Value",
            "cssMixin": {
              "mixin": "barValue",
              "property": "value",
              "namePattern": "[\\da-f]+"
            }
          }
        },
        "color": {
          "type": "color",
          "access": "public",
          "value": "#50E3C2",
          "options": {
            "label": "Bar color",
            "cssMixin": {
              "mixin": "barColor",
              "property": "color",
              "namePattern": "[\\da-f]+"
            }
          }
        },
        "_paramGroupEditFormTab1": {
          "type": "group",
          "access": "protected",
          "value": [
            "title",
            "value",
            "color"
          ],
          "options": {
            "label": "General"
          }
        },
        "metaEditFormTabs": {
          "type": "group",
          "access": "protected",
          "value": [
            "_paramGroupEditFormTab1"
          ]
        }
      }
    }
  }
paramsGroup attribute component.js file example:
import React from 'react'
import vcCake from 'vc-cake'
import classNames from 'classnames'
import ProgressBar from './progressBar'
const vcvAPI = vcCake.getService('api')

export default class ProgressBars extends vcvAPI.elementComponent {
  /**
   * getMixin method returns a PCSS mixin specific to the child element,
   * it uses VC native method getMixinData to get PCSS mixin.
   */
  getMixin (mixinName, i) {
    const elementMixins = this.getMixinData()
    return elementMixins['bars'][i][mixinName]
  }

  /**
   * getContent method returns an array of child elements,
   * from <ProgressBar /> component.
   * Proper attributes must be passed
   */
  getContent () {
    const { bars } = this.props.atts
    // All the necessary code for elements' child components

    ...

    const items = bars.value ? bars.value : bars
    return items.map((item, i) => {
      let key = `progressBar-${this.props.id}-${i}`
      let attributes = item.progressBar || item
      attributes.atts = {}
      // tag property is a must have, the system will recognize to which element it belongs
      attributes.atts.tag = this.props.atts.tag
      attributes.atts.title = item.title
      attributes.atts.value = item.value
      attributes.itemIndex = i
      attributes.getMixin = this.getMixin.bind(this)
      return <ProgressBar {...attributes} key={key} />
    })
  }

  render () {
    const { id, atts, editor } = this.props

    // All the necessary code to render element component

    ...
  
    return (
      <div {...editor} id={`el-${id}`} className={containerClasses} {...doAll}>
        <div className='vce-progress-bars' {...customProps}>
          {this.getContent()}
        </div>
      </div>
    )
  }
}
paramsGroup attribute childComponent.js file example:
import React from 'react'
import vcCake from 'vc-cake'
import classNames from 'classnames'

const vcvAPI = vcCake.getService('api')

export default class ProgressBar extends vcvAPI.elementComponent {
  render () {
    const { getMixin, itemIndex } = this.props
    const { title, value } = this.props.atts
    let containerClasses = [ 'vce-progress-bar-container' ]
    let mixin = getMixin('barValue', itemIndex)
    if (mixin) {
      containerClasses.push(`vce-progress-bar--value-${mixin.selector}`)
    }

    mixin = getMixin('barColor', itemIndex)
    if (mixin) {
      let colorClass = `vce-progress-bar--${colorType}-${mixin.selector}`
      containerClasses.push(colorClass)
    }

    containerClasses = classNames(containerClasses)

    // All the necessary code to render child element component
    ...

    return <div className={containerClasses}>
      <div className='vce-progress-bar-text'>
        <div className='vce-progress-bar-title'>{title}</div>
        <div className='vce-progress-bar-value' />
      </div>
      <div className='vce-progress-bar-wrapper'>
        <progress className='vce-progress-bar' value={value} max='100'>{value} %</progress>
      </div>
    </div>
  }
}

radio

Input field with radio type. radio attribute settings.json file example:
{
  ...
  "device": {
    "type": "radio",
    "access": "public",
    "value": "xs",
    "options": {
      "label": "Device",
      "values": [
        {
          "label": "Desktop",
          "value": "xl"
        },
        {
          "label": "Mobile",
          "value": "xs"
        }
      ]
    }
  },
  ...
}

range

Slider with a range of values. range attribute settings.json file example:
{
 ...
  "width": {
    "type": "range",
    "access": "public",
    "value": "60",
    "options": {
      "label": "Width",
      "min": 1,
      "max": 100
    }
  },
  ...
}

rawCode

Raw code editor, mode property can be set to html or javascript. rawCode attribute settings.json file example:
{
  ...
  "rawHtml": {
    "type": "rawCode",
    "access": "public",
    "value": "<p><strong>HyperText Markup Language (HTML)</strong> is the standard markup language for creating web pages and web applications.</p>",
    "options": {
      "label": "Raw HTML",
      "mode": "html"
    }
  },
  ...
}

string

Input field with text type. string attribute settings.json file example:
{
  ...
  "title": {
    "type": "string",
    "access": "public",
    "value": "Hello World!",
    "options": {
      "label": "Title"
    }
  },
  ...
}

textarea

A simple Textarea input type. textarea attribute settings.json file example:
{
  ...
  "text": {
    "type": "textarea",
    "access": "public",
    "value": "Lorem ipsum dolor sit amet...",
    "options": {
      "label": "Text"
    }
  },
  ...
}

toggle

Toggle switcher like a checkbox. toggle attribute settings.json file example:
{
  ...
  "toggleTitle": {
    "type": "toggle",
    "access": "public",
    "value": "true",
    "options": {
      "label": "Toggle title"
    }
  },
  ...
}

toggleSmall

A small version of toggle attribute is used to toggle skin color of a tinyMCE editor. toggleSmall attribute settings.json file example:
{
  ...
    "darkTextSkin": {
      "type": "toggleSmall",
      "access": "public",
      "value": true
    },
    "description": {
      "type": "htmleditor",
      "access": "public",
      "value": "Lorem ipsum dolor sit amet...",
      "options": {
        "label": "Description",
        "skinToggle": "darkTextSkin"
      }
    },
  ...
}

treeView

Displays child elements as Tree View in Edit Form. treeView attribute settings.json file example:
{
  ...
  "buttons": {
    "type": "treeView",
    "access": "public",
    "value": {},
    "options": {
      "label": "Buttons"
    }
  },
  ...
}

url

Link field which works via Link editor for Wordpress. url attribute settings.json file example:
{
  ...
  "buttonUrl": {
    "type": "url",
    "access": "public",
    "value": {
      "url": "",
      "title": "",
      "targetBlank": false,
      "relNofollow": false
    },
    "options": {
      "label": "Link selection"
    }
  },
  ...
}