Customizing Element List

Learn how to customize the list of available elements and categories.

Available Elements

You can change the list of available elements and their order via the elements property in builder.config.js:

js
// builder.config.js

import { defineConfig } from '@vueform/builder'

export default defineConfig({
  elements: [
    'text',
    'number',
    'email',
    'phone',
    'password',
    'url',
    'location',
    'textarea',
    'editor',
    'signature',
    'checkbox',
    'checkboxgroup',
    'checkboxBlocks',
    'checkboxTabs',
    'radio',
    'radiogroup',
    'radioBlocks',
    'radioTabs',
    'matrix',
    'table',
    'toggle',
    'select',
    'multiselect',
    'tags',
    'date',
    'datetime',
    'time',
    'dates',
    'dateRange',
    'slider',
    'rangeSlider',
    'verticalSlider',
    'file',
    'multifile',
    'image',
    'multiImage',
    'gallery',
    'captcha',
    'hidden',
    'submit',
    'reset',
    'primaryButton',
    'secondaryButton',
    'dangerButton',
    'h1',
    'h2',
    'h3',
    'h4',
    'p',
    'quote',
    'img',
    'link',
    'divider',
    'html',
    'tabs',
    'steps',
    'grid',
    'gridTable',
    'container',
    'container2',
    'container3',
    'container4',
    'list',
    'nestedList',
  ]
})

Excluding Elements

If you want to exclude certain elements, you can use the excludeElements property:

js
// builder.config.js

import { defineConfig } from '@vueform/builder'

export default defineConfig({
  excludeElements: [
    'captcha',
    'signature',
    // ...
  ]
})

Element Categories

You can customize the element categories in builder.config.js via the categories property:

js
// builder.config.js

import { defineConfig } from '@vueform/builder'

export default defineConfig({
  // Default categories
  categories: [
    {
      label: 'Fields',
      key: 'fields',
    },
    {
      label: 'Static',
      key: 'static',
    },
    {
      label: 'Structure',
      key: 'structure',
    },
  ],
})

The key is used in element definition as category.

If you would like to change the category of elements, you have to go through each of them and re-assign their category prop.

The element types are available via the elementTypes export of @vueform/builder and can be modified via the element.types in builder.config.js:

js
// builder.config.js

import { defineConfig, elementTypes } from '@vueform/builder'

// Log `elementType` to see the available elements
console.log(Object.keys(elementTypes))

export default defineConfig({
  categories: [
    {
      label: 'My category',
      key: 'my_category',
    },
    {
      label: 'My other category',
      key: 'my_other_category',
    },
  ],
  element: {
    types: {
      text: {
        ...elementTypes.text,
        category: 'my_category',
      },
      number: {
        ...elementTypes.number,
        category: 'my_category',
      },
      // ...
      container: {
        ...elementTypes.container,
        category: 'my_other_category',
      },
      // ...and so on
    }
  }
})

Translating Categories

Category labels can also be provided as translation tags that exist in builder locale files:

js
// builder.config.js

import {
  defineConfig,
  elementTypes,
  en_US,
  nl_NL,
} from '@vueform/builder'

en_US.my_category_label = 'My category'
en_US.my_other_category_label = 'My other category'

nl_NL.my_category_label = 'Mijn categorie'
nl_NL.my_other_category_label = 'Mijn andere categorie'

export default defineConfig({
  categories: [
    {
      label: 'my_category_label',
      key: 'my_category',
    },
    {
      label: 'my_other_category_label',
      key: 'my_other_category',
    },
  ],
  builderLocales: {
    en_US,
    nl_NL,
  }
  // ...
})

Removing Categories

If you would like to remove all categories, you can simply pass an empty array:

js
// builder.config.js

import { defineConfig } from '@vueform/builder'

export default defineConfig({
  categories: [],
})

In this case, the category selector will disappear, and all elements will be displayed in a single list regardless of the category defined for them.

If you want to disable the category search, you can set search: false in builder.config.js:

js
// builder.config.js

import { defineConfig } from '@vueform/builder'

export default defineConfig({
  search: false,
})
👋 Hire Vueform team for form customizations and developmentLearn more