Fields

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.