Checkbox group control for data with list of options.

List of supported JSON schema keywords.

List of supported LittleCub config options.

Example 1 :

Select control with data, configs and schema parameters.

Native API

var selectControl1 = LittleCub("giant panda", {
    "type" : "checkboxgroup"
}, {
    "type" : "string",
    "enum" : ["giant panda", "polar bear"]
}, document.getElementById('select-control-1'));

jQuery API

var selectControl1j = $('#select-control-1-j').lc("giant panda", {
    "type" : "checkboxgroup"
}, {
    "type" : "string",
    "enum" : ["giant panda", "polar bear"]
});

Example 2 :

Select control for required string data with option labels.

Native API

var selectControl2 = LittleCub("giant panda", {
    "type" : "checkboxgroup",
    "label" : "Pick your favorite bear:",
    "required" : true,
    "options" : ["Giant panda", "Polar bear", "Grizzly bear", "Atlas bear", "Blue bear"]
}, {
    "type" : "string",
    "enum" : ["giant panda", "polar bear", "grizzly bear", "atlas bear", "blue bear"]
}, document.getElementById('select-control-2'));

jQuery API

var selectControl2j = $('#select-control-2-j').lc("giant panda", {
    "type" : "checkboxgroup",
    "label" : "Pick your favorite bear:",
    "required" : true,
    "options" : ["Giant panda", "Polar bear", "Grizzly bear", "Atlas bear", "Blue bear"]
}, {
    "type" : "string",
    "enum" : ["giant panda", "polar bear", "grizzly bear", "atlas bear", "blue bear"]
});

Example 3 :

Select control for required integer data and rendered with the option labels.

Native API

var selectControl3 = LittleCub(5, {
    "type" : "select",
    "label" : "Pick your favorite number:",
    "required" : true,
    "options" : {
        "1" : "One",
        "2" : "Two",
        "3" : "Three",
        "4" : "Four",
        "5" : "Five"
    }
}, {
    "type" : "integer",
    "enum" : [1, 2, 3, 4, 5]
}, document.getElementById('select-control-3'));

jQuery API

var selectControl3j = $('#select-control-3-j').lc(5, {
    "type" : "select",
    "label" : "Pick your favorite number:",
    "required" : true,
    "options" : {
        "1" : "One",
        "2" : "Two",
        "3" : "Three",
        "4" : "Four",
        "5" : "Five"
    }
}, {
    "type" : "string",
    "enum" : [1, 2, 3, 4, 5]
});

Example 4 :

Select control with multiple selections.

Native API

var selectControl4 = LittleCub([2,5], {
    "type" : "select",
    "label" : "Pick your favorite number:",
    "required" : true,
    "multiple" : true,
    "size" : 4,
    "options" : {
        "1" : "One",
        "2" : "Two",
        "3" : "Three",
        "4" : "Four",
        "5" : "Five"
    }
}, {
    "type" : "array",
    "minItems": 2,
    "maxItems": 3,
    "items" : {
        "type" : "integer",
        "enum" : [1, 2, 3, 4, 5]
    }
}, document.getElementById('select-control-4'));

jQuery API

var selectControl4j = $('#select-control-4-j').lc([2,5], {
    "type" : "select",
    "label" : "Pick your favorite number:",
    "required" : true,
    "multiple" : true,
    "size" : 4,
    "options" : {
        "1" : "One",
        "2" : "Two",
        "3" : "Three",
        "4" : "Four",
        "5" : "Five"
    }
}, {
    "type" : "array",
    "minItems": 2,
    "maxItems": 3,
    "items" : {
        "type" : "integer",
        "enum" : [1, 2, 3, 4, 5]
    }
});