LittleCub Forms

Light-Weight, High-Performance & Easily Customizable

Control for list of items with same data structure and as the default control mapped to array data type.

List of supported JSON schema keywords.

List of supported LittleCub config options.

Example 1 :

Array control with only array data parameter.

Native API

var arrayControl1 = LittleCub(["Giant Panda","Brown Bear","Polar Bear","Blue Bear"], null, null, document.getElementById('array-control-1'));

jQuery API

var arrayControl1j = $('#array-control-1-j').lc(["Giant Panda","Brown Bear","Polar Bear","Blue Bear"]);

Example 2 :

Array control with data and schema parameters.

Native API

var arrayControl2 = LittleCub(["Giant Panda","Brown Bear","Polar Bear","Blue Bear"], null, {
    "type" : "array",
    "title" : "Bears",
    "items" : {
        "type" : "string",
        "title" : "Your Favorite Bear"
    }
}, document.getElementById('array-control-2'));

jQuery API

var arrayControl2j = $('#array-control-2-j').lc(["Giant Panda","Brown Bear","Polar Bear","Blue Bear"], null, {
    "type" : "array",
    "title" : "Bears",
    "items" : {
        "type" : "string",
        "title" : "Your Favorite Bear"
    }
});

Example 3 :

Array control with data, configs and schema parameters.

Native API

var arrayControl3 = LittleCub(["Giant Panda","Brown Bear","Polar Bear","Blue Bear"], {
    "type" : "array",
    "items" : {
        "size" : 10
    }
}, {
    "type" : "array",
    "title" : "Bears",
    "minItems" : 2,
    "maxItems" : 5,
    "uniqueItems" : true,
    "items" : {
        "type" : "string",
        "title" : "Your Favorite Bear"
    }
}, document.getElementById('array-control-3'));

jQuery API

var arrayControl3j = $('#array-control-3-j').lc(["Giant Panda","Brown Bear","Polar Bear","Blue Bear"], {
    "type" : "array",
    "items" : {
        "size" : 10
    }
}, {
    "type" : "array",
    "title" : "Bears",
    "minItems" : 2,
    "maxItems" : 5,
    "uniqueItems" : true,
    "items" : {
        "type" : "string",
        "title" : "Your Favorite Bear"
    }
});

Example 4 :

Array control with configs and schema parameters that have various options.

Native API

var arrayControl4 = LittleCub([], {
    "type" : "array",
    "items" : {
        "type" : "object",
        "controls" : {
            "name" : {
                "type" : "text",
                "size" : 30
            },
            "color" : {
                "type" : "select"
            }
        }
    }
}, {
    "type" : "array",
    "title" : "Bears",
    "minItems" : 2,
    "maxItems" : 5,
    "uniqueItems" : true,
    "items" : {
        "type" : "object",
        "properties" : {
            "name" : {
                "type" : "string"
            },
            "color" : {
                "type" : "string",
                "enum" : ["brown", "white", "grey","black"]
            }
        },
        "required" : ["name", "color"]
    }
}, document.getElementById('array-control-4'));

jQuery API

var arrayControl4j = $('#array-control-4-j').lc([], {
    "type" : "array",
    "items" : {
        "type" : "object",
        "controls" : {
            "name" : {
                "type" : "text",
                "size" : 30
            },
            "color" : {
                "type" : "select"
            }
        }
    }
}, {
    "type" : "array",
    "title" : "Bears",
    "minItems" : 2,
    "maxItems" : 5,
    "uniqueItems" : true,
    "items" : {
        "type" : "object",
        "properties" : {
            "name" : {
                "type" : "string"
            },
            "color" : {
                "type" : "string",
                "enum" : ["brown", "white", "grey","black"]
            }
        },
        "required" : ["name", "color"]
    }
});