Config panels
Config panel configuration options
Form settings panel
The following options can be used to disable form settings config options.
js
// builder.config.js
import { defineConfig } from '@vueform/builder'
export default defineConfig({
form: {
props: {
properties: {
name: true,
width: true,
nesting: true,
},
submission: {
endpoint: true,
formKey: true,
},
validation: {
live: true,
},
layout: {
size: {
sm: true,
md: true,
lg: true,
},
columns: {
container: true,
label: true,
wrapper: true,
},
forceLabels: true,
floatPlaceholders: true,
displayErrors: true,
displayMessages: true,
},
},
},
})Theme settings panel
The following options can be used to disable theme config options.
js
// builder.config.js
import { defineConfig } from '@vueform/builder'
export default defineConfig({
'theme': {
'props': {
'theme': {
'theme': true
},
'tools': {
'tools': true
},
'colors': {
'primary': true,
'primary-darker': true,
'color-on-primary': true,
'danger': true,
'danger-lighter': true,
'success': true,
'success-lighter': true,
'gray-50': true,
'gray-100': true,
'gray-200': true,
'gray-300': true,
'gray-400': true,
'gray-500': true,
'gray-600': true,
'gray-700': true,
'gray-800': true,
'gray-900': true,
'dark-50': true,
'dark-100': true,
'dark-200': true,
'dark-300': true,
'dark-400': true,
'dark-500': true,
'dark-600': true,
'dark-700': true,
'dark-800': true,
'dark-900': true
},
'fonts': {
'font-size': true,
'line-height': true,
'letter-spacing': true,
'font-size-small': true,
'line-height-small': true,
'letter-spacing-small': true,
'font-size-h1': true,
'font-size-h1-mobile': true,
'font-size-h2': true,
'font-size-h2-mobile': true,
'font-size-h3': true,
'font-size-h3-mobile': true,
'font-size-h4': true,
'font-size-h4-mobile': true,
'line-height-headings': true,
'letter-spacing-headings': true,
'font-size-blockquote': true,
'line-height-blockquote': true,
'letter-spacing-blockquote': true
},
'spaces': {
'gutter': true,
'link-color': true,
'link-decoration': true,
'color-muted': true,
'color-passive': true,
'bg-passive': true,
'border-color-passive': true,
'bg-selected': true,
'radius-small': true,
'shadow-handles': true,
'shadow-handles-hover': true,
'shadow-handles-focus': true
},
'inputs': {
'min-height-input': true,
'ring-width': true,
'ring-color': true,
'py-input': true,
'px-input': true,
'border-width-input': true,
'radius-input': true,
'radius-large': true,
'border-color-input': true,
'color-input': true,
'bg-icon': true,
'color-floating': true,
'bg-input': true,
'shadow-input': true,
'hover': true,
'color-input-hover': true,
'bg-input-hover': true,
'border-color-input-hover': true,
'shadow-input-hover': true,
'focus': true,
'color-input-focus': true,
'color-floating-focus': true,
'bg-input-focus': true,
'border-color-input-focus': true,
'shadow-input-focus': true,
'danger': true,
'color-input-danger': true,
'color-floating-danger': true,
'bg-input-danger': true,
'border-color-input-danger': true,
'success': true,
'color-input-success': true,
'color-floating-success': true,
'bg-input-success': true,
'border-color-input-success': true,
'disabled': true,
'color-disabled': true,
'bg-disabled': true,
'floating-top': true,
'space-addon': true,
'bg-addon': true,
'color-addon': true
},
'select': {
'dropdown': true,
'border-width-dropdown': true,
'shadow-dropdown': true
},
'tags': {
'py-tag': true,
'px-tag': true,
'space-tags': true,
'border-width-tag': true,
'radius-tag': true,
'color-tag': true,
'bg-tag': true,
'border-color-tag': true
},
'datepicker': {
'color-date-head': true,
'bg-date-head': true
},
'checkboxes': {
'checkbox-size': true,
'space-checkbox': true,
'radio': true,
'border-width-radio': true,
'checkbox': true,
'border-width-checkbox': true,
'radius-checkbox': true,
'tabs': true,
'py-group-tabs': true,
'px-group-tabs': true,
'blocks': true,
'py-group-blocks': true,
'px-group-blocks': true,
'colors': true,
'bg-checkbox': true,
'border-color-checkbox': true,
'hover': true,
'bg-checkbox-hover': true,
'border-color-checkbox-hover': true,
'focus': true,
'bg-checkbox-focus': true,
'border-color-checkbox-focus': true,
'danger': true,
'bg-checkbox-danger': true,
'border-color-checkbox-danger': true,
'success': true,
'bg-checkbox-success': true,
'border-color-checkbox-success': true,
'checked': true,
'border-color-checked': true
},
'slider': {
'slider-height': true,
'slider-height-vertical': true,
'radius-slider': true,
'handle': true,
'slider-handle-size': true,
'bg-slider-handle': true,
'tooltip': true,
'py-slider-tooltip': true,
'px-slider-tooltip': true,
'slider-tooltip-distance': true,
'slider-tooltip-arrow-size': true,
'border-color-slider-tooltip': true
},
'toggle': {
'toggle-width': true,
'toggle-height': true,
'border-width-toggle': true,
'handle': true,
'bg-toggle-handle': true
},
'images': {
'image': true,
'radius-image': true,
'gallery': true,
'gallery-size': true,
'radius-gallery': true
},
'buttons': {
'py-btn': true,
'px-btn': true,
'small-buttons': true,
'py-btn-small': true,
'px-btn-small': true,
'border-color-btn': true,
'border-width-btn': true,
'radius-btn': true,
'color-btn': true,
'bg-btn': true,
'shadow-btn': true,
'secondary': true,
'color-btn-secondary': true,
'bg-btn-secondary': true,
'border-color-btn-secondary': true,
'danger': true,
'color-btn-danger': true,
'bg-btn-danger': true,
'border-color-btn-danger': true
},
'static': {
'spacing': true,
'space-static-tag-1': true,
'space-static-tag-2': true,
'space-static-tag-3': true,
'divider': true,
'py-hr': true,
'border-color-hr': true,
'quote': true,
'py-blockquote': true,
'px-blockquote': true,
'border-width-blockquote': true,
'border-color-blockquote': true
}
},
},
})Export settings panel
The following options can be used to disable export config options.
js
// builder.config.js
import { defineConfig } from '@vueform/builder'
export default defineConfig({
export: {
props: {
export: {
output: true,
api: true,
theme: true,
download: true,
},
},
},
})Element search panel
The following options configure the available elements & element categories.
js
// builder.config.js
import { defineConfig } from '@vueform/builder'
export default defineConfig({
// Element categories (set to `false` to hide)
categories: [
{
label: 'Fields',
key: 'fields',
},
{
label: 'Static',
key: 'static',
},
{
label: 'Structure',
key: 'structure',
},
],
// List of element types to include
elements: [
'text',
'number',
'email',
'phone',
'password',
'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',
'tabs',
'steps',
'container',
'container2',
'container3',
'container4',
'list',
'nestedList',
],
// List of element types to exclude
excludeElements: [],
})Element settings panel
Element settings can be disabled for different elements under element.props. This object has an item for each element type and a special one, called default.
js
// builder.config.js
import { defineConfig } from '@vueform/builder'
export default defineConfig({
element: {
props: {
// Disables placeholder options for each element
default: {
properties: {
placeholder: false,
},
decorators: {
addons: false,
before: false,
between: false,
after: false,
tooltip: false,
description: false,
},
// ...
},
// ...
},
},
})The default contains all the options of all the elements and can be used to disable properties globally, without having to go through each element and eg. disabling conditions for each.
When disabling default options you have to explicitly disable options and you can't disable option groups:
js
// builder.config.js
import { defineConfig } from '@vueform/builder'
export default defineConfig({
element: {
props: {
// THIS WILL NOT WORK
default: {
properties: false
},
// THIS WILL WORK
default: {
properties: {
inputType: false,
label: false,
tooltip: false,
placeholder: false,
description: false,
meta: false,
}
},
},
},
})The named element sections (eg. text, textarea or select, etc.) contain configuration options for only that specific element. These can be used to disable config options for certain elements only and to override default.
js
// builder.config.js
import { defineConfig } from '@vueform/builder'
export default defineConfig({
element: {
props: {
// Disables placeholder options for all elements
default: {
properties: {
placeholder: false,
},
// ...
},
// Enables back placeholder options for `select` only
select: {
properties: {
placeholder: true,
},
// ...
},
// ...
},
},
})The only config you shouldn't disable ever is the properties.type. This is a core field that needs to be included in each element config panels.
We can disable options groups or single options for elements:
js
// builder.config.js
import { defineConfig } from '@vueform/builder'
export default defineConfig({
element: {
props: {
// THIS WILL WORK
text: {
properties: false
},
// THIS WILL ALSO WORK
text: {
properties: {
inputType: false,
label: false,
tooltip: false,
placeholder: false,
description: false,
}
},
},
},
})Certain configuration options are broken down further into "sub-options", enabling to turn off features within configuration groups, eg. validation:
js
// builder.config.js
import { defineConfig } from '@vueform/builder'
export default defineConfig({
element: {
props: {
default: {
validation: {
// Turn off validation feature
// completely for each element
validation: false,
// Turn off only "min", "max" and
// "size" validation rules for each
// element that have them
validation: {
min: false,
max: false,
size: false,
// ...
},
}
},
// ...
},
},
})Element settings
The available element settings options are listed in this section.
default
Setting options for default element type.
js
// builder.config.js
import { defineConfig } from '@vueform/builder'
export default defineConfig({
element: {
props: {
default: {
properties: {
type: true,
name: true,
inputType: true,
label: true,
tooltip: true,
placeholder: {
floating: true,
},
description: true,
meta: true,
},
data: {
default: true,
submit: true,
items: {
list: true,
json: true,
endpoint: true,
},
object: true,
nested: true,
},
decorators: {
addons: {
prefix: true,
suffix: true,
},
before: true,
between: true,
after: true,
tooltip: true,
description: true,
},
layout: {
size: {
sm: true,
md: true,
lg: true,
},
columns: {
container: true,
label: true,
wrapper: true,
},
align: {
left: true,
right: true,
},
view: {
tabs: true,
blocks: true,
},
full: true,
space: {
'0': true,
'1': true,
'2': true,
},
},
validation: {
fieldName: true,
validation: {
accepted: true,
active_url: true,
after: true,
after_or_equal: true,
alpha: true,
alpha_dash: true,
alpha_num: true,
array: true,
before: true,
before_or_equal: true,
boolean: true,
date: true,
date_equals: true,
date_format: true,
different: true,
digits: true,
digits_between: true,
dimensions: true,
width: true,
height: true,
minWidth: true,
minHeight: true,
maxWidth: true,
maxHeight: true,
ratio: true,
distinct: true,
email: true,
exists: true,
file: true,
gt: true,
gte: true,
image: true,
in: true,
in_array: true,
integer: true,
ip: true,
ipv4: true,
ipv6: true,
json: true,
lt: true,
lte: true,
max: true,
mimetypes: true,
mimes: true,
min: true,
not_in: true,
nullable: true,
numeric: true,
regex: true,
required: true,
same: true,
size: true,
string: true,
timezone: true,
unique: true,
url: true,
uuid: true,
},
fileRules: {
min: true,
max: true,
mimes: true,
extensions: true,
dimensions: true,
width: true,
height: true,
minWidth: true,
minHeight: true,
maxWidth: true,
maxHeight: true,
ratio: true,
},
},
conditions: {
conditions: true,
},
attributes: {
disabled: true,
readonly: true,
id: true,
autocomplete: true,
attrs: true,
},
options: {
autogrow: true,
rows: true,
endpoint: {
method: true,
},
accept: {
mimes: true,
extensions: true,
},
tools: true,
text: true,
boolValue: true,
radio: true,
labels: true,
native: true,
search: {
strict: true,
trackBy: true,
inputType: true,
autocomplete: true,
},
create: {
append: true,
addOn: true,
},
behavior: {
deselect: true,
clear: true,
closeOnSelect: true,
},
ui: {
caret: true,
truncate: true,
openDirection: true,
limit: true,
},
noOptions: true,
noResults: true,
max: true,
multipleLabel: true,
format: {
display: true,
value: true,
load: true,
},
restrictions: {
min: true,
max: true,
disables: true,
},
hour24: true,
seconds: true,
mode: true,
min: true,
step: true,
orientation: true,
direction: true,
tooltips: {
merge: true,
show: true,
position: true,
},
tooltipFormat: true,
autoUpload: true,
dragAndDrop: true,
softRemove: true,
clickable: true,
urls: {
click: true,
preview: true,
},
endpoints: {
uploadTemp: true,
uploadTempMethod: true,
removeTemp: true,
removeTempMethod: true,
remove: true,
removeMethod: true,
},
params: true,
controls: {
add: true,
remove: true,
sort: true,
},
store: {
object: true,
file: true,
order: true,
},
buttonLabel: true,
buttonType: true,
submits: true,
resets: true,
href: true,
target: true,
tag: {
html: true,
h1: true,
h2: true,
h3: true,
h4: true,
p: true,
blockquote: true,
img: true,
link: true,
hr: true,
},
content: true,
img: {
src: true,
alt: true,
title: true,
width: true,
height: true,
},
link: {
href: true,
target: true,
},
attrs: true,
initial: true,
addText: true,
storeOrder: true,
},
},
},
},
})text
Setting options for text element type.
js
// builder.config.js
import { defineConfig } from '@vueform/builder'
export default defineConfig({
element: {
props: {
text: {
properties: {
type: true,
name: true,
inputType: true,
label: true,
tooltip: true,
placeholder: {
floating: true,
},
description: true,
},
data: {
default: true,
submit: true,
},
decorators: {
addons: {
prefix: true,
suffix: true,
},
before: true,
between: true,
after: true,
},
layout: {
size: {
sm: true,
md: true,
lg: true,
},
columns: {
container: true,
label: true,
wrapper: true,
},
},
validation: {
fieldName: true,
validation: {
active_url: true,
after: true,
after_or_equal: true,
alpha: true,
alpha_dash: true,
alpha_num: true,
before: true,
before_or_equal: true,
date: true,
date_equals: true,
date_format: true,
different: true,
digits: true,
digits_between: true,
email: true,
exists: true,
gt: true,
gte: true,
in: true,
in_array: true,
integer: true,
ip: true,
ipv4: true,
ipv6: true,
json: true,
lt: true,
lte: true,
max: true,
min: true,
not_in: true,
nullable: true,
numeric: true,
regex: true,
required: true,
same: true,
size: true,
string: true,
timezone: true,
unique: true,
url: true,
uuid: true,
},
},
conditions: {
conditions: true,
},
attributes: {
disabled: true,
readonly: true,
id: true,
autocomplete: true,
attrs: true,
},
},
},
},
})number
Setting options for number element type.
js
// builder.config.js
import { defineConfig } from '@vueform/builder'
export default defineConfig({
element: {
props: {
number: {
properties: {
type: true,
name: true,
inputType: true,
label: true,
tooltip: true,
placeholder: {
floating: true,
},
description: true,
},
data: {
default: true,
submit: true,
},
decorators: {
addons: {
prefix: true,
suffix: true,
},
before: true,
between: true,
after: true,
},
layout: {
size: {
sm: true,
md: true,
lg: true,
},
columns: {
container: true,
label: true,
wrapper: true,
},
},
validation: {
fieldName: true,
validation: {
active_url: true,
after: true,
after_or_equal: true,
alpha: true,
alpha_dash: true,
alpha_num: true,
before: true,
before_or_equal: true,
date: true,
date_equals: true,
date_format: true,
different: true,
digits: true,
digits_between: true,
email: true,
exists: true,
gt: true,
gte: true,
in: true,
in_array: true,
integer: true,
ip: true,
ipv4: true,
ipv6: true,
json: true,
lt: true,
lte: true,
max: true,
min: true,
not_in: true,
nullable: true,
numeric: true,
regex: true,
required: true,
same: true,
size: true,
string: true,
timezone: true,
unique: true,
url: true,
uuid: true,
},
},
conditions: {
conditions: true,
},
attributes: {
disabled: true,
readonly: true,
id: true,
autocomplete: true,
attrs: true,
},
},
},
},
})email
Setting options for email element type.
js
// builder.config.js
import { defineConfig } from '@vueform/builder'
export default defineConfig({
element: {
props: {
email: {
properties: {
type: true,
name: true,
inputType: true,
label: true,
tooltip: true,
placeholder: {
floating: true,
},
description: true,
},
data: {
default: true,
submit: true,
},
decorators: {
addons: {
prefix: true,
suffix: true,
},
before: true,
between: true,
after: true,
},
layout: {
size: {
sm: true,
md: true,
lg: true,
},
columns: {
container: true,
label: true,
wrapper: true,
},
},
validation: {
fieldName: true,
validation: {
active_url: true,
after: true,
after_or_equal: true,
alpha: true,
alpha_dash: true,
alpha_num: true,
before: true,
before_or_equal: true,
date: true,
date_equals: true,
date_format: true,
different: true,
digits: true,
digits_between: true,
email: true,
exists: true,
gt: true,
gte: true,
in: true,
in_array: true,
integer: true,
ip: true,
ipv4: true,
ipv6: true,
json: true,
lt: true,
lte: true,
max: true,
min: true,
not_in: true,
nullable: true,
numeric: true,
regex: true,
required: true,
same: true,
size: true,
string: true,
timezone: true,
unique: true,
url: true,
uuid: true,
},
},
conditions: {
conditions: true,
},
attributes: {
disabled: true,
readonly: true,
id: true,
autocomplete: true,
attrs: true,
},
},
},
},
})phone
Setting options for phone element type.
js
// builder.config.js
import { defineConfig } from '@vueform/builder'
export default defineConfig({
element: {
props: {
phone: {
properties: {
type: true,
name: true,
inputType: true,
label: true,
tooltip: true,
placeholder: {
floating: true,
},
description: true,
},
data: {
default: true,
submit: true,
},
decorators: {
addons: {
prefix: true,
suffix: true,
},
before: true,
between: true,
after: true,
},
layout: {
size: {
sm: true,
md: true,
lg: true,
},
columns: {
container: true,
label: true,
wrapper: true,
},
},
validation: {
fieldName: true,
validation: {
active_url: true,
after: true,
after_or_equal: true,
alpha: true,
alpha_dash: true,
alpha_num: true,
before: true,
before_or_equal: true,
date: true,
date_equals: true,
date_format: true,
different: true,
digits: true,
digits_between: true,
email: true,
exists: true,
gt: true,
gte: true,
in: true,
in_array: true,
integer: true,
ip: true,
ipv4: true,
ipv6: true,
json: true,
lt: true,
lte: true,
max: true,
min: true,
not_in: true,
nullable: true,
numeric: true,
regex: true,
required: true,
same: true,
size: true,
string: true,
timezone: true,
unique: true,
url: true,
uuid: true,
},
},
conditions: {
conditions: true,
},
attributes: {
disabled: true,
readonly: true,
id: true,
autocomplete: true,
attrs: true,
},
},
},
},
})password
Setting options for password element type.
js
// builder.config.js
import { defineConfig } from '@vueform/builder'
export default defineConfig({
element: {
props: {
password: {
properties: {
type: true,
name: true,
inputType: true,
label: true,
tooltip: true,
placeholder: {
floating: true,
},
description: true,
},
data: {
default: true,
submit: true,
},
decorators: {
addons: {
prefix: true,
suffix: true,
},
before: true,
between: true,
after: true,
},
layout: {
size: {
sm: true,
md: true,
lg: true,
},
columns: {
container: true,
label: true,
wrapper: true,
},
},
validation: {
fieldName: true,
validation: {
active_url: true,
after: true,
after_or_equal: true,
alpha: true,
alpha_dash: true,
alpha_num: true,
before: true,
before_or_equal: true,
date: true,
date_equals: true,
date_format: true,
different: true,
digits: true,
digits_between: true,
email: true,
exists: true,
gt: true,
gte: true,
in: true,
in_array: true,
integer: true,
ip: true,
ipv4: true,
ipv6: true,
json: true,
lt: true,
lte: true,
max: true,
min: true,
not_in: true,
nullable: true,
numeric: true,
regex: true,
required: true,
same: true,
size: true,
string: true,
timezone: true,
unique: true,
url: true,
uuid: true,
},
},
conditions: {
conditions: true,
},
attributes: {
disabled: true,
readonly: true,
id: true,
autocomplete: true,
attrs: true,
},
},
},
},
})url
Setting options for url element type.
js
// builder.config.js
import { defineConfig } from '@vueform/builder'
export default defineConfig({
element: {
props: {
url: {
properties: {
type: true,
name: true,
inputType: true,
label: true,
tooltip: true,
placeholder: {
floating: true,
},
description: true,
},
data: {
default: true,
submit: true,
},
decorators: {
addons: {
prefix: true,
suffix: true,
},
before: true,
between: true,
after: true,
},
layout: {
size: {
sm: true,
md: true,
lg: true,
},
columns: {
container: true,
label: true,
wrapper: true,
},
},
validation: {
fieldName: true,
validation: {
active_url: true,
after: true,
after_or_equal: true,
alpha: true,
alpha_dash: true,
alpha_num: true,
before: true,
before_or_equal: true,
date: true,
date_equals: true,
date_format: true,
different: true,
digits: true,
digits_between: true,
email: true,
exists: true,
gt: true,
gte: true,
in: true,
in_array: true,
integer: true,
ip: true,
ipv4: true,
ipv6: true,
json: true,
lt: true,
lte: true,
max: true,
min: true,
not_in: true,
nullable: true,
numeric: true,
regex: true,
required: true,
same: true,
size: true,
string: true,
timezone: true,
unique: true,
url: true,
uuid: true,
},
},
conditions: {
conditions: true,
},
attributes: {
disabled: true,
readonly: true,
id: true,
autocomplete: true,
attrs: true,
},
},
},
},
})location
Setting options for location element type.
js
// builder.config.js
import { defineConfig } from '@vueform/builder'
export default defineConfig({
element: {
props: {
location: {
properties: {
type: true,
name: true,
inputType: true,
label: true,
tooltip: true,
placeholder: {
floating: true,
},
description: true,
},
data: {
default: true,
submit: true,
},
decorators: {
addons: {
prefix: true,
suffix: true,
},
before: true,
between: true,
after: true,
},
layout: {
size: {
sm: true,
md: true,
lg: true,
},
columns: {
container: true,
label: true,
wrapper: true,
},
},
validation: {
fieldName: true,
validation: {
required: true,
},
},
conditions: {
conditions: true,
},
attributes: {
disabled: true,
readonly: true,
id: true,
autocomplete: true,
attrs: true,
},
},
},
},
})textarea
Setting options for textarea element type.
js
// builder.config.js
import { defineConfig } from '@vueform/builder'
export default defineConfig({
element: {
props: {
textarea: {
properties: {
type: true,
name: true,
label: true,
tooltip: true,
placeholder: {
floating: true,
},
description: true,
},
options: {
autogrow: true,
rows: true,
},
data: {
default: true,
submit: true,
},
decorators: {
addons: {
prefix: true,
suffix: true,
},
before: true,
between: true,
after: true,
},
layout: {
size: {
sm: true,
md: true,
lg: true,
},
columns: {
container: true,
label: true,
wrapper: true,
},
},
validation: {
fieldName: true,
validation: {
alpha: true,
alpha_dash: true,
alpha_num: true,
different: true,
digits: true,
digits_between: true,
email: true,
exists: true,
gt: true,
gte: true,
in: true,
in_array: true,
integer: true,
ip: true,
ipv6: true,
json: true,
lt: true,
lte: true,
max: true,
min: true,
not_in: true,
nullable: true,
numeric: true,
regex: true,
required: true,
same: true,
size: true,
string: true,
timezone: true,
unique: true,
url: true,
uuid: true,
},
},
conditions: {
conditions: true,
},
attributes: {
disabled: true,
readonly: true,
id: true,
attrs: true,
},
},
},
},
})editor
Setting options for editor element type.
js
// builder.config.js
import { defineConfig } from '@vueform/builder'
export default defineConfig({
element: {
props: {
editor: {
properties: {
type: true,
name: true,
label: true,
tooltip: true,
placeholder: {
floating: true,
},
description: true,
},
options: {
endpoint: {
method: true,
},
accept: {
mimes: true,
extensions: true,
},
tools: true,
},
data: {
default: true,
submit: true,
},
decorators: {
before: true,
between: true,
after: true,
},
layout: {
size: {
sm: true,
md: true,
lg: true,
},
columns: {
container: true,
label: true,
wrapper: true,
},
},
validation: {
fieldName: true,
validation: {
different: true,
gt: true,
gte: true,
lt: true,
lte: true,
max: true,
min: true,
nullable: true,
regex: true,
required: true,
same: true,
size: true,
string: true,
},
},
conditions: {
conditions: true,
},
attributes: {
disabled: true,
id: true,
},
},
},
},
})checkbox
Setting options for checkbox element type.
js
// builder.config.js
import { defineConfig } from '@vueform/builder'
export default defineConfig({
element: {
props: {
checkbox: {
properties: {
type: true,
name: true,
label: true,
tooltip: true,
description: true,
},
options: {
text: true,
boolValue: true,
},
data: {
default: true,
submit: true,
},
decorators: {
before: true,
between: true,
after: true,
},
layout: {
align: {
left: true,
right: true,
},
size: {
sm: true,
md: true,
lg: true,
},
columns: {
container: true,
label: true,
wrapper: true,
},
},
validation: {
fieldName: true,
validation: {
accepted: true,
different: true,
in: true,
not_in: true,
same: true,
},
},
conditions: {
conditions: true,
},
attributes: {
disabled: true,
id: true,
},
},
},
},
})checkboxgroup
Setting options for checkboxgroup element type.
js
// builder.config.js
import { defineConfig } from '@vueform/builder'
export default defineConfig({
element: {
props: {
checkboxgroup: {
properties: {
type: true,
name: true,
label: true,
tooltip: true,
description: true,
},
data: {
items: {
list: true,
json: true,
endpoint: true,
},
default: true,
submit: true,
},
decorators: {
before: true,
between: true,
after: true,
},
layout: {
view: {
tabs: true,
blocks: true,
},
size: {
sm: true,
md: true,
lg: true,
},
columns: {
container: true,
label: true,
wrapper: true,
},
},
validation: {
fieldName: true,
validation: {
array: true,
distinct: true,
max: true,
min: true,
nullable: true,
required: true,
size: true,
},
},
conditions: {
conditions: true,
},
attributes: {
disabled: true,
id: true,
},
},
},
},
})checkboxBlocks
Setting options for checkboxBlocks element type.
js
// builder.config.js
import { defineConfig } from '@vueform/builder'
export default defineConfig({
element: {
props: {
checkboxBlocks: {
properties: {
type: true,
name: true,
label: true,
tooltip: true,
description: true,
},
data: {
items: {
list: true,
json: true,
endpoint: true,
},
default: true,
submit: true,
},
decorators: {
before: true,
between: true,
after: true,
},
layout: {
view: {
tabs: true,
blocks: true,
},
size: {
sm: true,
md: true,
lg: true,
},
columns: {
container: true,
label: true,
wrapper: true,
},
},
validation: {
fieldName: true,
validation: {
array: true,
distinct: true,
max: true,
min: true,
nullable: true,
required: true,
size: true,
},
},
conditions: {
conditions: true,
},
attributes: {
disabled: true,
id: true,
},
},
},
},
})checkboxTabs
Setting options for checkboxTabs element type.
js
// builder.config.js
import { defineConfig } from '@vueform/builder'
export default defineConfig({
element: {
props: {
checkboxTabs: {
properties: {
type: true,
name: true,
label: true,
tooltip: true,
description: true,
},
data: {
items: {
list: true,
json: true,
endpoint: true,
},
default: true,
submit: true,
},
decorators: {
before: true,
between: true,
after: true,
},
layout: {
view: {
tabs: true,
blocks: true,
},
size: {
sm: true,
md: true,
lg: true,
},
columns: {
container: true,
label: true,
wrapper: true,
},
},
validation: {
fieldName: true,
validation: {
array: true,
distinct: true,
max: true,
min: true,
nullable: true,
required: true,
size: true,
},
},
conditions: {
conditions: true,
},
attributes: {
disabled: true,
id: true,
},
},
},
},
})radio
Setting options for radio element type.
js
// builder.config.js
import { defineConfig } from '@vueform/builder'
export default defineConfig({
element: {
props: {
radio: {
properties: {
type: true,
name: true,
label: true,
tooltip: true,
description: true,
},
options: {
text: true,
radio: true,
},
data: {
default: true,
submit: true,
},
decorators: {
before: true,
between: true,
after: true,
},
layout: {
align: {
left: true,
right: true,
},
size: {
sm: true,
md: true,
lg: true,
},
columns: {
container: true,
label: true,
wrapper: true,
},
},
validation: {
fieldName: true,
validation: {
boolean: true,
in: true,
in_array: true,
not_in: true,
required: true,
},
},
conditions: {
conditions: true,
},
attributes: {
disabled: true,
id: true,
},
},
},
},
})radiogroup
Setting options for radiogroup element type.
js
// builder.config.js
import { defineConfig } from '@vueform/builder'
export default defineConfig({
element: {
props: {
radiogroup: {
properties: {
type: true,
name: true,
label: true,
tooltip: true,
description: true,
},
data: {
items: {
list: true,
json: true,
endpoint: true,
},
default: true,
submit: true,
},
decorators: {
before: true,
between: true,
after: true,
},
layout: {
view: {
tabs: true,
blocks: true,
},
size: {
sm: true,
md: true,
lg: true,
},
columns: {
container: true,
label: true,
wrapper: true,
},
},
validation: {
fieldName: true,
validation: {
different: true,
in: true,
in_array: true,
not_in: true,
nullable: true,
required: true,
same: true,
},
},
conditions: {
conditions: true,
},
attributes: {
disabled: true,
id: true,
},
},
},
},
})radioBlocks
Setting options for radioBlocks element type.
js
// builder.config.js
import { defineConfig } from '@vueform/builder'
export default defineConfig({
element: {
props: {
radioBlocks: {
properties: {
type: true,
name: true,
label: true,
tooltip: true,
description: true,
},
data: {
items: {
list: true,
json: true,
endpoint: true,
},
default: true,
submit: true,
},
decorators: {
before: true,
between: true,
after: true,
},
layout: {
view: {
tabs: true,
blocks: true,
},
size: {
sm: true,
md: true,
lg: true,
},
columns: {
container: true,
label: true,
wrapper: true,
},
},
validation: {
fieldName: true,
validation: {
different: true,
in: true,
in_array: true,
not_in: true,
nullable: true,
required: true,
same: true,
},
},
conditions: {
conditions: true,
},
attributes: {
disabled: true,
id: true,
},
},
},
},
})radioTabs
Setting options for radioTabs element type.
js
// builder.config.js
import { defineConfig } from '@vueform/builder'
export default defineConfig({
element: {
props: {
radioTabs: {
properties: {
type: true,
name: true,
label: true,
tooltip: true,
description: true,
},
data: {
items: {
list: true,
json: true,
endpoint: true,
},
default: true,
submit: true,
},
decorators: {
before: true,
between: true,
after: true,
},
layout: {
view: {
tabs: true,
blocks: true,
},
size: {
sm: true,
md: true,
lg: true,
},
columns: {
container: true,
label: true,
wrapper: true,
},
},
validation: {
fieldName: true,
validation: {
different: true,
in: true,
in_array: true,
not_in: true,
nullable: true,
required: true,
same: true,
},
},
conditions: {
conditions: true,
},
attributes: {
disabled: true,
id: true,
},
},
},
},
})toggle
Setting options for toggle element type.
js
// builder.config.js
import { defineConfig } from '@vueform/builder'
export default defineConfig({
element: {
props: {
toggle: {
properties: {
type: true,
name: true,
label: true,
tooltip: true,
description: true,
},
options: {
text: true,
labels: true,
boolValue: true,
},
data: {
default: true,
submit: true,
},
decorators: {
before: true,
between: true,
after: true,
},
layout: {
align: {
left: true,
right: true,
},
size: {
sm: true,
md: true,
lg: true,
},
columns: {
container: true,
label: true,
wrapper: true,
},
},
validation: {
fieldName: true,
validation: {
different: true,
in: true,
not_in: true,
nullable: true,
required: true,
same: true,
},
},
conditions: {
conditions: true,
},
attributes: {
disabled: true,
id: true,
},
},
},
},
})select
Setting options for select element type.
js
// builder.config.js
import { defineConfig } from '@vueform/builder'
export default defineConfig({
element: {
props: {
select: {
properties: {
type: true,
name: true,
label: true,
tooltip: true,
placeholder: {
floating: true,
},
description: true,
},
options: {
native: true,
search: {
strict: true,
trackBy: true,
inputType: true,
autocomplete: true,
},
create: {
append: true,
addOn: true,
},
behavior: {
deselect: true,
clear: true,
closeOnSelect: true,
},
ui: {
caret: true,
truncate: true,
openDirection: true,
limit: true,
},
noOptions: true,
noResults: true,
},
data: {
items: {
list: true,
json: true,
endpoint: true,
valueKey: true,
labelKey: true,
dataKey: true,
searchParam: true,
updateOnSearch: true,
delay: true,
minChars: true,
resolveOnLoad: true,
filterResults: true,
clearOnSearch: true,
},
default: true,
object: true,
submit: true,
},
decorators: {
before: true,
between: true,
after: true,
},
layout: {
size: {
sm: true,
md: true,
lg: true,
},
columns: {
container: true,
label: true,
wrapper: true,
},
},
validation: {
fieldName: true,
validation: {
alpha: true,
alpha_dash: true,
alpha_num: true,
different: true,
digits: true,
digits_between: true,
email: true,
exists: true,
gt: true,
gte: true,
in: true,
in_array: true,
integer: true,
ip: true,
ipv4: true,
ipv6: true,
lt: true,
lte: true,
max: true,
min: true,
not_in: true,
nullable: true,
numeric: true,
regex: true,
required: true,
same: true,
size: true,
string: true,
timezone: true,
unique: true,
url: true,
uuid: true,
},
},
conditions: {
conditions: true,
},
attributes: {
disabled: true,
id: true,
attrs: true,
},
},
},
},
})multiselect
Setting options for multiselect element type.
js
// builder.config.js
import { defineConfig } from '@vueform/builder'
export default defineConfig({
element: {
props: {
multiselect: {
properties: {
type: true,
name: true,
label: true,
tooltip: true,
placeholder: {
floating: true,
},
description: true,
},
options: {
native: true,
search: {
strict: true,
trackBy: true,
inputType: true,
autocomplete: true,
},
create: {
append: true,
addOn: true,
},
behavior: {
deselect: true,
clear: true,
closeOnSelect: true,
hideSelected: true,
},
ui: {
caret: true,
truncate: true,
openDirection: true,
limit: true,
},
max: true,
multipleLabel: true,
noOptions: true,
noResults: true,
},
data: {
items: {
list: true,
json: true,
endpoint: true,
valueKey: true,
labelKey: true,
dataKey: true,
searchParam: true,
updateOnSearch: true,
delay: true,
minChars: true,
resolveOnLoad: true,
filterResults: true,
clearOnSearch: true,
},
default: true,
object: true,
submit: true,
},
decorators: {
before: true,
between: true,
after: true,
},
layout: {
size: {
sm: true,
md: true,
lg: true,
},
columns: {
container: true,
label: true,
wrapper: true,
},
},
validation: {
fieldName: true,
validation: {
array: true,
distinct: true,
gt: true,
gte: true,
lt: true,
lte: true,
max: true,
min: true,
nullable: true,
required: true,
size: true,
},
},
conditions: {
conditions: true,
},
attributes: {
disabled: true,
id: true,
attrs: true,
},
},
},
},
})tags
Setting options for tags element type.
js
// builder.config.js
import { defineConfig } from '@vueform/builder'
export default defineConfig({
element: {
props: {
tags: {
properties: {
type: true,
name: true,
label: true,
tooltip: true,
placeholder: {
floating: true,
},
description: true,
},
options: {
search: {
strict: true,
trackBy: true,
inputType: true,
autocomplete: true,
},
create: {
append: true,
addOn: true,
},
behavior: {
deselect: true,
clear: true,
closeOnSelect: true,
hideSelected: true,
},
ui: {
caret: true,
truncate: true,
openDirection: true,
limit: true,
},
max: true,
noOptions: true,
noResults: true,
},
data: {
items: {
list: true,
json: true,
endpoint: true,
valueKey: true,
labelKey: true,
dataKey: true,
searchParam: true,
updateOnSearch: true,
delay: true,
minChars: true,
resolveOnLoad: true,
filterResults: true,
clearOnSearch: true,
},
default: true,
object: true,
submit: true,
},
decorators: {
before: true,
between: true,
after: true,
},
layout: {
size: {
sm: true,
md: true,
lg: true,
},
columns: {
container: true,
label: true,
wrapper: true,
},
},
validation: {
fieldName: true,
validation: {
array: true,
distinct: true,
gt: true,
gte: true,
lt: true,
lte: true,
max: true,
min: true,
nullable: true,
required: true,
size: true,
},
},
conditions: {
conditions: true,
},
attributes: {
disabled: true,
id: true,
attrs: true,
},
},
},
},
})date
Setting options for date element type.
js
// builder.config.js
import { defineConfig } from '@vueform/builder'
export default defineConfig({
element: {
props: {
date: {
properties: {
type: true,
name: true,
label: true,
tooltip: true,
placeholder: {
floating: true,
},
description: true,
},
options: {
format: {
display: true,
value: true,
load: true,
},
restrictions: {
min: true,
max: true,
disables: true,
},
},
data: {
default: true,
submit: true,
},
decorators: {
addons: {
prefix: true,
suffix: true,
},
before: true,
between: true,
after: true,
},
layout: {
size: {
sm: true,
md: true,
lg: true,
},
columns: {
container: true,
label: true,
wrapper: true,
},
},
validation: {
fieldName: true,
validation: {
after: true,
after_or_equal: true,
before: true,
before_or_equal: true,
date: true,
date_format: true,
different: true,
in: true,
in_array: true,
not_in: true,
nullable: true,
required: true,
same: true,
string: true,
},
},
conditions: {
conditions: true,
},
attributes: {
disabled: true,
readonly: true,
id: true,
},
},
},
},
})datetime
Setting options for datetime element type.
js
// builder.config.js
import { defineConfig } from '@vueform/builder'
export default defineConfig({
element: {
props: {
datetime: {
properties: {
type: true,
name: true,
label: true,
tooltip: true,
placeholder: {
floating: true,
},
description: true,
},
options: {
hour24: true,
seconds: true,
format: {
display: true,
value: true,
load: true,
},
restrictions: {
min: true,
max: true,
disables: true,
},
},
data: {
default: true,
submit: true,
},
decorators: {
addons: {
prefix: true,
suffix: true,
},
before: true,
between: true,
after: true,
},
layout: {
size: {
sm: true,
md: true,
lg: true,
},
columns: {
container: true,
label: true,
wrapper: true,
},
},
validation: {
fieldName: true,
validation: {
after: true,
after_or_equal: true,
before: true,
before_or_equal: true,
date: true,
date_format: true,
different: true,
in: true,
in_array: true,
not_in: true,
nullable: true,
required: true,
same: true,
string: true,
},
},
conditions: {
conditions: true,
},
attributes: {
disabled: true,
readonly: true,
id: true,
},
},
},
},
})time
Setting options for time element type.
js
// builder.config.js
import { defineConfig } from '@vueform/builder'
export default defineConfig({
element: {
props: {
time: {
properties: {
type: true,
name: true,
label: true,
tooltip: true,
placeholder: {
floating: true,
},
description: true,
},
options: {
hour24: true,
seconds: true,
format: {
display: true,
value: true,
load: true,
},
},
data: {
default: true,
submit: true,
},
decorators: {
addons: {
prefix: true,
suffix: true,
},
before: true,
between: true,
after: true,
},
layout: {
size: {
sm: true,
md: true,
lg: true,
},
columns: {
container: true,
label: true,
wrapper: true,
},
},
validation: {
fieldName: true,
validation: {
after: true,
after_or_equal: true,
before: true,
before_or_equal: true,
date: true,
date_format: true,
different: true,
in: true,
in_array: true,
not_in: true,
nullable: true,
required: true,
same: true,
string: true,
},
},
conditions: {
conditions: true,
},
attributes: {
disabled: true,
readonly: true,
id: true,
},
},
},
},
})dates
Setting options for dates element type.
js
// builder.config.js
import { defineConfig } from '@vueform/builder'
export default defineConfig({
element: {
props: {
dates: {
properties: {
type: true,
name: true,
label: true,
tooltip: true,
placeholder: {
floating: true,
},
description: true,
},
options: {
mode: true,
format: {
display: true,
value: true,
load: true,
},
restrictions: {
min: true,
max: true,
disables: true,
},
},
data: {
default: true,
submit: true,
},
decorators: {
addons: {
prefix: true,
suffix: true,
},
before: true,
between: true,
after: true,
},
layout: {
size: {
sm: true,
md: true,
lg: true,
},
columns: {
container: true,
label: true,
wrapper: true,
},
},
validation: {
fieldName: true,
validation: {
after: true,
after_or_equal: true,
array: true,
before: true,
before_or_equal: true,
date: true,
date_format: true,
distinct: true,
max: true,
min: true,
nullable: true,
required: true,
size: true,
},
},
conditions: {
conditions: true,
},
attributes: {
disabled: true,
readonly: true,
id: true,
},
},
},
},
})dateRange
Setting options for dateRange element type.
js
// builder.config.js
import { defineConfig } from '@vueform/builder'
export default defineConfig({
element: {
props: {
dateRange: {
properties: {
type: true,
name: true,
label: true,
tooltip: true,
placeholder: {
floating: true,
},
description: true,
},
options: {
mode: true,
format: {
display: true,
value: true,
load: true,
},
restrictions: {
min: true,
max: true,
disables: true,
},
},
data: {
default: true,
submit: true,
},
decorators: {
addons: {
prefix: true,
suffix: true,
},
before: true,
between: true,
after: true,
},
layout: {
size: {
sm: true,
md: true,
lg: true,
},
columns: {
container: true,
label: true,
wrapper: true,
},
},
validation: {
fieldName: true,
validation: {
after: true,
after_or_equal: true,
array: true,
before: true,
before_or_equal: true,
date: true,
date_format: true,
distinct: true,
max: true,
min: true,
nullable: true,
required: true,
size: true,
},
},
conditions: {
conditions: true,
},
attributes: {
disabled: true,
readonly: true,
id: true,
},
},
},
},
})slider
Setting options for slider element type.
js
// builder.config.js
import { defineConfig } from '@vueform/builder'
export default defineConfig({
element: {
props: {
slider: {
properties: {
type: true,
name: true,
label: true,
tooltip: true,
description: true,
},
options: {
min: true,
max: true,
step: true,
orientation: true,
direction: true,
tooltips: {
merge: true,
show: true,
position: true,
},
tooltipFormat: true,
},
data: {
default: true,
submit: true,
},
decorators: {
before: true,
between: true,
after: true,
},
layout: {
size: {
sm: true,
md: true,
lg: true,
},
columns: {
container: true,
label: true,
wrapper: true,
},
},
validation: {
fieldName: true,
validation: {
array: true,
different: true,
digits: true,
digits_between: true,
distinct: true,
gt: true,
gte: true,
in: true,
in_array: true,
integer: true,
lt: true,
lte: true,
max: true,
min: true,
not_in: true,
nullable: true,
numeric: true,
required: true,
same: true,
size: true,
string: true,
},
},
conditions: {
conditions: true,
},
attributes: {
disabled: true,
id: true,
},
},
},
},
})rangeSlider
Setting options for rangeSlider element type.
js
// builder.config.js
import { defineConfig } from '@vueform/builder'
export default defineConfig({
element: {
props: {
rangeSlider: {
properties: {
type: true,
name: true,
label: true,
tooltip: true,
description: true,
},
options: {
min: true,
max: true,
step: true,
orientation: true,
direction: true,
tooltips: {
merge: true,
show: true,
position: true,
},
tooltipFormat: true,
},
data: {
default: true,
submit: true,
},
decorators: {
before: true,
between: true,
after: true,
},
layout: {
size: {
sm: true,
md: true,
lg: true,
},
columns: {
container: true,
label: true,
wrapper: true,
},
},
validation: {
fieldName: true,
validation: {
array: true,
different: true,
digits: true,
digits_between: true,
distinct: true,
gt: true,
gte: true,
in: true,
in_array: true,
integer: true,
lt: true,
lte: true,
max: true,
min: true,
not_in: true,
nullable: true,
numeric: true,
required: true,
same: true,
size: true,
string: true,
},
},
conditions: {
conditions: true,
},
attributes: {
disabled: true,
id: true,
},
},
},
},
})verticalSlider
Setting options for verticalSlider element type.
js
// builder.config.js
import { defineConfig } from '@vueform/builder'
export default defineConfig({
element: {
props: {
verticalSlider: {
properties: {
type: true,
name: true,
label: true,
tooltip: true,
description: true,
},
options: {
min: true,
max: true,
step: true,
orientation: true,
direction: true,
tooltips: {
merge: true,
show: true,
position: true,
},
tooltipFormat: true,
},
data: {
default: true,
submit: true,
},
decorators: {
before: true,
between: true,
after: true,
},
layout: {
size: {
sm: true,
md: true,
lg: true,
},
columns: {
container: true,
label: true,
wrapper: true,
},
},
validation: {
fieldName: true,
validation: {
array: true,
different: true,
digits: true,
digits_between: true,
distinct: true,
gt: true,
gte: true,
in: true,
in_array: true,
integer: true,
lt: true,
lte: true,
max: true,
min: true,
not_in: true,
nullable: true,
numeric: true,
required: true,
same: true,
size: true,
string: true,
},
},
conditions: {
conditions: true,
},
attributes: {
disabled: true,
id: true,
},
},
},
},
})file
Setting options for file element type.
js
// builder.config.js
import { defineConfig } from '@vueform/builder'
export default defineConfig({
element: {
props: {
file: {
properties: {
type: true,
name: true,
label: true,
tooltip: true,
description: true,
},
options: {
autoUpload: true,
dragAndDrop: true,
softRemove: true,
clickable: true,
urls: {
click: true,
preview: true,
},
accept: {
types: true,
mimes: true,
extensions: true,
},
endpoints: {
uploadTemp: true,
uploadTempMethod: true,
removeTemp: true,
removeTempMethod: true,
remove: true,
removeMethod: true,
},
params: true,
},
data: {
default: true,
submit: true,
},
decorators: {
before: true,
between: true,
after: true,
},
layout: {
view: {
file: true,
image: true,
gallery: true,
},
size: {
sm: true,
md: true,
lg: true,
},
columns: {
container: true,
label: true,
wrapper: true,
},
},
validation: {
fieldName: true,
validation: {
dimensions: true,
file: true,
gt: true,
gte: true,
image: true,
lt: true,
lte: true,
max: true,
mimetypes: true,
mimes: true,
min: true,
nullable: true,
required: true,
size: true,
},
},
conditions: {
conditions: true,
},
attributes: {
disabled: true,
id: true,
},
},
},
},
})multifile
Setting options for multifile element type.
js
// builder.config.js
import { defineConfig } from '@vueform/builder'
export default defineConfig({
element: {
props: {
multifile: {
properties: {
type: true,
name: true,
label: true,
tooltip: true,
description: true,
},
options: {
autoUpload: true,
dragAndDrop: true,
softRemove: true,
clickable: true,
urls: {
click: true,
preview: true,
},
controls: {
add: true,
remove: true,
sort: true,
},
store: {
object: true,
file: true,
order: true,
},
accept: {
types: true,
mimes: true,
extensions: true,
},
endpoints: {
uploadTemp: true,
uploadTempMethod: true,
removeTemp: true,
removeTempMethod: true,
remove: true,
removeMethod: true,
},
params: true,
},
data: {
submit: true,
},
decorators: {
before: true,
between: true,
after: true,
},
layout: {
view: {
file: true,
image: true,
gallery: true,
},
size: {
sm: true,
md: true,
lg: true,
},
columns: {
container: true,
label: true,
wrapper: true,
},
},
validation: {
fieldName: true,
fileRules: {
min: true,
max: true,
mimes: true,
extensions: true,
dimensions: true,
width: true,
height: true,
minWidth: true,
minHeight: true,
maxWidth: true,
maxHeight: true,
ratio: true,
},
validation: {
array: true,
gt: true,
gte: true,
lt: true,
lte: true,
max: true,
min: true,
nullable: true,
required: true,
size: true,
},
},
conditions: {
conditions: true,
},
attributes: {
disabled: true,
id: true,
},
},
},
},
})image
Setting options for image element type.
js
// builder.config.js
import { defineConfig } from '@vueform/builder'
export default defineConfig({
element: {
props: {
image: {
properties: {
type: true,
name: true,
label: true,
tooltip: true,
description: true,
},
options: {
autoUpload: true,
dragAndDrop: true,
softRemove: true,
clickable: true,
urls: {
click: true,
preview: true,
},
accept: {
types: true,
mimes: true,
extensions: true,
},
endpoints: {
uploadTemp: true,
uploadTempMethod: true,
removeTemp: true,
removeTempMethod: true,
remove: true,
removeMethod: true,
},
params: true,
},
data: {
default: true,
submit: true,
},
decorators: {
before: true,
between: true,
after: true,
},
layout: {
view: {
file: true,
image: true,
gallery: true,
},
size: {
sm: true,
md: true,
lg: true,
},
columns: {
container: true,
label: true,
wrapper: true,
},
},
validation: {
fieldName: true,
validation: {
dimensions: true,
file: true,
gt: true,
gte: true,
image: true,
lt: true,
lte: true,
max: true,
mimetypes: true,
mimes: true,
min: true,
nullable: true,
required: true,
size: true,
},
},
conditions: {
conditions: true,
},
attributes: {
disabled: true,
id: true,
},
},
},
},
})multiImage
Setting options for multiImage element type.
js
// builder.config.js
import { defineConfig } from '@vueform/builder'
export default defineConfig({
element: {
props: {
multiImage: {
properties: {
type: true,
name: true,
label: true,
tooltip: true,
description: true,
},
options: {
autoUpload: true,
dragAndDrop: true,
softRemove: true,
clickable: true,
urls: {
click: true,
preview: true,
},
controls: {
add: true,
remove: true,
sort: true,
},
store: {
object: true,
file: true,
order: true,
},
accept: {
types: true,
mimes: true,
extensions: true,
},
endpoints: {
uploadTemp: true,
uploadTempMethod: true,
removeTemp: true,
removeTempMethod: true,
remove: true,
removeMethod: true,
},
params: true,
},
data: {
submit: true,
},
decorators: {
before: true,
between: true,
after: true,
},
layout: {
view: {
file: true,
image: true,
gallery: true,
},
size: {
sm: true,
md: true,
lg: true,
},
columns: {
container: true,
label: true,
wrapper: true,
},
},
validation: {
fieldName: true,
fileRules: {
min: true,
max: true,
mimes: true,
extensions: true,
dimensions: true,
width: true,
height: true,
minWidth: true,
minHeight: true,
maxWidth: true,
maxHeight: true,
ratio: true,
},
validation: {
array: true,
gt: true,
gte: true,
lt: true,
lte: true,
max: true,
min: true,
nullable: true,
required: true,
size: true,
},
},
conditions: {
conditions: true,
},
attributes: {
disabled: true,
id: true,
},
},
},
},
})gallery
Setting options for gallery element type.
js
// builder.config.js
import { defineConfig } from '@vueform/builder'
export default defineConfig({
element: {
props: {
gallery: {
properties: {
type: true,
name: true,
label: true,
tooltip: true,
description: true,
},
options: {
autoUpload: true,
dragAndDrop: true,
softRemove: true,
clickable: true,
urls: {
click: true,
preview: true,
},
controls: {
add: true,
remove: true,
sort: true,
},
store: {
object: true,
file: true,
order: true,
},
accept: {
types: true,
mimes: true,
extensions: true,
},
endpoints: {
uploadTemp: true,
uploadTempMethod: true,
removeTemp: true,
removeTempMethod: true,
remove: true,
removeMethod: true,
},
params: true,
},
data: {
submit: true,
},
decorators: {
before: true,
between: true,
after: true,
},
layout: {
view: {
file: true,
image: true,
gallery: true,
},
size: {
sm: true,
md: true,
lg: true,
},
columns: {
container: true,
label: true,
wrapper: true,
},
},
validation: {
fieldName: true,
fileRules: {
min: true,
max: true,
mimes: true,
extensions: true,
dimensions: true,
width: true,
height: true,
minWidth: true,
minHeight: true,
maxWidth: true,
maxHeight: true,
ratio: true,
},
validation: {
array: true,
gt: true,
gte: true,
lt: true,
lte: true,
max: true,
min: true,
nullable: true,
required: true,
size: true,
},
},
conditions: {
conditions: true,
},
attributes: {
disabled: true,
id: true,
},
},
},
},
})hidden
Setting options for hidden element type.
js
// builder.config.js
import { defineConfig } from '@vueform/builder'
export default defineConfig({
element: {
props: {
hidden: {
properties: {
type: true,
name: true,
meta: true,
},
data: {
default: true,
submit: true,
},
conditions: {
conditions: true,
},
attributes: {
id: true,
attrs: true,
},
},
},
},
})submit
Setting options for submit element type.
js
// builder.config.js
import { defineConfig } from '@vueform/builder'
export default defineConfig({
element: {
props: {
submit: {
properties: {
type: true,
name: true,
label: true,
tooltip: true,
description: true,
},
options: {
buttonLabel: true,
buttonType: true,
submits: true,
resets: true,
href: true,
target: true,
},
decorators: {
before: true,
between: true,
after: true,
},
layout: {
full: true,
align: {
left: true,
center: true,
right: true,
},
size: {
sm: true,
md: true,
lg: true,
},
columns: {
container: true,
label: true,
wrapper: true,
},
},
conditions: {
conditions: true,
},
attributes: {
disabled: true,
id: true,
},
},
},
},
})reset
Setting options for reset element type.
js
// builder.config.js
import { defineConfig } from '@vueform/builder'
export default defineConfig({
element: {
props: {
reset: {
properties: {
type: true,
name: true,
label: true,
tooltip: true,
description: true,
},
options: {
buttonLabel: true,
buttonType: true,
submits: true,
resets: true,
href: true,
target: true,
},
decorators: {
before: true,
between: true,
after: true,
},
layout: {
full: true,
align: {
left: true,
center: true,
right: true,
},
size: {
sm: true,
md: true,
lg: true,
},
columns: {
container: true,
label: true,
wrapper: true,
},
},
conditions: {
conditions: true,
},
attributes: {
disabled: true,
id: true,
},
},
},
},
})primaryButton
Setting options for primaryButton element type.
js
// builder.config.js
import { defineConfig } from '@vueform/builder'
export default defineConfig({
element: {
props: {
primaryButton: {
properties: {
type: true,
name: true,
label: true,
tooltip: true,
description: true,
},
options: {
buttonLabel: true,
buttonType: true,
submits: true,
resets: true,
href: true,
target: true,
},
decorators: {
before: true,
between: true,
after: true,
},
layout: {
full: true,
align: {
left: true,
center: true,
right: true,
},
size: {
sm: true,
md: true,
lg: true,
},
columns: {
container: true,
label: true,
wrapper: true,
},
},
conditions: {
conditions: true,
},
attributes: {
disabled: true,
id: true,
},
},
},
},
})secondaryButton
Setting options for secondaryButton element type.
js
// builder.config.js
import { defineConfig } from '@vueform/builder'
export default defineConfig({
element: {
props: {
secondaryButton: {
properties: {
type: true,
name: true,
label: true,
tooltip: true,
description: true,
},
options: {
buttonLabel: true,
buttonType: true,
submits: true,
resets: true,
href: true,
target: true,
},
decorators: {
before: true,
between: true,
after: true,
},
layout: {
full: true,
align: {
left: true,
center: true,
right: true,
},
size: {
sm: true,
md: true,
lg: true,
},
columns: {
container: true,
label: true,
wrapper: true,
},
},
conditions: {
conditions: true,
},
attributes: {
disabled: true,
id: true,
},
},
},
},
})dangerButton
Setting options for dangerButton element type.
js
// builder.config.js
import { defineConfig } from '@vueform/builder'
export default defineConfig({
element: {
props: {
dangerButton: {
properties: {
type: true,
name: true,
label: true,
tooltip: true,
description: true,
},
options: {
buttonLabel: true,
buttonType: true,
submits: true,
resets: true,
href: true,
target: true,
},
decorators: {
before: true,
between: true,
after: true,
},
layout: {
full: true,
align: {
left: true,
center: true,
right: true,
},
size: {
sm: true,
md: true,
lg: true,
},
columns: {
container: true,
label: true,
wrapper: true,
},
},
conditions: {
conditions: true,
},
attributes: {
disabled: true,
id: true,
},
},
},
},
})h1
Setting options for h1 element type.
js
// builder.config.js
import { defineConfig } from '@vueform/builder'
export default defineConfig({
element: {
props: {
h1: {
properties: {
type: true,
name: true,
label: true,
tooltip: true,
description: true,
},
options: {
tag: {
html: true,
h1: true,
h2: true,
h3: true,
h4: true,
p: true,
blockquote: true,
img: true,
link: true,
hr: true,
},
content: true,
img: {
src: true,
alt: true,
title: true,
width: true,
height: true,
},
link: {
href: true,
target: true,
},
attrs: true,
},
decorators: {
before: true,
between: true,
after: true,
},
layout: {
align: {
left: true,
center: true,
right: true,
},
space: {
'0': true,
'1': true,
'2': true,
},
size: {
sm: true,
md: true,
lg: true,
},
columns: {
container: true,
label: true,
wrapper: true,
},
},
conditions: {
conditions: true,
},
},
},
},
})h2
Setting options for h2 element type.
js
// builder.config.js
import { defineConfig } from '@vueform/builder'
export default defineConfig({
element: {
props: {
h2: {
properties: {
type: true,
name: true,
label: true,
tooltip: true,
description: true,
},
options: {
tag: {
html: true,
h1: true,
h2: true,
h3: true,
h4: true,
p: true,
blockquote: true,
img: true,
link: true,
hr: true,
},
content: true,
img: {
src: true,
alt: true,
title: true,
width: true,
height: true,
},
link: {
href: true,
target: true,
},
attrs: true,
},
decorators: {
before: true,
between: true,
after: true,
},
layout: {
align: {
left: true,
center: true,
right: true,
},
space: {
'0': true,
'1': true,
'2': true,
},
size: {
sm: true,
md: true,
lg: true,
},
columns: {
container: true,
label: true,
wrapper: true,
},
},
conditions: {
conditions: true,
},
},
},
},
})h3
Setting options for h3 element type.
js
// builder.config.js
import { defineConfig } from '@vueform/builder'
export default defineConfig({
element: {
props: {
h3: {
properties: {
type: true,
name: true,
label: true,
tooltip: true,
description: true,
},
options: {
tag: {
html: true,
h1: true,
h2: true,
h3: true,
h4: true,
p: true,
blockquote: true,
img: true,
link: true,
hr: true,
},
content: true,
img: {
src: true,
alt: true,
title: true,
width: true,
height: true,
},
link: {
href: true,
target: true,
},
attrs: true,
},
decorators: {
before: true,
between: true,
after: true,
},
layout: {
align: {
left: true,
center: true,
right: true,
},
space: {
'0': true,
'1': true,
'2': true,
},
size: {
sm: true,
md: true,
lg: true,
},
columns: {
container: true,
label: true,
wrapper: true,
},
},
conditions: {
conditions: true,
},
},
},
},
})h4
Setting options for h4 element type.
js
// builder.config.js
import { defineConfig } from '@vueform/builder'
export default defineConfig({
element: {
props: {
h4: {
properties: {
type: true,
name: true,
label: true,
tooltip: true,
description: true,
},
options: {
tag: {
html: true,
h1: true,
h2: true,
h3: true,
h4: true,
p: true,
blockquote: true,
img: true,
link: true,
hr: true,
},
content: true,
img: {
src: true,
alt: true,
title: true,
width: true,
height: true,
},
link: {
href: true,
target: true,
},
attrs: true,
},
decorators: {
before: true,
between: true,
after: true,
},
layout: {
align: {
left: true,
center: true,
right: true,
},
space: {
'0': true,
'1': true,
'2': true,
},
size: {
sm: true,
md: true,
lg: true,
},
columns: {
container: true,
label: true,
wrapper: true,
},
},
conditions: {
conditions: true,
},
},
},
},
})p
Setting options for p element type.
js
// builder.config.js
import { defineConfig } from '@vueform/builder'
export default defineConfig({
element: {
props: {
p: {
properties: {
type: true,
name: true,
label: true,
tooltip: true,
description: true,
},
options: {
tag: {
html: true,
h1: true,
h2: true,
h3: true,
h4: true,
p: true,
blockquote: true,
img: true,
link: true,
hr: true,
},
content: true,
img: {
src: true,
alt: true,
title: true,
width: true,
height: true,
},
link: {
href: true,
target: true,
},
attrs: true,
},
decorators: {
before: true,
between: true,
after: true,
},
layout: {
align: {
left: true,
center: true,
right: true,
},
space: {
'0': true,
'1': true,
'2': true,
},
size: {
sm: true,
md: true,
lg: true,
},
columns: {
container: true,
label: true,
wrapper: true,
},
},
conditions: {
conditions: true,
},
},
},
},
})quote
Setting options for quote element type.
js
// builder.config.js
import { defineConfig } from '@vueform/builder'
export default defineConfig({
element: {
props: {
quote: {
properties: {
type: true,
name: true,
label: true,
tooltip: true,
description: true,
},
options: {
tag: {
html: true,
h1: true,
h2: true,
h3: true,
h4: true,
p: true,
blockquote: true,
img: true,
link: true,
hr: true,
},
content: true,
img: {
src: true,
alt: true,
title: true,
width: true,
height: true,
},
link: {
href: true,
target: true,
},
attrs: true,
},
decorators: {
before: true,
between: true,
after: true,
},
layout: {
align: {
left: true,
center: true,
right: true,
},
space: {
'0': true,
'1': true,
'2': true,
},
size: {
sm: true,
md: true,
lg: true,
},
columns: {
container: true,
label: true,
wrapper: true,
},
},
conditions: {
conditions: true,
},
},
},
},
})img
Setting options for img element type.
js
// builder.config.js
import { defineConfig } from '@vueform/builder'
export default defineConfig({
element: {
props: {
img: {
properties: {
type: true,
name: true,
label: true,
tooltip: true,
description: true,
},
options: {
tag: {
html: true,
h1: true,
h2: true,
h3: true,
h4: true,
p: true,
blockquote: true,
img: true,
link: true,
hr: true,
},
content: true,
img: {
src: true,
alt: true,
title: true,
width: true,
height: true,
},
link: {
href: true,
target: true,
},
attrs: true,
},
decorators: {
before: true,
between: true,
after: true,
},
layout: {
align: {
left: true,
center: true,
right: true,
},
space: {
'0': true,
'1': true,
'2': true,
},
size: {
sm: true,
md: true,
lg: true,
},
columns: {
container: true,
label: true,
wrapper: true,
},
},
conditions: {
conditions: true,
},
},
},
},
})link
Setting options for link element type.
js
// builder.config.js
import { defineConfig } from '@vueform/builder'
export default defineConfig({
element: {
props: {
link: {
properties: {
type: true,
name: true,
label: true,
tooltip: true,
description: true,
},
options: {
tag: {
html: true,
h1: true,
h2: true,
h3: true,
h4: true,
p: true,
blockquote: true,
img: true,
link: true,
hr: true,
},
content: true,
img: {
src: true,
alt: true,
title: true,
width: true,
height: true,
},
link: {
href: true,
target: true,
},
attrs: true,
},
decorators: {
before: true,
between: true,
after: true,
},
layout: {
align: {
left: true,
center: true,
right: true,
},
space: {
'0': true,
'1': true,
'2': true,
},
size: {
sm: true,
md: true,
lg: true,
},
columns: {
container: true,
label: true,
wrapper: true,
},
},
conditions: {
conditions: true,
},
},
},
},
})divider
Setting options for divider element type.
js
// builder.config.js
import { defineConfig } from '@vueform/builder'
export default defineConfig({
element: {
props: {
divider: {
properties: {
type: true,
name: true,
label: true,
tooltip: true,
description: true,
},
options: {
tag: {
html: true,
h1: true,
h2: true,
h3: true,
h4: true,
p: true,
blockquote: true,
img: true,
link: true,
hr: true,
},
content: true,
img: {
src: true,
alt: true,
title: true,
width: true,
height: true,
},
link: {
href: true,
target: true,
},
attrs: true,
},
decorators: {
before: true,
between: true,
after: true,
},
layout: {
align: {
left: true,
center: true,
right: true,
},
space: {
'0': true,
'1': true,
'2': true,
},
size: {
sm: true,
md: true,
lg: true,
},
columns: {
container: true,
label: true,
wrapper: true,
},
},
conditions: {
conditions: true,
},
},
},
},
})html
Setting options for html element type.
js
// builder.config.js
import { defineConfig } from '@vueform/builder'
export default defineConfig({
element: {
props: {
html: {
properties: {
type: true,
name: true,
label: true,
tooltip: true,
description: true,
},
options: {
tag: {
html: true,
h1: true,
h2: true,
h3: true,
h4: true,
p: true,
blockquote: true,
img: true,
link: true,
hr: true,
},
content: true,
img: {
src: true,
alt: true,
title: true,
width: true,
height: true,
},
link: {
href: true,
target: true,
},
attrs: true,
},
decorators: {
before: true,
between: true,
after: true,
},
layout: {
align: {
left: true,
center: true,
right: true,
},
space: {
'0': true,
'1': true,
'2': true,
},
size: {
sm: true,
md: true,
lg: true,
},
columns: {
container: true,
label: true,
wrapper: true,
},
},
conditions: {
conditions: true,
},
},
},
},
})container
Setting options for container element type.
js
// builder.config.js
import { defineConfig } from '@vueform/builder'
export default defineConfig({
element: {
props: {
container: {
properties: {
type: true,
name: true,
label: true,
tooltip: true,
description: true,
},
data: {
nested: true,
},
decorators: {
before: true,
between: true,
after: true,
},
layout: {
size: {
sm: true,
md: true,
lg: true,
},
columns: {
container: true,
label: true,
wrapper: true,
},
},
conditions: {
conditions: true,
},
},
},
},
})container2
Setting options for container2 element type.
js
// builder.config.js
import { defineConfig } from '@vueform/builder'
export default defineConfig({
element: {
props: {
container2: {
properties: {
type: true,
name: true,
label: true,
tooltip: true,
description: true,
},
data: {
nested: true,
},
decorators: {
before: true,
between: true,
after: true,
},
layout: {
size: {
sm: true,
md: true,
lg: true,
},
columns: {
container: true,
label: true,
wrapper: true,
},
},
conditions: {
conditions: true,
},
},
},
},
})container3
Setting options for container3 element type.
js
// builder.config.js
import { defineConfig } from '@vueform/builder'
export default defineConfig({
element: {
props: {
container3: {
properties: {
type: true,
name: true,
label: true,
tooltip: true,
description: true,
},
data: {
nested: true,
},
decorators: {
before: true,
between: true,
after: true,
},
layout: {
size: {
sm: true,
md: true,
lg: true,
},
columns: {
container: true,
label: true,
wrapper: true,
},
},
conditions: {
conditions: true,
},
},
},
},
})container4
Setting options for container4 element type.
js
// builder.config.js
import { defineConfig } from '@vueform/builder'
export default defineConfig({
element: {
props: {
container4: {
properties: {
type: true,
name: true,
label: true,
tooltip: true,
description: true,
},
data: {
nested: true,
},
decorators: {
before: true,
between: true,
after: true,
},
layout: {
size: {
sm: true,
md: true,
lg: true,
},
columns: {
container: true,
label: true,
wrapper: true,
},
},
conditions: {
conditions: true,
},
},
},
},
})list
Setting options for list element type.
js
// builder.config.js
import { defineConfig } from '@vueform/builder'
export default defineConfig({
element: {
props: {
list: {
properties: {
type: true,
name: true,
label: true,
},
options: {
initial: true,
min: true,
max: true,
controls: {
add: true,
remove: true,
sort: true,
},
addText: true,
storeOrder: true,
},
data: {
default: true,
submit: true,
},
decorators: {
tooltip: true,
description: true,
before: true,
between: true,
after: true,
},
layout: {
size: {
sm: true,
md: true,
lg: true,
},
columns: {
container: true,
label: true,
wrapper: true,
},
},
validation: {
fieldName: true,
validation: {
array: true,
distinct: true,
gt: true,
gte: true,
lt: true,
lte: true,
max: true,
min: true,
nullable: true,
required: true,
size: true,
},
},
conditions: {
conditions: true,
},
},
},
},
})nestedList
Setting options for nestedList element type.
js
// builder.config.js
import { defineConfig } from '@vueform/builder'
export default defineConfig({
element: {
props: {
nestedList: {
properties: {
type: true,
name: true,
label: true,
},
options: {
initial: true,
min: true,
max: true,
controls: {
add: true,
remove: true,
sort: true,
},
addText: true,
storeOrder: true,
},
data: {
default: true,
submit: true,
},
decorators: {
tooltip: true,
description: true,
before: true,
between: true,
after: true,
},
layout: {
size: {
sm: true,
md: true,
lg: true,
},
columns: {
container: true,
label: true,
wrapper: true,
},
},
validation: {
fieldName: true,
validation: {
array: true,
distinct: true,
gt: true,
gte: true,
lt: true,
lte: true,
max: true,
min: true,
nullable: true,
required: true,
size: true,
},
},
conditions: {
conditions: true,
},
},
},
},
})
