LittleCub Forms

Light-Weight, High-Performance & Easily Customizable

Control for data with list of options as radio button group. Also this is the default control if schema enum properties has three or less array elements.

List of supported JSON schema keywords.

List of supported LittleCub config options.

Example 1 :

Radio Button Group control with only schema parameter.

Native API

var radioControl1 = LittleCub("giant panda", null, {
    "type" : "string",
    "enum" : ["giant panda", "polar bear", "grizzly bear"]
}, document.getElementById('radio-control-1'));

jQuery API

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

Example 2 :

Radio Button Group control with data and schema parameters.

Native API

var radioControl2 = LittleCub("giant panda", {
    "type" : "radio"
}, {
    "type" : "string",
    "enum" : ["giant panda", "polar bear", "grizzly bear", "atlas bear", "blue bear"]
}, document.getElementById('radio-control-2'));

jQuery API

var radioControl2j = $('#radio-control-2-j').lc("giant panda", {
    "type" : "radio"
}, {
    "type" : "string",
    "enum" : ["giant panda", "polar bear", "grizzly bear", "atlas bear", "blue bear"]
});

Example 3 :

Radio Button Group control with data, configs and schema parameters.

Native API

var radioControl3 = LittleCub("giant panda", {
    "type" : "radio",
    "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('radio-control-3'));

jQuery API

var radioControl3j = $('#radio-control-3-j').lc("giant panda", {
    "type" : "radio",
    "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 4 :

Radio Button Group control for required integer data and rendered with the horizontal theme.

Native API

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


jQuery API

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