Skip to content
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
61 lines (47 sloc) 2.44 KB


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.

You can’t perform that action at this time.