Custom Elements

How to create custom elements.

New elements can be registered in builder.config.js under element.types:

js
// builder.config.js

export default {
  element: {
    types: {
      logo: {
        label: 'Logo',
        description: 'Company logo',
        icon: 'https://domain.com/logo-element-icon.svg',
        category: 'static',
        rules: [],
        schema: {
          type: 'static',
          content: '<img src="https://domain.com/logo.svg" />'
        },
        sections: 'static',
        separators: 'static',
        operators: [
          'is empty',
          'is not empty',
          'is equal to',
          'is not equal to',
        ],
      },
      // ...
    }
  }
}

NameTypeDescription
label*stringThe label of the element in the element list.
description*stringThe description of the element in the element list.
iconstringThe url of the element's icon in the element list (if left empty a default icon will be displayed). It's recommended to use SVG to keep the UI high quality on each display.
categorystringUnder which category should the element appear in the element list (if using categories).
rules*arrayThe list of validation rules the element config panel should have if it has validation.
schema*objectThe schema of the element that will be added.
sections*string|objectThis determines what configuration options the element has when selected. It can be a string with the name of an other element which's sections should be reused (eg 'text') or an object containing custom configuration options (more about it later).
separators*string|objectDefines the separators between of configuration options (more about it later).
operatorsstringDefines the list of operators that should be available in the dropdown list when the element is targeted with conditions.

* - mandatory

Reusing Existing Element Types

We can add elements that are based on existing elements but using a different schema. Eg. we have the Select element and we want to make it available with different default configuration.

js
// The existing "Select" element's schema (default config)

export default {
  element: {
    types: {
      // ...
      select: {
        // ...
        schema: {
          type: 'select',
          label: 'Select',
          search: true,
          native: false,
          inputType: 'search',
          autocomplete: 'off',
          items: [
            { value: 0, label: 'Label' },
          ],
        },
      },
    },
  },
}

js
// Our version of "Select" element's schema
// (implementing a "User selector")

export default {
  element: {
    types: {
      /* ... */: {
        // ...
        schema: {
          type: 'select',
          label: 'Users',
          native: false,
          search: true,
          resolveOnLoad: false,
          minChars: 2,
          delay: 300,
          inputType: 'search',
          autocomplete: 'off',
          items: '/api/users',
        },
      },
    },
  },
}

We can add this as a new element type the following way:

js
// builder.config.js

export default {
  element: {
    types: {
      user: { // <- the unique id of the element
        label: 'User selector',
        description: 'Select a user from the database',
        icon: 'https://domain.com/user-element-icon.svg',
        category: 'fields',
        schema: { // <- default configation options
          type: 'select',
          label: 'Users',
          native: false,
          search: true,
          resolveOnLoad: false,
          minChars: 2,
          delay: 300,
          inputType: 'search',
          autocomplete: 'off',
          items: '/api/users',
        },
        sections: 'select', // <- using the configuration options of 'select'
        separators: 'select', // <- using the configuration options of 'select'
      },
    }
  }
}

The new User selector element will be added to end of Fields element list and will inhert select element's config (sections & separators - more about it later).

Custom configuration options

We can customize the configuration options the new element we've just created. Eg. if we don't want the user to edit the select options (items) we could disable it just like for an official element as we've seen in our previous chapter:

js
// builder.config.js

export default {
  element: {
    props: {
      user: {
        data: {
          items: false,
        },
      },
    },
  },
}

Display Order

If we want to change the display order of elements we can use the following unversal list in builder.config.js:

js
// builder.config.js

export default {
  element: {
    types: {
      user: {
        // ...
      }
    }
  },

  elements: [
    'text',
    'number',
    'email',
    'phone',
    'password',
    'url',
    'user', // <-- "User selector" added here so it will be displayed after "URL"
    'location',
    'textarea',
    'editor',
    'checkbox',
    'checkboxgroup',
    'checkboxBlocks',
    'checkboxTabs',
    'radio',
    'radiogroup',
    'radioBlocks',
    'radioTabs',
    'toggle',
    'select',
    'multiselect',
    'tags',
    'date',
    'datetime',
    'time',
    'dates',
    'dateRange',
    'slider',
    'rangeSlider',
    'verticalSlider',
    'file',
    'multifile',
    'image',
    'multiImage',
    'gallery',
    'hidden',
    'submit',
    'reset',
    'primaryButton',
    'secondaryButton',
    'dangerButton',
    'h1',
    'h2',
    'h3',
    'h4',
    'p',
    'quote',
    'img',
    'link',
    'divider',
    'html',
    'container',
    'container2',
    'container3',
    'container4',
    'list',
    'nestedList',
  ]
}

Disabling Element Features

Element features such as editing or removing can be disabled by adding a builder object to the element schema:

js
// builder.config.js

export default {
  element: {
    types: {
      user: {
        // ...
        schema: {
          type: 'select',
          label: 'Users',
          // ...
          builder: {
            remove: false,  // Disables removing the element
            clone: false,   // Disables cloning the element
            move: false,    // Disables moving the element
            edit: false,    // Disabled editing the element
            resize: false,  // Disables resizing the element
          }
        },
      },
    }
  }
}

Containers and lists containing an element with disabled features will also have their features disabled. This is true for each from above except edit.

Available Element Types

Here's the list of available element types that can be used:

KeyConfiguration panel example
buttonSubmit button
checkboxCheckbox
checkboxgroupCheckbox group
dateDate
datesMultiple dates
editorWYSIWYG editor
fileFile upload
hiddenHidden input
locationLocation
multifileMulti-file upload
multiselectMultiselect
containerContainer
radioRadio
radiogroupRadio group
selectSelect
sliderSlider
htmlStatic HTML
tagsTags
textText input
textareaTextarea
toggleToggle

They can be used in the sections and separators property of a new element type, as seen above, eg:

js
// builder.config.js

export default {
  element: {
    types: {
      user: {
        label: 'User selector',
        description: 'Select a user from the database',
        icon: 'https://domain.com/user-element-icon.svg',
        category: 'fields',
        schema: {
          // ...
        },
        sections: 'select', // <- element type
        separators: 'select', // <- element type
      },
      // ...
    }
  }
}

Creating New Elements with Custom Configuration Panel

If we want to add a custom element, first we have to register it for Vueform based on the docs in Vueform's Creating Elements section.

Let's say we created a new element called LogoElement:

vue
<!-- LogoElement.vue -->

<template>
  <ElementLayout>
    <template #element>
      <img
        src="https://vueform.com/images/logo.svg"
        alt="Vueform Logo"
        title="Vueform Logo"
        width="45"
        height="39"
        :class="classes.img"
      />
    </template>

    <!-- Default element slots -->
    <template v-for="(component, slot) in elementSlots" #[slot]><slot :name="slot" :el$="el$"><component :is="component" :el$="el$"/></slot></template>
  </ElementLayout>
</template>

<script>
  import { ref } from 'vue'
  import { element } from '@vueform/vueform'

  export default element({
    name: 'LogoElement',
    props: {
      color: {
        type: String,
        default: 'bw',
        required: false,
      }
    }
  }, {
    setup(props, { element }) {
      const defaultClasses = ref({
        img: '',
        img_bw: 'grayscale',
        $img(classes, { color } => {
          classes.img,
          color === 'bw' ? classes.img_bw : null
        })
      })

      return {
        defaultClasses,
      }
    }
  })
</script>

And we registered in vueform.config.js so it can be used as type: 'logo':

js
// vueform.config.js

import LogoElement from './LogoElement.vue'

export default {
  // ...
  elements: [
    LogoElement,
  ],
}

Now, we can to add it to the builder:

js
// builder.config.js

export default {
  element: {
    types: {
      logo: {
        label: 'Logo',
        description: 'Company logo',
        icon: 'https://domain.com/logo-element-icon.svg',
        category: 'static',
        rules: [],
        schema: {
          type: 'logo', // <- using our new `LogoElement` type
        },
        sections: {
          // ...
        },
        separators: {
          // ...
        },
        operators: [
          // ...
        ],
      }
    }
  }
}

The options are the same as discussed at the top of this section. The only difference is that this time we're going to use an object as the value for sections and separators. This is where we'll define what configuration options the element should have on its settings panel when selected.

Defining Sections

Each official element has similar sections (it's recommended to follow this convention). Let's insert all of them for our logo element to have a look on each of them:

js
export default {
  element: {
    types: {
      logo: {
        label: 'Logo',
        description: 'Company logo',
        icon: 'https://domain.com/logo-element-icon.svg',
        category: 'static',
        rules: [],
        schema: {
          type: 'logo',
        },
        sections: {
          /**
           * General properties like name, label, placeholder, description,
           */
          properties: {
            name: 'properties',
            label: 'Properties',
            fields: {
              // ...
            },
          },

          /**
           * Element specific properties like search options for select or
           * date constraints for date element, etc. Put here everything
           * that is unique to the element (other probably don't have).
           */
          options: {
            name: 'options',
            label: 'Logo options',
            fields: {
              // ...
            },
          },

          /**
           * Everything that is related to the element's data. Eg. default
           * value, available options/items, etc. If the element is static
           * eg. a button you can leave out this part.
           */
          data: {
            name: 'data',
            label: 'Data',
            fields: {
              // ...
            },
          },

          /**
           * Configuration of decorators of the element, eg. prefix/suffix,
           * before/between/after contents.
           */
          decorators: {
            name: 'decorators',
            label: 'Decorators',
            fields: {
              // ...
            },
          },
          
          /**
           * Everything that is related to the look of the element, eg.
           * sizing, columns width, view options, etc.
           */
          layout: {
            name: 'layout',
            label: 'Layout',
            fields: {
              // ...
            },
          },

          /**
           * Configuration options related to validation rules, eg. field
           * name & validation rules. If the element is static
           * eg. a button you can leave out this part.
           */
          validation: {
            name: 'validation',
            label: 'Validation',
            fields: {
              // ...
            },
          },

          /**
           * It should contain everything related to rendering the element
           * conditionally.
           */
          conditions: {
            name: 'conditions',
            label: 'Conditions',
            fields: {
              // ...
            },
          },

          /**
           * If the element has native attributes (like `disbled` or
           * `readonly`) for `<input>` they can be put here.
           */
          attributes: {
            name: 'attributes',
            label: 'Attributes',
            fields: {
              // ...
            },
          },
        },
      },
    },
  },
}

Each section must define a name, label and fields like:

js
properties: {
  name: 'properties',
  label: 'Properties',
  fields: {
    // ...
  }
}

The fields contain configuration fields that are either provided by Vueform Builder or custom created.

Using Fields Provided by Vueform

Our LogoElement is static so we don't need data and validation sections and to keep things simple we'll also exclude attributes section. We're left with following sections:

  • properties
  • options
  • decorators
  • layout
  • conditions

Now we need to fill in the sections with actual configuration fields. Existing fields can be imported from @vueform/builder:

js
import {
  TypeField,
  NameField,
  LabelField,
  InfoField,
  DescriptionField,
  BeforeField,
  BetweenField,
  AfterField,
  SizeField,
  ColumnsField,
  ConditionsField,
} from '@vueform/builder'

export default {
  element: {
    types: {
      logo: {
        label: 'Logo',
        description: 'Company logo',
        icon: 'https://domain.com/logo-element-icon.svg',
        category: 'static',
        schema: {
          type: 'logo',
        },
        sections: {
          properties: {
            name: 'properties',
            label: 'Properties',
            fields: {
              type: { type: TypeField, },
              name: { type: NameField, },
              label: { type: LabelField, },
              tooltip: { type: InfoField, },
              description: { type: DescriptionField, },
            },
          },
          options: {
            name: 'options',
            label: 'Logo options',
            fields: {
              // ... custom fields will come here
            },
          },
          decorators: {
            name: 'decorators',
            label: 'Decorators',
            fields: {
              before: { type: BeforeField, },
              between: { type: BetweenField, },
              after: { type: AfterField, },
            },
          },
          layout: {
            name: 'layout',
            label: 'Layout',
            fields: {
              size: { type: SizeField, },
              columns: { type: ColumnsField, },
            },
          },
          conditions: {
            name: 'conditions',
            label: 'Conditions',
            fields: {
              conditions: { type: ConditionsField, },
            },
          },
        },
        separators: {
          // ...
        },
      },
    },
  },
},

Every field must be used under the section name it's supposed to be. Eg. ConditionsField must be in conditions section, ColumnsField in layout, etc. You can find the full list of fields and their location at the end of this chapter.

Each new element must have at least a TypeField in properties everything else is in fact optional.

Note: custom element fields can later also be disabled in builder.config.js as seen previously:

js
// builder.config.js

export default {
  element: {
    props: {
      logo: {
        properties: {
          label: false,
          info: false,
          description: false,
        },
        decorators: false,
      }
    }
  }
}

We can even disable our custom fields once we add them.

Creating Custom Fields

We can create our own configuration field eg. a color selector for our LogoElement that can choose between "Black & white" and "Color" versions.

To do this let's create a LogoColorField.js somewhere in our project:

js
// LogoColorField.js

import { BaseElementField } from '@vueform/builder'

export default class LogoColorField extends BaseElementField
{
  get schema() {
    return {
      color: {
        type: 'select',
        label: 'Logo color',
        columns: { label: 6 },
        default: 'bw',
        items: {
          'bw': 'Black & white',
          'color': 'Color',
        },
      }
    }
  }
}

This field is going to set the color property of our LogoElement component, so the LogoElement component should have a color property which defines which logo is rendered.

Fields can use Vueform's schema object on an element level to define configuration options.

The config field's default option behaves differently than in a regular schema. It will not load the default value of the config option when the panel is opened. It will be interpreted as a value which should remove the config option from the element's schema. For example if our logo element's color property is bw by default it will be bw without explicitly defining any color. This means that the color option field (the one we define above) should have default: 'bw' option which results in the color option being removed from the element's schema when bw is selected so we don't explicitly define an option unnecessarily.

Next add our custom field to our element definition:

js
import {
  TypeField,
  NameField,
  LabelField,
  InfoField,
  DescriptionField,
  BeforeField,
  BetweenField,
  AfterField,
  SizeField,
  ColumnsField,
  ConditionsField,
} from '@vueform/builder'

import LogoColorField from './path/to/LogoColorField.js'

export default {
  element: {
    types: {
      logo: {
        label: 'Logo',
        description: 'Company logo',
        icon: 'https://domain.com/logo-element-icon.svg',
        category: 'static',
        schema: {
          type: 'logo',
        },
        sections: {
          properties: {
            name: 'properties',
            label: 'Properties',
            fields: {
              type: { type: TypeField, },
              name: { type: NameField, },
              label: { type: LabelField, },
              tooltip: { type: InfoField, },
              description: { type: DescriptionField, },
            },
          },
          options: {
            name: 'options',
            label: 'Logo options',
            fields: {
              color: { type: LogoColorField, }, // <- added here
            },
          },
          decorators: {
            name: 'decorators',
            label: 'Decorators',
            fields: {
              before: { type: BeforeField, },
              between: { type: BetweenField, },
              after: { type: AfterField, },
            },
          },
          layout: {
            name: 'layout',
            label: 'Layout',
            fields: {
              size: { type: SizeField, },
              columns: { type: ColumnsField, },
            },
          },
          conditions: {
            name: 'conditions',
            label: 'Conditions',
            fields: {
              conditions: { type: ConditionsField, },
            },
          },
        },
        separators: {
          // ...
        },
      },
    },
  },
},

Now if we drag the "Logo" element to our form and click on it, we'll see our custom config field showing up between other configuration options:

Logo Options

Adding Separators

Separators can add dividers between configuration options. Eg. this would add a divider between Name & Label and Info & Descrpition:

js
separators: {
  properties: [
    ['type', 'name'],
    ['label', 'tooltip'],
    ['description'],
  ],
},

or

js
// This will result in essentially the same result, except the separator will be
// attached the top of the 3rd section instead of the bottom of the 2nd. This can
// be useful, if the whole 3rd section gets hidden under certain circumstances.

separators: {
  properties: [
    ['type', 'name'],
    ['label', 'tooltip'],
    ['!', 'description'],
  ],
},

Properties Separators

Fields should be groupped in an array that belong together so that dividers can be rendered between groups. This way of defining separators is required because config options can be turned on and off so it should know how to group certain options.

Add a separator between SizeField and ColumnsField and move everything to the element definition. Here's the final result:

js
import {
  TypeField,
  NameField,
  LabelField,
  InfoField,
  DescriptionField,
  BeforeField,
  BetweenField,
  AfterField,
  SizeField,
  ColumnsField,
  ConditionsField,
} from '@vueform/builder'

import LogoColorField from './path/to/LogoColorField.js'

export default {
  element: {
    types: {
      logo: {
        label: 'Logo',
        description: 'Company logo',
        icon: 'https://domain.com/logo-element-icon.svg',
        category: 'static',
        rules: [],
        schema: {
          type: 'logo',
        },
        sections: {
          properties: {
            name: 'properties',
            label: 'Properties',
            fields: {
              type: { type: TypeField, },
              name: { type: NameField, },
              label: { type: LabelField, },
              tooltip: { type: InfoField, },
              description: { type: DescriptionField, },
            },
          },
          options: {
            name: 'options',
            label: 'Logo options',
            fields: {
              color: { type: LogoColorField, },
            },
          },
          decorators: {
            name: 'decorators',
            label: 'Decorators',
            fields: {
              before: { type: BeforeField, },
              between: { type: BetweenField, },
              after: { type: AfterField, },
            },
          },
          layout: {
            name: 'layout',
            label: 'Layout',
            fields: {
              size: { type: SizeField, },
              columns: { type: ColumnsField, },
            },
          },
          conditions: {
            name: 'conditions',
            label: 'Conditions',
            fields: {
              conditions: { type: ConditionsField, },
            },
          },
        },
        separators: {
          properties: [
            ['type', 'name'],
            ['label', 'tooltip'],
            ['description'],
          ],
          layout: [
            ['size'],
            ['columns'],
          ]
        },
      },
    },
  },
},

Defining Condition Operators

We can define the list of operators that should be available when the element is targeted in the condition selector.

js
// ...

export default {
  element: {
    types: {
      logo: {
        label: 'Logo',
        description: 'Company logo',
        icon: 'https://domain.com/logo-element-icon.svg',
        category: 'static',
        rules: [],
        schema: {
          type: 'logo',
        },
        sections: {
          // ...
        },
        separators: {
          // ...
        },
        operators: [
          'is empty',
          'is not empty',
          'is equal to',
          'is not equal to',
        ]
      },
    },
  },
},

The full list of operators available:

  • is empty
  • is not empty
  • is equal to
  • is not equal to
  • > than
  • >= than
  • < than
  • <= than
  • starts with
  • ends with
  • contains

Operators might be provided as objects, eg:

  • { value: 'is equal to', label: 'is any equal to' }
  • { value: 'is not equal to', label: 'is not equal to any' }

Existing Element Configurations

Here's the full list of existing element configurations. You might reuse any of the existing config fields for your custom element.

button

Used by:

  • Submit button
  • Reset button
  • Primary button
  • Secondary button
  • Danger button
js
import {
  TypeField,
  NameField,
  LabelField,
  InfoField,
  DescriptionField,
  ButtonLabelField,
  ButtonTypeField,
  SubmitsField,
  ResetsField,
  HrefField,
  TargetField,
  BeforeField,
  BetweenField,
  AfterField,
  FullField,
  AlignField,
  SizeField,
  ColumnsField,
  ConditionsField,
  DisabledField,
  IdField,
} from '@vueform/builder'

export default {
  sections: {
    properties: {
      name: 'properties',
      label: 'Properties',
      fields: {
        type: { type: TypeField },
        name: { type: NameField },
        label: { type: LabelField },
        tooltip: { type: InfoField },
        description: { type: DescriptionField },
      },
    },
    options: {
      name: 'options',
      label: 'Options',
      fields: {
        buttonLabel: { type: ButtonLabelField },
        buttonType: { type: ButtonTypeField },
        submits: { type: SubmitsField },
        resets: { type: ResetsField },
        href: { type: HrefField },
        target: { type: TargetField },
      },
    },
    decorators: {
      name: 'decorators',
      label: 'Decorators',
      fields: {
        before: { type: BeforeField },
        between: { type: BetweenField },
        after: { type: AfterField },
      },
    },
    layout: {
      name: 'layout',
      label: 'Layout',
      fields: {
        full: { type: FullField },
        align: { type: AlignField },
        size: { type: SizeField },
        columns: { type: ColumnsField },
      },
    },
    conditions: {
      name: 'conditions',
      label: 'Conditions',
      fields: {
        conditions: { type: ConditionsField },
      },
    },
    attributes: {
      name: 'attributes',
      label: 'Attributes',
      fields: {
        disabled: { type: DisabledField },
        id: { type: IdField },
      },
    },
  },
  separators: {
    properties: [
      ['type', 'name'],
      ['label', 'tooltip'],
      ['description'],
    ],
    options: [
      ['buttonLabel'],
      ['buttonType'],
      ['submits', 'resets'],
      ['!', 'href', 'target'],
    ],
    layout: [
      ['full'],
      ['align'],
      ['size'],
      ['columns'],
    ],
    attributes: [
      ['disabled', 'id'],
    ],
  }
}

checkbox

Used by:

  • Checkbox
js
import {
  TypeField,
  NameField,
  LabelField,
  InfoField,
  DescriptionField,
  TextField,
  BoolValueField,
  DefaultField_checkbox,
  SubmitField,
  BeforeField,
  BetweenField,
  AfterField,
  AlignField_checkbox,
  SizeField,
  ColumnsField,
  FieldNameField,
  ValidationField,
  ConditionsField,
  DisabledField,
  IdField,
} from '@vueform/builder'

export default {
  sections: {
    properties: {
      name: 'properties',
      label: 'Properties',
      fields: {
        type: { type: TypeField },
        name: { type: NameField },
        label: { type: LabelField },
        tooltip: { type: InfoField },
        description: { type: DescriptionField },
      },
    },
    options: {
      name: 'options',
      label: 'Options',
      fields: {
        text: { type: TextField },
        boolValue: { type: BoolValueField },
      },
    },
    data: {
      name: 'data',
      label: 'Data',
      fields: {
        default: { type: DefaultField_checkbox },
        submit: { type: SubmitField },
      },
    },
    decorators: {
      name: 'decorators',
      label: 'Decorators',
      fields: {
        before: { type: BeforeField },
        between: { type: BetweenField },
        after: { type: AfterField },
      },
    },
    layout: {
      name: 'layout',
      label: 'Layout',
      fields: {
        align: { type: AlignField_checkbox },
        size: { type: SizeField },
        columns: { type: ColumnsField },
      },
    },
    validation: {
      name: 'validation',
      label: 'Validation',
      fields: {
        fieldName: { type: FieldNameField },
        validation: { type: ValidationField },
      },
    },
    conditions: {
      name: 'conditions',
      label: 'Conditions',
      fields: {
        conditions: { type: ConditionsField },
      },
    },
    attributes: {
      name: 'attributes',
      label: 'Attributes',
      fields: {
        disabled: { type: DisabledField },
        id: { type: IdField },
      },
    },
  },
  separators: {
    properties: [
      ['type', 'name'],
      ['label', 'tooltip'],
      ['description'],
    ],
    options: [
      ['text'],
      ['boolValue'],
    ],
    layout: [
      ['align'],
      ['size'],
      ['columns'],
    ],
    validation: [
      ['fieldName'],
      ['validation'],
    ],
    attributes: [
      ['disabled', 'id'],
    ],
  }
}

checkboxgroup

Used by:

  • Checkbox group
  • Checkbox blocks
  • Checkbox tabs
js
import {
  TypeField,
  NameField,
  LabelField,
  InfoField,
  DescriptionField,
  ItemsField,
  DefaultField_checkboxgroup,
  SubmitField,
  BeforeField,
  BetweenField,
  AfterField,
  ViewField,
  SizeField,
  ColumnsField,
  FieldNameField,
  ValidationField,
  ConditionsField,
  DisabledField,
  IdField,
} from '@vueform/builder'

export default {
  sections: {
    properties: {
      name: 'properties',
      label: 'Properties',
      fields: {
        type: { type: TypeField },
        name: { type: NameField },
        label: { type: LabelField },
        tooltip: { type: InfoField },
        description: { type: DescriptionField },
      },
    },
    data: {
      name: 'data',
      label: 'Data',
      fields: {
        items: { type: ItemsField },
        default: { type: DefaultField_checkboxgroup },
        submit: { type: SubmitField },
      },
    },
    decorators: {
      name: 'decorators',
      label: 'Decorators',
      fields: {
        before: { type: BeforeField },
        between: { type: BetweenField },
        after: { type: AfterField },
      },
    },
    layout: {
      name: 'layout',
      label: 'Layout',
      fields: {
        view: { type: ViewField },
        size: { type: SizeField },
        columns: { type: ColumnsField },
      },
    },
    validation: {
      name: 'validation',
      label: 'Validation',
      fields: {
        fieldName: { type: FieldNameField },
        validation: { type: ValidationField },
      },
    },
    conditions: {
      name: 'conditions',
      label: 'Conditions',
      fields: {
        conditions: { type: ConditionsField },
      },
    },
    attributes: {
      name: 'attributes',
      label: 'Attributes',
      fields: {
        disabled: { type: DisabledField },
        id: { type: IdField },
      },
    },
  },
  separators: {
    properties: [
      ['type', 'name'],
      ['label', 'tooltip'],
      ['description'],
    ],
    data: [
      ['items'],
      ['default', 'submit'],
    ],
    layout: [
      ['view'],
      ['size'],
      ['columns'],
    ],
    validation: [
      ['fieldName'],
      ['validation'],
    ],
    attributes: [
      ['disabled', 'id'],
    ],
  }
}

date

Used by:

  • Date
js
import {
  TypeField,
  NameField,
  LabelField,
  InfoField,
  PlaceholderField,
  DescriptionField,
  DateFormatField,
  DateRestrictionsField,
  DefaultField_date,
  SubmitField,
  AddonsField,
  BeforeField,
  BetweenField,
  AfterField,
  SizeField,
  ColumnsField,
  FieldNameField,
  ValidationField,
  ConditionsField,
  DisabledField,
  ReadonlyField,
  IdField,
} from '@vueform/builder'

export default {
  sections: {
    properties: {
      name: 'properties',
      label: 'Properties',
      fields: {
        type: { type: TypeField },
        name: { type: NameField },
        label: { type: LabelField },
        tooltip: { type: InfoField },
        placeholder: { type: PlaceholderField },
        description: { type: DescriptionField },
      },
    },
    options: {
      name: 'options',
      label: 'Options',
      fields: {
        format: { type: DateFormatField },
        restrictions: { type: DateRestrictionsField },
      },
    },
    data: {
      name: 'data',
      label: 'Data',
      fields: {
        default: { type: DefaultField_date },
        submit: { type: SubmitField },
      },
    },
    decorators: {
      name: 'decorators',
      label: 'Decorators',
      fields: {
        addons: { type: AddonsField },
        before: { type: BeforeField },
        between: { type: BetweenField },
        after: { type: AfterField },
      },
    },
    layout: {
      name: 'layout',
      label: 'Layout',
      fields: {
        size: { type: SizeField },
        columns: { type: ColumnsField },
      },
    },
    validation: {
      name: 'validation',
      label: 'Validation',
      fields: {
        fieldName: { type: FieldNameField },
        validation: { type: ValidationField },
      },
    },
    conditions: {
      name: 'conditions',
      label: 'Conditions',
      fields: {
        conditions: { type: ConditionsField },
      },
    },
    attributes: {
      name: 'attributes',
      label: 'Attributes',
      fields: {
        disabled: { type: DisabledField },
        readonly: { type: ReadonlyField },
        id: { type: IdField },
      },
    },
  },
  separators: {
    properties: [
      ['name'],
      ['label', 'tooltip'],
      ['placeholder'],
      ['description'],
    ],
    options: [
      ['format'],
      ['restrictions'],
    ],
    data: [
      ['default', 'submit'],
    ],
    decorators: [
      ['addons'],
      ['before', 'between', 'after'],
    ],
    layout: [
      ['size'],
      ['columns'],
    ],
    validation: [
      ['fieldName'],
      ['validation'],
    ],
    attributes: [
      ['disabled', 'readonly', 'id'],
    ],
  }
}

dates

Used by:

  • Multiple dates
  • Date range
js
import {
  TypeField,
  NameField,
  LabelField,
  InfoField,
  PlaceholderField,
  DescriptionField,
  DateModeField,
  DateFormatField,
  DateRestrictionsField,
  DefaultField_dates,
  SubmitField,
  AddonsField,
  BeforeField,
  BetweenField,
  AfterField,
  SizeField,
  ColumnsField,
  FieldNameField,
  ValidationField,
  ConditionsField,
  DisabledField,
  ReadonlyField,
  IdField,
} from '@vueform/builder'

export default {
  sections: {
    properties: {
      name: 'properties',
      label: 'Properties',
      fields: {
        type: { type: TypeField },
        name: { type: NameField },
        label: { type: LabelField },
        tooltip: { type: InfoField },
        placeholder: { type: PlaceholderField },
        description: { type: DescriptionField },
      },
    },
    options: {
      name: 'options',
      label: 'Options',
      fields: {
        mode: { type: DateModeField },
        format: { type: DateFormatField },
        restrictions: { type: DateRestrictionsField },
      },
    },
    data: {
      name: 'data',
      label: 'Data',
      fields: {
        default: { type: DefaultField_dates },
        submit: { type: SubmitField },
      },
    },
    decorators: {
      name: 'decorators',
      label: 'Decorators',
      fields: {
        addons: { type: AddonsField },
        before: { type: BeforeField },
        between: { type: BetweenField },
        after: { type: AfterField },
      },
    },
    layout: {
      name: 'layout',
      label: 'Layout',
      fields: {
        size: { type: SizeField },
        columns: { type: ColumnsField },
      },
    },
    validation: {
      name: 'validation',
      label: 'Validation',
      fields: {
        fieldName: { type: FieldNameField },
        validation: { type: ValidationField },
      },
    },
    conditions: {
      name: 'conditions',
      label: 'Conditions',
      fields: {
        conditions: { type: ConditionsField },
      },
    },
    attributes: {
      name: 'attributes',
      label: 'Attributes',
      fields: {
        disabled: { type: DisabledField },
        readonly: { type: ReadonlyField },
        id: { type: IdField },
      },
    },
  },
  separators: {
    properties: [
      ['name'],
      ['label', 'tooltip'],
      ['placeholder'],
      ['description'],
    ],
    options: [
      ['mode'],
      ['format'],
      ['restrictions'],
    ],
    data: [
      ['default', 'submit'],
    ],
    layout: [
      ['size'],
      ['columns'],
    ],
    validation: [
      ['fieldName'],
      ['validation'],
    ],
    attributes: [
      ['disabled', 'readonly', 'id'],
    ],
  }
}

datetime

Used by:

  • Datetime
js
import {
  Hour24Field,
  SecondsField,
  DateFormatField,
  DateRestrictionsField,
  DefaultField_datetime,
  SubmitField,
} from '@vueform/builder'

export default {
  sections: {
    properties: {
      name: 'properties',
      label: 'Properties',
      fields: {
        type: { type: TypeField },
        name: { type: NameField },
        label: { type: LabelField },
        tooltip: { type: InfoField },
        placeholder: { type: PlaceholderField },
        description: { type: DescriptionField },
      },
    },
    options: {
      name: 'options',
      label: 'Options',
      fields: {
        hour24: { type: Hour24Field },
        seconds: { type: SecondsField },
        format: { type: DateFormatField },
        restrictions: { type: DateRestrictionsField },
      },
    },
    data: {
      name: 'data',
      label: 'Data',
      fields: {
        default: { type: DefaultField_datetime },
        submit: { type: SubmitField },
      },
    },
    decorators: {
      name: 'decorators',
      label: 'Decorators',
      fields: {
        addons: { type: AddonsField },
        before: { type: BeforeField },
        between: { type: BetweenField },
        after: { type: AfterField },
      },
    },
    layout: {
      name: 'layout',
      label: 'Layout',
      fields: {
        size: { type: SizeField },
        columns: { type: ColumnsField },
      },
    },
    validation: {
      name: 'validation',
      label: 'Validation',
      fields: {
        fieldName: { type: FieldNameField },
        validation: { type: ValidationField },
      },
    },
    conditions: {
      name: 'conditions',
      label: 'Conditions',
      fields: {
        conditions: { type: ConditionsField },
      },
    },
    attributes: {
      name: 'attributes',
      label: 'Attributes',
      fields: {
        disabled: { type: DisabledField },
        readonly: { type: ReadonlyField },
        id: { type: IdField },
      },
    },
  },
  separators: {
    properties: [
      ['name'],
      ['label', 'tooltip'],
      ['placeholder'],
      ['description'],
    ],
    options: [
      ['hour24', 'seconds'],
      ['format'],
      ['restrictions'],
    ],
    data: [
      ['default', 'submit'],
    ],
    decorators: [
      ['addons'],
      ['before', 'between', 'after'],
    ],
    layout: [
      ['size'],
      ['columns'],
    ],
    validation: [
      ['fieldName'],
      ['validation'],
    ],
    attributes: [
      ['disabled', 'readonly', 'id'],
    ],
  }
}

editor

Used by:

  • WYSIWYG editor
js
import {
  TypeField,
  NameField,
  LabelField,
  InfoField,
  PlaceholderField,
  DescriptionField,
  EndpointField,
  AcceptField,
  ToolsField,
  DefaultField_editor,
  SubmitField,
  BeforeField,
  BetweenField,
  AfterField,
  SizeField,
  ColumnsField,
  FieldNameField,
  ValidationField,
  ConditionsField,
  DisabledField,
  IdField,
} from '@vueform/builder'

export default {
  sections: {
    properties: {
      name: 'properties',
      label: 'Properties',
      fields: {
        type: { type: TypeField },
        name: { type: NameField },
        label: { type: LabelField },
        tooltip: { type: InfoField },
        placeholder: { type: PlaceholderField },
        description: { type: DescriptionField },
      },
    },
    options: {
      name: 'options',
      label: 'Options',
      fields: {
        endpoint: { type: EndpointField },
        accept: { type: AcceptField },
        tools: { type: ToolsField },
      },
    },
    data: {
      name: 'data',
      label: 'Data',
      fields: {
        default: { type: DefaultField_editor },
        submit: { type: SubmitField },
      },
    },
    decorators: {
      name: 'decorators',
      label: 'Decorators',
      fields: {
        before: { type: BeforeField },
        between: { type: BetweenField },
        after: { type: AfterField },
      },
    },
    layout: {
      name: 'layout',
      label: 'Layout',
      fields: {
        size: { type: SizeField },
        columns: { type: ColumnsField },
      },
    },
    validation: {
      name: 'validation',
      label: 'Validation',
      fields: {
        fieldName: { type: FieldNameField },
        validation: { type: ValidationField },
      },
    },
    conditions: {
      name: 'conditions',
      label: 'Conditions',
      fields: {
        conditions: { type: ConditionsField },
      },
    },
    attributes: {
      name: 'attributes',
      label: 'Attributes',
      fields: {
        disabled: { type: DisabledField },
        id: { type: IdField },
      },
    },
  },
  separators: {
    properties: [
      ['name'],
      ['label', 'tooltip'],
      ['placeholder'],
      ['description'],
    ],
    options: [
      ['endpoint'],
      ['accept'],
      ['!', 'tools'],
    ],
    layout: [
      ['size'],
      ['columns'],
    ],
    validation: [
      ['fieldName'],
      ['validation'],
    ],
    attributes: [
      ['disabled', 'id'],
    ],
  }
}

file

Used by:

  • File upload
  • Image upload
js
import {
  TypeField,
  NameField,
  LabelField,
  InfoField,
  DescriptionField,
  AutoUploadField,
  DragAndDropField,
  SoftRemoveField,
  ClickableField,
  FileUrlsField,
  FileAcceptField,
  FileEndpointsField,
  ParamsField,
  DefaultField,
  SubmitField,
  BeforeField,
  BetweenField,
  AfterField,
  ViewField_file,
  SizeField,
  ColumnsField,
  FieldNameField,
  ValidationField,
  ConditionsField,
  DisabledField,
  IdField,
} from '@vueform/builder'

export default {
  sections: {
    properties: {
      name: 'properties',
      label: 'Properties',
      fields: {
        type: { type: TypeField },
        name: { type: NameField },
        label: { type: LabelField },
        tooltip: { type: InfoField },
        description: { type: DescriptionField },
      },
    },
    options: {
      name: 'options',
      label: 'Options',
      fields: {
        autoUpload: { type: AutoUploadField },
        dragAndDrop: { type: DragAndDropField },
        softRemove: { type: SoftRemoveField },
        clickable: { type: ClickableField },
        urls: { type: FileUrlsField },
        accept: { type: FileAcceptField },
        endpoints: { type: FileEndpointsField },
        params: { type: ParamsField },
      },
    },
    data: {
      name: 'data',
      label: 'Data',
      fields: {
        default: { type: DefaultField },
        submit: { type: SubmitField },
      },
    },
    decorators: {
      name: 'decorators',
      label: 'Decorators',
      fields: {
        before: { type: BeforeField },
        between: { type: BetweenField },
        after: { type: AfterField },
      },
    },
    layout: {
      name: 'layout',
      label: 'Layout',
      fields: {
        view: { type: ViewField_file },
        size: { type: SizeField },
        columns: { type: ColumnsField },
      },
    },
    validation: {
      name: 'validation',
      label: 'Validation',
      fields: {
        fieldName: { type: FieldNameField },
        validation: { type: ValidationField },
      },
    },
    conditions: {
      name: 'conditions',
      label: 'Conditions',
      fields: {
        conditions: { type: ConditionsField },
      },
    },
    attributes: {
      name: 'attributes',
      label: 'Attributes',
      fields: {
        disabled: { type: DisabledField },
        id: { type: IdField },
      },
    },
  },
  separators: {
    properties: [
      ['type', 'name'],
      ['label', 'tooltip'],
      ['description'],
    ],
    options: [
      ['autoUpload', 'dragAndDrop', 'softRemove', 'clickable'],
      ['!', 'urls'],
      ['!', 'accept'],
      ['endpoints'],
      ['!', 'params'],
    ],
    data: [
      ['default', 'submit'],
    ],
    layout: [
      ['view'],
      ['size'],
      ['columns'],
    ],
    validation: [
      ['fieldName'],
      ['validation'],
    ],
    attributes: [
      ['disabled', 'id'],
    ],
  }
}

hidden

Used by:

  • Hidden input
js
import {
  TypeField,
  NameField,
  MetaField,
  DefaultField_multilingual,
  SubmitField,
  ConditionsField,
  IdField,
  AttrsField,
} from '@vueform/builder'

export default {
  sections: {
    properties: {
      name: 'properties',
      label: 'Properties',
      fields: {
        type: { type: TypeField },
        name: { type: NameField },
        meta: { type: MetaField },
      },
    },
    data: {
      name: 'data',
      label: 'Data',
      fields: {
        default: { type: DefaultField_multilingual },
        submit: { type: SubmitField },
      },
    },
    conditions: {
      name: 'conditions',
      label: 'Conditions',
      fields: {
        conditions: { type: ConditionsField },
      },
    },
    attributes: {
      name: 'attributes',
      label: 'Attributes',
      fields: {
        id: { type: IdField },
        attrs: { type: AttrsField },
      },
    },
  },
  separators: {
  }
}

location

Used by:

  • Location
js
import {
  TypeField,
  NameField,
  InputTypeField,
  LabelField,
  InfoField,
  PlaceholderField,
  DescriptionField,
  DefaultField_location,
  SubmitField,
  AddonsField,
  BeforeField,
  BetweenField,
  AfterField,
  SizeField,
  ColumnsField,
  FieldNameField,
  ValidationField,
  ConditionsField,
  DisabledField,
  ReadonlyField,
  IdField,
  AutocompleteField,
  AttrsField,
} from '@vueform/builder'

export default {
  sections: {
    properties: {
      name: 'properties',
      label: 'Properties',
      fields: {
        type: { type: TypeField },
        name: { type: NameField },
        inputType: { type: InputTypeField },
        label: { type: LabelField },
        tooltip: { type: InfoField },
        placeholder: { type: PlaceholderField },
        description: { type: DescriptionField },
      },
    },
    data: {
      name: 'data',
      label: 'Data',
      fields: {
        default: { type: DefaultField_location },
        submit: { type: SubmitField },
      },
    },
    decorators: {
      name: 'decorators',
      label: 'Decorators',
      fields: {
        addons: { type: AddonsField },
        before: { type: BeforeField },
        between: { type: BetweenField },
        after: { type: AfterField },
      },
    },
    layout: {
      name: 'layout',
      label: 'Layout',
      fields: {
        size: { type: SizeField },
        columns: { type: ColumnsField },
      },
    },
    validation: {
      name: 'validation',
      label: 'Validation',
      fields: {
        fieldName: { type: FieldNameField },
        validation: { type: ValidationField },
      },
    },
    conditions: {
      name: 'conditions',
      label: 'Conditions',
      fields: {
        conditions: { type: ConditionsField },
      },
    },
    attributes: {
      name: 'attributes',
      label: 'Attributes',
      fields: {
        disabled: { type: DisabledField },
        readonly: { type: ReadonlyField },
        id: { type: IdField },
        autocomplete: { type: AutocompleteField },
        attrs: { type: AttrsField },
      },
    },
  },
  separators: {
    properties: [
      ['name', 'inputType'],
      ['label', 'tooltip'],
      ['placeholder'],
      ['description'],
    ],
    decorators: [
      ['addons'],
      ['before', 'between', 'after'],
    ],
    layout: [
      ['size'],
      ['columns'],
    ],
    validation: [
      ['fieldName'],
      ['validation'],
    ],
    attributes: [
      ['disabled', 'readonly', 'id', 'autocomplete'],
      ['attrs'],
    ],
  }
}

multifile

Used by:

  • Multi-file upload
  • Multi-image upload
  • Gallery
js
import {
  TypeField,
  NameField,
  LabelField,
  InfoField,
  DescriptionField,
  AutoUploadField,
  DragAndDropField,
  SoftRemoveField,
  ClickableField,
  FileUrlsField,
  ControlsField,
  StoreField,
  FileAcceptField,
  FileEndpointsField,
  ParamsField,
  SubmitField,
  BeforeField,
  BetweenField,
  AfterField,
  ViewField_file,
  SizeField,
  ColumnsField,
  FieldNameField,
  FileRulesField,
  ValidationField,
  ConditionsField,
  DisabledField,
  IdField,
} from '@vueform/builder'

export default {
  sections: {
    properties: {
      name: 'properties',
      label: 'Properties',
      fields: {
        type: { type: TypeField },
        name: { type: NameField },
        label: { type: LabelField },
        tooltip: { type: InfoField },
        description: { type: DescriptionField },
      },
    },
    options: {
      name: 'options',
      label: 'Options',
      fields: {
        autoUpload: { type: AutoUploadField },
        dragAndDrop: { type: DragAndDropField },
        softRemove: { type: SoftRemoveField },
        clickable: { type: ClickableField },
        urls: { type: FileUrlsField },
        controls: { type: ControlsField },
        store: { type: StoreField },
        accept: { type: FileAcceptField },
        endpoints: { type: FileEndpointsField },
        params: { type: ParamsField },
      },
    },
    data: {
      name: 'data',
      label: 'Data',
      fields: {
        submit: { type: SubmitField },
      },
    },
    decorators: {
      name: 'decorators',
      label: 'Decorators',
      fields: {
        before: { type: BeforeField },
        between: { type: BetweenField },
        after: { type: AfterField },
      },
    },
    layout: {
      name: 'layout',
      label: 'Layout',
      fields: {
        view: { type: ViewField_file },
        size: { type: SizeField },
        columns: { type: ColumnsField },
      },
    },
    validation: {
      name: 'validation',
      label: 'Validation',
      fields: {
        fieldName: { type: FieldNameField },
        fileRules: { type: FileRulesField },
        validation: { type: ValidationField },
      },
    },
    conditions: {
      name: 'conditions',
      label: 'Conditions',
      fields: {
        conditions: { type: ConditionsField },
      },
    },
    attributes: {
      name: 'attributes',
      label: 'Attributes',
      fields: {
        disabled: { type: DisabledField },
        id: { type: IdField },
      },
    },
  },
  separators: {
    properties: [
      ['type', 'name'],
      ['label', 'tooltip'],
      ['description'],
    ],
    options: [
      ['autoUpload', 'dragAndDrop', 'softRemove', 'clickable'],
      ['!', 'urls'],
      ['!', 'controls'],
      ['store'],
      ['!', 'accept'],
      ['endpoints'],
      ['!', 'params'],
    ],
    data: [
      ['default', 'submit'],
    ],
    layout: [
      ['view'],
      ['size'],
      ['columns'],
    ],
    validation: [
      ['fieldName'],
      ['fileRules'],
      ['validation'],
    ],
    attributes: [
      ['disabled', 'id'],
    ],
  }
}

multiselect

Used by:

  • Multiselect
js
import {
  TypeField,
  NameField,
  LabelField,
  InfoField,
  PlaceholderField,
  DescriptionField,
  NativeField,
  SearchField,
  CreateField,
  SelectBehaviorField_multiselect,
  SelectUiField,
  MaxOptionsField,
  MultipleLabelField,
  NoOptionsField,
  NoResultsField,
  SelectItemsField,
  DefaultField_multiselect,
  ObjectField,
  SubmitField,
  BeforeField,
  BetweenField,
  AfterField,
  SizeField,
  ColumnsField,
  FieldNameField,
  ValidationField,
  ConditionsField,
  DisabledField,
  IdField,
  AttrsField,
} from '@vueform/builder'

export default {
  sections: {
    properties: {
      name: 'properties',
      label: 'Properties',
      fields: {
        type: { type: TypeField },
        name: { type: NameField },
        label: { type: LabelField },
        tooltip: { type: InfoField },
        placeholder: { type: PlaceholderField },
        description: { type: DescriptionField },
      },
    },
    options: {
      name: 'options',
      label: 'Options',
      fields: {
        native: { type: NativeField },
        search: { type: SearchField },
        create: { type: CreateField },
        behavior: { type: SelectBehaviorField_multiselect },
        ui: { type: SelectUiField },
        max: { type: MaxOptionsField },
        multipleLabel: { type: MultipleLabelField },
        noOptions: { type: NoOptionsField },
        noResults: { type: NoResultsField },
      },
    },
    data: {
      name: 'data',
      label: 'Data',
      fields: {
        items: { type: SelectItemsField },
        default: { type: DefaultField_multiselect },
        object: { type: ObjectField },
        submit: { type: SubmitField },
      },
    },
    decorators: {
      name: 'decorators',
      label: 'Decorators',
      fields: {
        before: { type: BeforeField },
        between: { type: BetweenField },
        after: { type: AfterField },
      },
    },
    layout: {
      name: 'layout',
      label: 'Layout',
      fields: {
        size: { type: SizeField },
        columns: { type: ColumnsField },
      },
    },
    validation: {
      name: 'validation',
      label: 'Validation',
      fields: {
        fieldName: { type: FieldNameField },
        validation: { type: ValidationField },
      },
    },
    conditions: {
      name: 'conditions',
      label: 'Conditions',
      fields: {
        conditions: { type: ConditionsField },
      },
    },
    attributes: {
      name: 'attributes',
      label: 'Attributes',
      fields: {
        disabled: { type: DisabledField },
        id: { type: IdField },
        attrs: { type: AttrsField },
      },
    },
  },
  separators: {
    properties: [
      ['name'],
      ['label', 'tooltip'],
      ['placeholder'],
      ['description'],
    ],
    options: [
      ['native'],
      ['!', 'search'],
      ['!', 'create'],
      ['!', 'behavior'],
      ['ui'],
      ['max'],
      ['multipleLabel', 'noOptions', 'noResults'],
    ],
    data: [
      ['items'],
      ['default', 'object', 'submit'],
    ],
    layout: [
      ['size'],
      ['columns'],
    ],
    validation: [
      ['fieldName'],
      ['validation'],
    ],
    attributes: [
      ['disabled', 'id'],
      ['attrs'],
    ],
  }
}

container

Used by:

  • Container
  • 2 columns
  • 3 columns
  • 4 columns
js
import {
  TypeField,
  NameField,
  LabelField,
  InfoField,
  DescriptionField,
  NestedField,
  BeforeField,
  BetweenField,
  AfterField,
  SizeField,
  ColumnsField,
  ConditionsField,
} from '@vueform/builder'

export default {
  sections: {
    properties: {
      name: 'properties',
      label: 'Properties',
      fields: {
        type: { type: TypeField },
        name: { type: NameField },
        label: { type: LabelField },
        tooltip: { type: InfoField },
        description: { type: DescriptionField },
      },
    },
    data: {
      name: 'data',
      label: 'Data',
      fields: {
        nested: { type: NestedField },
      },
    },
    decorators: {
      name: 'decorators',
      label: 'Decorators',
      fields: {
        before: { type: BeforeField },
        between: { type: BetweenField },
        after: { type: AfterField },
      },
    },
    layout: {
      name: 'layout',
      label: 'Layout',
      fields: {
        size: { type: SizeField },
        columns: { type: ColumnsField },
      },
    },
    conditions: {
      name: 'conditions',
      label: 'Conditions',
      fields: {
        conditions: { type: ConditionsField },
      },
    },
  },
  separators: {
    properties: [
      ['type', 'name'],
      ['label', 'tooltip'],
      ['description'],
    ],
    layout: [
      ['size'],
      ['columns'],
    ],
  }
}

radio

Used by:

  • Radio
js
import {
  TypeField,
  NameField,
  LabelField,
  InfoField,
  DescriptionField,
  TextField,
  RadioField,
  DefaultField_radio,
  SubmitField,
  BeforeField,
  BetweenField,
  AfterField,
  AlignField_checkbox,
  SizeField,
  ColumnsField,
  FieldNameField,
  ValidationField,
  ConditionsField,
  DisabledField,
  IdField,
} from '@vueform/builder'

export default {
  sections: {
    properties: {
      name: 'properties',
      label: 'Properties',
      fields: {
        type: { type: TypeField },
        name: { type: NameField },
        label: { type: LabelField },
        tooltip: { type: InfoField },
        description: { type: DescriptionField },
      },
    },
    options: {
      name: 'options',
      label: 'Options',
      fields: {
        text: { type: TextField },
        radio: { type: RadioField },
      },
    },
    data: {
      name: 'data',
      label: 'Data',
      fields: {
        default: { type: DefaultField_radio },
        submit: { type: SubmitField },
      },
    },
    decorators: {
      name: 'decorators',
      label: 'Decorators',
      fields: {
        before: { type: BeforeField },
        between: { type: BetweenField },
        after: { type: AfterField },
      },
    },
    layout: {
      name: 'layout',
      label: 'Layout',
      fields: {
        align: { type: AlignField_checkbox },
        size: { type: SizeField },
        columns: { type: ColumnsField },
      },
    },
    validation: {
      name: 'validation',
      label: 'Validation',
      fields: {
        fieldName: { type: FieldNameField },
        validation: { type: ValidationField },
      },
    },
    conditions: {
      name: 'conditions',
      label: 'Conditions',
      fields: {
        conditions: { type: ConditionsField },
      },
    },
    attributes: {
      name: 'attributes',
      label: 'Attributes',
      fields: {
        disabled: { type: DisabledField },
        id: { type: IdField },
      },
    },
  },
  separators: {
    properties: [
      ['type', 'name'],
      ['label', 'tooltip'],
      ['description'],
    ],
    options: [
      ['text'],
      ['radio'],
    ],
    layout: [
      ['align'],
      ['size'],
      ['columns'],
    ],
    validation: [
      ['fieldName'],
      ['validation'],
    ],
    attributes: [
      ['disabled', 'id'],
    ],
  }
}

radiogroup

Used by:

  • Radio group
  • Radio blocks
  • Radio tabs
js
import {
  TypeField,
  NameField,
  LabelField,
  InfoField,
  DescriptionField,
  ItemsField,
  DefaultField_radiogroup,
  SubmitField,
  BeforeField,
  BetweenField,
  AfterField,
  ViewField,
  SizeField,
  ColumnsField,
  FieldNameField,
  ValidationField,
  ConditionsField,
  DisabledField,
  IdField,
} from '@vueform/builder'

export default {
  sections: {
    properties: {
      name: 'properties',
      label: 'Properties',
      fields: {
        type: { type: TypeField },
        name: { type: NameField },
        label: { type: LabelField },
        tooltip: { type: InfoField },
        description: { type: DescriptionField },
      },
    },
    data: {
      name: 'data',
      label: 'Data',
      fields: {
        items: { type: ItemsField },
        default: { type: DefaultField_radiogroup },
        submit: { type: SubmitField },
      },
    },
    decorators: {
      name: 'decorators',
      label: 'Decorators',
      fields: {
        before: { type: BeforeField },
        between: { type: BetweenField },
        after: { type: AfterField },
      },
    },
    layout: {
      name: 'layout',
      label: 'Layout',
      fields: {
        view: { type: ViewField },
        size: { type: SizeField },
        columns: { type: ColumnsField },
      },
    },
    validation: {
      name: 'validation',
      label: 'Validation',
      fields: {
        fieldName: { type: FieldNameField },
        validation: { type: ValidationField },
      },
    },
    conditions: {
      name: 'conditions',
      label: 'Conditions',
      fields: {
        conditions: { type: ConditionsField },
      },
    },
    attributes: {
      name: 'attributes',
      label: 'Attributes',
      fields: {
        disabled: { type: DisabledField },
        id: { type: IdField },
      },
    },
  },
  separators: {
    properties: [
      ['type', 'name'],
      ['label', 'tooltip'],
      ['description'],
    ],
    data: [
      ['items'],
      ['default', 'submit'],
    ],
    layout: [
      ['view'],
      ['size'],
      ['columns'],
    ],
    validation: [
      ['fieldName'],
      ['validation'],
    ],
    attributes: [
      ['disabled', 'id'],
    ],
  }
}

select

Used by:

  • Select
js
import {
  TypeField,
  NameField,
  LabelField,
  InfoField,
  PlaceholderField,
  DescriptionField,
  NativeField,
  SearchField,
  CreateField,
  SelectBehaviorField,
  SelectUiField,
  NoOptionsField,
  NoResultsField,
  SelectItemsField,
  DefaultField_select,
  ObjectField,
  SubmitField,
  BeforeField,
  BetweenField,
  AfterField,
  SizeField,
  ColumnsField,
  FieldNameField,
  ValidationField,
  ConditionsField,
  DisabledField,
  IdField,
  AttrsField,
} from '@vueform/builder'

export default {
  sections: {
    properties: {
      name: 'properties',
      label: 'Properties',
      fields: {
        type: { type: TypeField },
        name: { type: NameField },
        label: { type: LabelField },
        tooltip: { type: InfoField },
        placeholder: { type: PlaceholderField },
        description: { type: DescriptionField },
      },
    },
    options: {
      name: 'options',
      label: 'Options',
      fields: {
        native: { type: NativeField },
        search: { type: SearchField },
        create: { type: CreateField },
        behavior: { type: SelectBehaviorField },
        ui: { type: SelectUiField },
        noOptions: { type: NoOptionsField },
        noResults: { type: NoResultsField },
      },
    },
    data: {
      name: 'data',
      label: 'Data',
      fields: {
        items: { type: SelectItemsField },
        default: { type: DefaultField_select },
        object: { type: ObjectField },
        submit: { type: SubmitField },
      },
    },
    decorators: {
      name: 'decorators',
      label: 'Decorators',
      fields: {
        before: { type: BeforeField },
        between: { type: BetweenField },
        after: { type: AfterField },
      },
    },
    layout: {
      name: 'layout',
      label: 'Layout',
      fields: {
        size: { type: SizeField },
        columns: { type: ColumnsField },
      },
    },
    validation: {
      name: 'validation',
      label: 'Validation',
      fields: {
        fieldName: { type: FieldNameField },
        validation: { type: ValidationField },
      },
    },
    conditions: {
      name: 'conditions',
      label: 'Conditions',
      fields: {
        conditions: { type: ConditionsField },
      },
    },
    attributes: {
      name: 'attributes',
      label: 'Attributes',
      fields: {
        disabled: { type: DisabledField },
        id: { type: IdField },
        attrs: { type: AttrsField },
      },
    },
  },
  separators: {
    properties: [
      ['name'],
      ['label', 'tooltip'],
      ['placeholder'],
      ['description'],
    ],
    options: [
      ['native'],
      ['!', 'search'],
      ['!', 'create'],
      ['!', 'behavior'],
      ['ui'],
      ['noOptions', 'noResults'],
    ],
    data: [
      ['items'],
      ['default', 'object', 'submit'],
    ],
    layout: [
      ['size'],
      ['columns'],
    ],
    validation: [
      ['fieldName'],
      ['validation'],
    ],
    attributes: [
      ['disabled', 'id'],
      ['attrs'],
    ],
  }
}

slider

Used by:

  • Slider
  • Range slider
  • Vertical slider
js
import {
  TypeField,
  NameField,
  LabelField,
  InfoField,
  DescriptionField,
  MinField,
  MaxField,
  StepField,
  OrientationField,
  DirectionField,
  TooltipsField,
  TooltipFormatField,
  DefaultField_slider,
  SubmitField,
  BeforeField,
  BetweenField,
  AfterField,
  SizeField,
  ColumnsField,
  FieldNameField,
  ValidationField,
  ConditionsField,
  DisabledField,
  IdField,
} from '@vueform/builder'

export default {
  sections: {
    properties: {
      name: 'properties',
      label: 'Properties',
      fields: {
        type: { type: TypeField },
        name: { type: NameField },
        label: { type: LabelField },
        tooltip: { type: InfoField },
        description: { type: DescriptionField },
      },
    },
    options: {
      name: 'options',
      label: 'Options',
      fields: {
        min: { type: MinField },
        max: { type: MaxField },
        step: { type: StepField },
        orientation: { type: OrientationField },
        direction: { type: DirectionField },
        tooltips: { type: TooltipsField },
        tooltipFormat: { type: TooltipFormatField },
      },
    },
    data: {
      name: 'data',
      label: 'Data',
      fields: {
        default: { type: DefaultField_slider },
        submit: { type: SubmitField },
      },
    },
    decorators: {
      name: 'decorators',
      label: 'Decorators',
      fields: {
        before: { type: BeforeField },
        between: { type: BetweenField },
        after: { type: AfterField },
      },
    },
    layout: {
      name: 'layout',
      label: 'Layout',
      fields: {
        size: { type: SizeField },
        columns: { type: ColumnsField },
      },
    },
    validation: {
      name: 'validation',
      label: 'Validation',
      fields: {
        fieldName: { type: FieldNameField },
        validation: { type: ValidationField },
      },
    },
    conditions: {
      name: 'conditions',
      label: 'Conditions',
      fields: {
        conditions: { type: ConditionsField },
      },
    },
    attributes: {
      name: 'attributes',
      label: 'Attributes',
      fields: {
        disabled: { type: DisabledField },
        id: { type: IdField },
      },
    },
  },
  separators: {
    properties: [
      ['type', 'name'],
      ['label', 'tooltip'],
      ['description'],
    ],
    options: [
      ['min', 'max', 'step'],
      ['orientation', 'direction'],
      ['!', 'tooltips'],
      ['!', 'tooltipFormat'],
    ],
    data: [
      ['default', 'submit'],
    ],
    layout: [
      ['size'],
      ['columns'],
    ],
    validation: [
      ['fieldName'],
      ['validation'],
    ],
    attributes: [
      ['disabled', 'id'],
    ],
  }
}

static

Used by:

  • Static HTML
  • H1 header
  • H2 header
  • H3 header
  • H4 header
  • Paragraph
  • Quote
  • Image
  • Link
  • Divider
js
import {
  TypeField,
  NameField,
  LabelField,
  InfoField,
  DescriptionField,
  TagField,
  ContentField,
  ImgField,
  LinkField,
  AttrsField_static,
  BeforeField,
  BetweenField,
  AfterField,
  AlignField,
  SpaceField,
  SizeField,
  ColumnsField,
  ConditionsField,
} from '@vueform/builder'

export default {
  sections: {
    properties: {
      name: 'properties',
      label: 'Properties',
      fields: {
        type: { type: TypeField },
        name: { type: NameField },
        label: { type: LabelField },
        tooltip: { type: InfoField },
        description: { type: DescriptionField },
      },
    },
    options: {
      name: 'options',
      label: 'Options',
      fields: {
        tag: { type: TagField },
        content: { type: ContentField },
        img: { type: ImgField },
        link: { type: LinkField },
        attrs: { type: AttrsField_static },
      },
    },
    decorators: {
      name: 'decorators',
      label: 'Decorators',
      fields: {
        before: { type: BeforeField },
        between: { type: BetweenField },
        after: { type: AfterField },
      },
    },
    layout: {
      name: 'layout',
      label: 'Layout',
      fields: {
        align: { type: AlignField },
        space: { type: SpaceField },
        size: { type: SizeField },
        columns: { type: ColumnsField },
      },
    },
    conditions: {
      name: 'conditions',
      label: 'Conditions',
      fields: {
        conditions: { type: ConditionsField },
      },
    },
  },
  separators: {
    properties: [
      ['type', 'name'],
      ['label', 'tooltip'],
      ['description'],
    ],
    options: [
      ['tag'],
      ['!', 'content'],
      ['!', 'img'],
      ['!', 'link'],
      ['!', 'attrs'],
    ],
    layout: [
      ['align'],
      ['space'],
      ['size'],
      ['columns'],
    ],
  }
}

tags

Used by:

  • Tags
js
import {
  TypeField,
  NameField,
  LabelField,
  InfoField,
  PlaceholderField,
  DescriptionField,
  SearchField_tags,
  CreateField,
  SelectBehaviorField_tags,
  SelectUiField,
  MaxOptionsField,
  NoOptionsField,
  NoResultsField,
  SelectItemsField,
  DefaultField_tags,
  ObjectField,
  SubmitField,
  BeforeField,
  BetweenField,
  AfterField,
  SizeField,
  ColumnsField,
  FieldNameField,
  ValidationField,
  ConditionsField,
  DisabledField,
  IdField,
  AttrsField,
} from '@vueform/builder'

export default {
  sections: {
    properties: {
      name: 'properties',
      label: 'Properties',
      fields: {
        type: { type: TypeField },
        name: { type: NameField },
        label: { type: LabelField },
        tooltip: { type: InfoField },
        placeholder: { type: PlaceholderField },
        description: { type: DescriptionField },
      },
    },
    options: {
      name: 'options',
      label: 'Options',
      fields: {
        search: { type: SearchField_tags },
        create: { type: CreateField },
        behavior: { type: SelectBehaviorField_tags },
        ui: { type: SelectUiField },
        max: { type: MaxOptionsField },
        noOptions: { type: NoOptionsField },
        noResults: { type: NoResultsField },
      },
    },
    data: {
      name: 'data',
      label: 'Data',
      fields: {
        items: { type: SelectItemsField },
        default: { type: DefaultField_tags },
        object: { type: ObjectField },
        submit: { type: SubmitField },
      },
    },
    decorators: {
      name: 'decorators',
      label: 'Decorators',
      fields: {
        before: { type: BeforeField },
        between: { type: BetweenField },
        after: { type: AfterField },
      },
    },
    layout: {
      name: 'layout',
      label: 'Layout',
      fields: {
        size: { type: SizeField },
        columns: { type: ColumnsField },
      },
    },
    validation: {
      name: 'validation',
      label: 'Validation',
      fields: {
        fieldName: { type: FieldNameField },
        validation: { type: ValidationField },
      },
    },
    conditions: {
      name: 'conditions',
      label: 'Conditions',
      fields: {
        conditions: { type: ConditionsField },
      },
    },
    attributes: {
      name: 'attributes',
      label: 'Attributes',
      fields: {
        disabled: { type: DisabledField },
        id: { type: IdField },
        attrs: { type: AttrsField },
      },
    },
  },
  separators: {
    properties: [
      ['name'],
      ['label', 'tooltip'],
      ['placeholder'],
      ['description'],
    ],
    options: [
      ['search'],
      ['!', 'create'],
      ['!', 'behavior'],
      ['ui'],
      ['max'],
      ['noOptions', 'noResults'],
    ],
    data: [
      ['items'],
      ['default', 'object', 'submit'],
    ],
    layout: [
      ['size'],
      ['columns'],
    ],
    validation: [
      ['fieldName'],
      ['validation'],
    ],
    attributes: [
      ['disabled', 'id'],
      ['attrs'],
    ],
  }
}

text

Used by:

  • Text input
  • Number input
  • Email address
  • Phone number
  • Password
  • URL
js
import {
  TypeField,
  NameField,
  InputTypeField,
  LabelField,
  InfoField,
  PlaceholderField,
  DescriptionField,
  DefaultField_multilingual,
  SubmitField,
  AddonsField,
  BeforeField,
  BetweenField,
  AfterField,
  SizeField,
  ColumnsField,
  FieldNameField,
  ValidationField,
  ConditionsField,
  DisabledField,
  ReadonlyField,
  IdField,
  AutocompleteField,
  AttrsField,
} from '@vueform/builder'

export default {
  sections: {
    properties: {
      name: 'properties',
      label: 'Properties',
      fields: {
        type: { type: TypeField },
        name: { type: NameField },
        inputType: { type: InputTypeField },
        label: { type: LabelField },
        tooltip: { type: InfoField },
        placeholder: { type: PlaceholderField },
        description: { type: DescriptionField },
      },
    },
    data: {
      name: 'data',
      label: 'Data',
      fields: {
        default: { type: DefaultField_multilingual },
        submit: { type: SubmitField },
      },
    },
    decorators: {
      name: 'decorators',
      label: 'Decorators',
      fields: {
        addons: { type: AddonsField },
        before: { type: BeforeField },
        between: { type: BetweenField },
        after: { type: AfterField },
      },
    },
    layout: {
      name: 'layout',
      label: 'Layout',
      fields: {
        size: { type: SizeField },
        columns: { type: ColumnsField },
      },
    },
    validation: {
      name: 'validation',
      label: 'Validation',
      fields: {
        fieldName: { type: FieldNameField },
        validation: { type: ValidationField },
      },
    },
    conditions: {
      name: 'conditions',
      label: 'Conditions',
      fields: {
        conditions: { type: ConditionsField },
      },
    },
    attributes: {
      name: 'attributes',
      label: 'Attributes',
      fields: {
        disabled: { type: DisabledField },
        readonly: { type: ReadonlyField },
        id: { type: IdField },
        autocomplete: { type: AutocompleteField },
        attrs: { type: AttrsField },
      },
    },
  },
  separators: {
    properties: [
      ['name', 'inputType'],
      ['label', 'tooltip'],
      ['placeholder'],
      ['description'],
    ],
    decorators: [
      ['addons'],
      ['before', 'between', 'after'],
    ],
    layout: [
      ['size'],
      ['columns'],
    ],
    validation: [
      ['fieldName'],
      ['validation'],
    ],
    attributes: [
      ['disabled', 'readonly', 'id', 'autocomplete'],
      ['attrs'],
    ],
  }
}

textarea

Used by:

  • Textarea
js
import {
  TypeField,
  NameField,
  LabelField,
  InfoField,
  PlaceholderField,
  DescriptionField,
  AutogrowField,
  RowsField,
  DefaultField_textarea,
  SubmitField,
  AddonsField,
  BeforeField,
  BetweenField,
  AfterField,
  SizeField,
  ColumnsField,
  FieldNameField,
  ValidationField,
  ConditionsField,
  DisabledField,
  ReadonlyField,
  IdField,
  AttrsField,
} from '@vueform/builder'

export default {
  sections: {
    properties: {
      name: 'properties',
      label: 'Properties',
      fields: {
        type: { type: TypeField },
        name: { type: NameField },
        label: { type: LabelField },
        tooltip: { type: InfoField },
        placeholder: { type: PlaceholderField },
        description: { type: DescriptionField },
      },
    },
    options: {
      name: 'options',
      label: 'Options',
      fields: {
        autogrow: { type: AutogrowField },
        rows: { type: RowsField },
      },
    },
    data: {
      name: 'data',
      label: 'Data',
      fields: {
        default: { type: DefaultField_textarea },
        submit: { type: SubmitField },
      },
    },
    decorators: {
      name: 'decorators',
      label: 'Decorators',
      fields: {
        addons: { type: AddonsField },
        before: { type: BeforeField },
        between: { type: BetweenField },
        after: { type: AfterField },
      },
    },
    layout: {
      name: 'layout',
      label: 'Layout',
      fields: {
        size: { type: SizeField },
        columns: { type: ColumnsField },
      },
    },
    validation: {
      name: 'validation',
      label: 'Validation',
      fields: {
        fieldName: { type: FieldNameField },
        validation: { type: ValidationField },
      },
    },
    conditions: {
      name: 'conditions',
      label: 'Conditions',
      fields: {
        conditions: { type: ConditionsField },
      },
    },
    attributes: {
      name: 'attributes',
      label: 'Attributes',
      fields: {
        disabled: { type: DisabledField },
        readonly: { type: ReadonlyField },
        id: { type: IdField },
        attrs: { type: AttrsField },
      },
    },
  },
  separators: {
    properties: [
      ['name'],
      ['label', 'tooltip'],
      ['placeholder'],
      ['description'],
    ],
    decorators: [
      ['addons'],
      ['before', 'between', 'after'],
    ],
    layout: [
      ['size'],
      ['columns'],
    ],
    validation: [
      ['fieldName'],
      ['validation'],
    ],
    attributes: [
      ['disabled', 'readonly', 'id'],
      ['attrs'],
    ],
  }
}

time

Used by:

  • Time
js
import {
  Hour24Field,
  SecondsField,
  DateFormatField,
  DefaultField_time,
  SubmitField,
} from '@vueform/builder'

export default {
  sections: {
    properties: {
      name: 'properties',
      label: 'Properties',
      fields: {
        type: { type: TypeField },
        name: { type: NameField },
        label: { type: LabelField },
        tooltip: { type: InfoField },
        placeholder: { type: PlaceholderField },
        description: { type: DescriptionField },
      },
    },
    options: {
      name: 'options',
      label: 'Options',
      fields: {
        hour24: { type: Hour24Field },
        seconds: { type: SecondsField },
        format: { type: DateFormatField },
      },
    },
    data: {
      name: 'data',
      label: 'Data',
      fields: {
        default: { type: DefaultField_time },
        submit: { type: SubmitField },
      },
    },
    decorators: {
      name: 'decorators',
      label: 'Decorators',
      fields: {
        addons: { type: AddonsField },
        before: { type: BeforeField },
        between: { type: BetweenField },
        after: { type: AfterField },
      },
    },
    layout: {
      name: 'layout',
      label: 'Layout',
      fields: {
        size: { type: SizeField },
        columns: { type: ColumnsField },
      },
    },
    validation: {
      name: 'validation',
      label: 'Validation',
      fields: {
        fieldName: { type: FieldNameField },
        validation: { type: ValidationField },
      },
    },
    conditions: {
      name: 'conditions',
      label: 'Conditions',
      fields: {
        conditions: { type: ConditionsField },
      },
    },
    attributes: {
      name: 'attributes',
      label: 'Attributes',
      fields: {
        disabled: { type: DisabledField },
        readonly: { type: ReadonlyField },
        id: { type: IdField },
      },
    },
  },
  separators: {
    properties: [
      ['name'],
      ['label', 'tooltip'],
      ['placeholder'],
      ['description'],
    ],
    options: [
      ['hour24', 'seconds'],
      ['format'],
    ],
    data: [
      ['default', 'submit'],
    ],
    decorators: [
      ['addons'],
      ['before', 'between', 'after'],
    ],
    layout: [
      ['size'],
      ['columns'],
    ],
    validation: [
      ['fieldName'],
      ['validation'],
    ],
    attributes: [
      ['disabled', 'readonly', 'id'],
    ],
  }
}

toggle

Used by:

  • Toggle
js
import {
  TypeField,
  NameField,
  LabelField,
  InfoField,
  DescriptionField,
  TextField,
  LabelsField,
  BoolValueField,
  DefaultField_toggle,
  SubmitField,
  BeforeField,
  BetweenField,
  AfterField,
  AlignField_toggle,
  SizeField,
  ColumnsField,
  FieldNameField,
  ValidationField,
  ConditionsField,
  DisabledField,
  IdField,
} from '@vueform/builder'

export default {
  sections: {
    properties: {
      name: 'properties',
      label: 'Properties',
      fields: {
        type: { type: TypeField },
        name: { type: NameField },
        label: { type: LabelField },
        tooltip: { type: InfoField },
        description: { type: DescriptionField },
      },
    },
    options: {
      name: 'options',
      label: 'Options',
      fields: {
        text: { type: TextField },
        labels: { type: LabelsField },
        boolValue: { type: BoolValueField },
      },
    },
    data: {
      name: 'data',
      label: 'Data',
      fields: {
        default: { type: DefaultField_toggle },
        submit: { type: SubmitField },
      },
    },
    decorators: {
      name: 'decorators',
      label: 'Decorators',
      fields: {
        before: { type: BeforeField },
        between: { type: BetweenField },
        after: { type: AfterField },
      },
    },
    layout: {
      name: 'layout',
      label: 'Layout',
      fields: {
        align: { type: AlignField_toggle },
        size: { type: SizeField },
        columns: { type: ColumnsField },
      },
    },
    validation: {
      name: 'validation',
      label: 'Validation',
      fields: {
        fieldName: { type: FieldNameField },
        validation: { type: ValidationField },
      },
    },
    conditions: {
      name: 'conditions',
      label: 'Conditions',
      fields: {
        conditions: { type: ConditionsField },
      },
    },
    attributes: {
      name: 'attributes',
      label: 'Attributes',
      fields: {
        disabled: { type: DisabledField },
        id: { type: IdField },
      },
    },
  },
  separators: {
    properties: [
      ['type', 'name'],
      ['label', 'tooltip'],
      ['description'],
    ],
    options: [
      ['text'],
      ['labels'],
      ['boolValue'],
    ],
    layout: [
      ['align'],
      ['size'],
      ['columns'],
    ],
    validation: [
      ['fieldName'],
      ['validation'],
    ],
    attributes: [
      ['disabled', 'id'],
    ],
  }
}
👋 Hire Vueform team for form customizations and developmentLearn more