VueJS Generators
GitHubNPMJSFiddleCodePen
develop
develop
  • Getting Started
  • Installation
  • Usage
    • Styling
  • Component
    • Schema
    • Model
    • Options
    • Events
  • Fields
    • Field Properties
      • Inside Buttons
    • Core Fields
      • checkbox
      • checklist
      • input
      • label
      • radios
      • select
      • submit
      • textArea
    • Optional Fields
      • cleave
      • dateTimePicker
      • googleAddress
      • image
      • masked
      • noUiSlider
      • pikaday
      • selectEx
      • rangeSlider
      • spectrum
      • staticMap
      • switch
      • vueMultiSelect
    • Custom Fields
  • Groups
  • Validation
    • Built in Validators
    • Custom Validators
    • Handling Validation Events
Powered by GitBook
On this page
  • Examples
  • Simple form without groups
  • Simple form with groups

Was this helpful?

  1. Component

Schema

PreviousComponentNextModel

Last updated 6 years ago

Was this helpful?

The schema contains the of the form, optionally in groups.

Examples

Simple form without groups

This simple form will have a text input for Name and a numeric input for Age.

{ 
    fields: [
        {
            type: "input",
            inputType: "text",
            label: "Name",
            model: "name"
        },
        {
            type: "input",
            inputType: "number",
            id: "current_age",
            label: "Age",
            model: "age"
        }
    ]
}

Simple form with groups

This form will have two sections:

  • A "User Details" section, with a text input for username and an email input

  • A "Preferences" section, with a select input for color and a numeric input for timeout

Sections are currently output as <fieldset> elements, with a <legend>.

{ 
    groups: [
        {
            legend: "User Details",
            fields: [
                {
                    type: "input",
                    inputType: "text",
                    label: "Username",
                    model: "username"
                },
                {
                    type: "input",
                    inputType: "email",
                    id: "email",
                    label: "Email Address",
                    model: "email"
                }
            ]
        },
        {
            legend: "Preferences",
            fields: [
                {
                    type: "select",
                    label: "Color",
                    model: "color",
                    values: [
                        "Red",
                        "Green",
                        "Blue"
                    ]
                },
                {
                    type: "input",
                    inputType: "number",
                    id: "timeout",
                    label: "Timeout in Seconds",
                    model: "timeout"
                }
            ]
        }
    ]
}

It is also possible to have a schema with some fields grouped and some ungrouped:

{ 
    fields: [
        {
            type: "input",
            inputType: "text",
            label: "Name",
            model: "name"
        }
    ],
    groups: [
        {
            legend: "User Details",
            fields: [
                {
                    type: "input",
                    inputType: "number",
                    id: "current_age",
                    label: "Age",
                    model: "age"
                }
            ]
        }
    ]
}

This form would have a text input for Name, followed by a fieldset for "User Details", containing a numeric input for Age.

Note: any ungrouped fields will be output first, followed by any groups.

fields
Available field types