Schema

The schema contains the fields 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.

Available field types

Last updated