There are many attributes for the properties that specify how to display and where to store the chosen value.

For each group of UI input options you can have multiple variables with the following structure:

{ name: 'compName', attribute: 'id', title: 'ID', 
  type: 'text', required: true, defaultValue: ''},

General Properties

with general properties like:

For the text fields you can specify extra picker to be displayed next to the fields

Picker Properties

Store and Retrieve Value

There are many options to select what to do with the chosen value or where to get it from.

Using HTML Attribute

Using Class Name or Style

Setting node Position within Parent

Changing Tag name

HTML Inner

Multi Value

Store as JS Object

Script and includes

Working Node Selection

All the above actions are to be applied on the component node itself. However there are some situations that you want to apply the value to a child node or a different root node. Use the following fields to specify

Display Types

General

Special controls

CSS Related controls

Multi Values

You can use also advanced display controls like dropdowns and multiple selectors Usually you specify the values as nested array of objects with title and value.

example:

{
    name: 'elementRounding',
    title: 'Rounding',
    type: 'droplist',
    defaultValue: '',
    className: true,
    values: [
        {title: 'Default', value: ''},
        {title: 'All', value: 'rounded'},
        {title: 'Top', value: 'rounded-top'},
        {title: 'End', value: 'rounded-end'},
        {title: 'Bottom', value: 'rounded-bottom'},
        {title: 'Start', value: 'rounded-start'},
        {title: 'Circle', value: 'rounded-circle'},
        {title: 'None', value: 'rounded-0'}
    ]
}

You can however specify different sources for values. Like specify what css selector to execute in valuesSelector and which attribute from the resulted nodes to get in valuesSelectorAttribute
You can also specify valuePrefix a static string to add before the value

example:

{
	name: 'ToggleTargetCollapse',
	title: 'Collapse',
	type: 'droplist',
	defaultValue: '',
	attribute: 'data-bs-target',
	valuePrefix: '#',
	valuesSelector: '.collapse',
	valuesSelectorAttribute: 'id',
	values: [
		{ title: 'None', value: ''}
	]
}

Range fields

example:

{ 
  name: 'elementBorderWidth', className: true, title: 'Width', type: 'range',
 		defaultValue: '', initValue: '-1',
 		min: 0, max: 5,
 		showLabels: true, showTicks: false,
  values: {
      '0': { value: '', title: 'Default', label: 'D'},
      '1': { value: 'border-1', title: '1px', label: '1px' },
      '2': { value: 'border-2', title: '2px', label: '2px' },
      '3': { value: 'border-3', title: '3px', label: '3px' },
      '4': { value: 'border-4', title: '4px', label: '4px' },
      '5': { value: 'border-5', title: '5px', label: '5px' }
  }
}

Conditional Fields

Sometimes you need to show and hide some fields depending on chosen values of others.
So with the droplist field for example you can easily specify for each choice which fields to show or hide:

{ name: 'oauth_service', attribute: 'service', title: 'Service', 
  type: 'droplist', 
  values: [
    {title: 'Google', value: 'google', show:['oauth_key', 'oauth_url'], hide:[] },
    {title: 'Facebook', value: 'facebook', show:[], hide:['oauth_key', 'oauth_url'] },
    {title: 'Instagram', value: 'instagram', show:[], hide:['oauth_key', 'oauth_url'] },
    {title: 'Default', value: '', show:[], hide:['oauth_key', 'oauth_url']}
  ], defaultValue: '',
	help: 'Choose your OAuth2 Provider.'
},
{ name: 'oauth_key', attribute: 'key', title: 'Api Key', 
  type: 'text', defaultValue: '', initDisplay: 'none'},
{ name: 'oauth_url', attribute: 'url', title: 'URL', 
  type: 'text', defaultValue: '', initDisplay: 'none'},

Here only when Google is chosen, we display the additional two field otherwise they are just hidden - also initially with initDisplay option.

Color modifiers