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.

results matching ""

    No results matching ""