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

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

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

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