A field in the schema defines an input element to a value of model. For example, if you want to edit the model.selections value with a select field, you have to create a field with select type, what looks like this:

{
    type: "select",
    label: "Selections",
    model: "selections"
},

Each field has its own options, so be sure to check out their documentations. For example, input field need an inputType to be specified as well.

{
    type: "input",
    inputType: "text",
    label: "Name",
    model: "name"
},

Available fields

​Core fields​

These fields are available in the core version of VueFormGenerator.

• ​checkbox - Checkbox for boolean values

• ​checklist - Checkbox list to select multiple values

• ​input - Common input field NEW!

• ​label - Static text (e.g. timestamp, creation time...etc)

• ​radios - Radio buttons to select NEW!

• ​select - Select list

• ​submit - This is a simple submit button

• ​textArea - Text area field

​Optional fields​

These fields are available in the full version of VueFormGenerator. Some of these also have external dependency.

• ​cleave - Format input text content when you are typing

• ​dateTimePicker - datetime picker with bootstrap-datetimepicker component

• ​googleAddress - Format input text content when you are typing

• ​image - Image select field (URL or upload in base64 string)

• ​masked - Masked text input field with maskedinput component

• ​noUiSlider - Lightweight JavaScript range slider

• ​pikaday - A refreshing JavaScript Datepicker

• ​selectEx - select list with the bootstrap-select component

• ​slider - pretty range slider with ion.rangeSlider component

• ​spectrum - Color picker with "The No Hassle" Spectrum jQuery Colorpicker component

• ​staticMap - Display a static map from Google Maps.

• ​switch - Switch field (toggle two values (on/off, yes/no, active/inactive)

• ​vueMultiSelect - Probably the most complete selecting solution for Vue.js

​Custom fields​

You can create custom fields too. Check here how you can do it.