Checkbox inputs Checkbox inputs variations
The following example demonstrates checkbox input type with both field label and right label. Validation is enabled by default and requires proper options added to checkbox configuration.پشتیبانیs all available input-specific options.
Show source code ←// Checkbox with label
$("#alpaca-checkbox-label").alpaca({
"data": true,
"options": {
"label": "Question:",
"rightLabel": "Do you like Alpaca?"
}
});The following example demonstrates checkbox input type in display-only mode. Validation is enabled by default and requires proper options added to checkbox configuration.پشتیبانیs all available input-specific options.
Show source code ←// Display only mode
$("#alpaca-checkbox-static").alpaca({
"data": false,
"view": "bootstrap-display",
"options": {
"label": "Registered?"
}
});The following example demonstrates checkbox input type with custom style added by Uniform plugin. Validation is enabled by default and requires proper options added to checkbox configuration.پشتیبانیs all available input-specific options.
Show source code ←// Styled checkbox
$("#alpaca-checkbox-styled").alpaca({
"data": true,
"options": {
"label": "Question:",
"rightLabel": "Do you like Alpaca?",
"fieldClass": "checkbox-styled"
},
"postRender": function(control) {
$('.checkbox-styled').find('input[type=checkbox]').uniform();
}
});The following example demonstrates styled checkbox input in disabled mode. Validation is enabled by default and requires proper options added to checkbox configuration.پشتیبانیs all available input-specific options.
Show source code ←// Disabled checkbox
$("#alpaca-checkbox-styled-disabled").alpaca({
"data": true,
"options": {
"label": "Question:",
"rightLabel": "Do you like Alpaca?",
"fieldClass": "checkbox-styled-disabled",
disabled: true
},
"postRender": function(control) {
$('.checkbox-styled-disabled').find('input[type=checkbox]').uniform();
}
});The following example demonstrates checkbox input type displayed as a toggle. Both Uniform and Switchery are custom additions, Alpaca doesn't support these components by default and requires custom configuraiton.
Show source code ←// Switchery toggle
$("#alpaca-switchery").alpaca({
"data": true,
"options": {
"label": "Question:",
"rightLabel": "Do you like Alpaca?",
"fieldClass": "switchery-demo"
},
"postRender": function(control) {
// Init Switchery
var elems = Array.prototype.slice.call(document.querySelectorAll('.switchery-demo input[type=checkbox]'));
elems.forEach(function(html) {
var switchery = new Switchery(html);
});
// Add proper spacing
$('.switchery-demo').find('.checkbox').addClass('checkbox-switchery');
}
});The following example demonstrates checkbox input type displayed as a toggle, in disabled mode. Both Uniform and Switchery are custom additions, Alpaca doesn't support these components by default and requires custom configuraiton.
Show source code ←// Switchery toggle
$("#alpaca-switchery-disabled").alpaca({
"data": true,
"options": {
"label": "Question:",
"rightLabel": "Do you like Alpaca?",
"fieldClass": "switchery-disabled-demo",
"disabled": true
},
"postRender": function(control) {
// Init Switchery
var elems = Array.prototype.slice.call(document.querySelectorAll('.switchery-disabled-demo input[type=checkbox]'));
elems.forEach(function(html) {
var switchery = new Switchery(html);
});
// Add proper spacing
$('.switchery-disabled-demo').find('.checkbox').addClass('checkbox-switchery');
}
});The following example demonstrates checkbox list used for multiple values provided as an array. Validation is enabled by default and requires proper options added to checkbox configuration.پشتیبانیs all available input-specific options.
Show source code ←// Basic checkbox list
$("#alpaca-checkbox-list").alpaca({
"data": ["sandwich", "cookie", "drink"],
"schema": {
"type": "array",
"enum": ["sandwich", "chips", "cookie", "drink"]
},
"options": {
"type": "checkbox",
"label": "What would you like with your order?",
"optionLabels": ["A Sandwich", "Potato Chips", "A Cookie", "Soft Drink"]
}
});The following example demonstrates multiple checkbox list with custom style added by Uniform plugin. Validation is enabled by default and requires proper options added to checkbox configuration.پشتیبانیs all available input-specific options.
Show source code ←// Styled checkbox list
$("#alpaca-checkbox-list-styled").alpaca({
"data": ["sandwich", "cookie", "drink"],
"schema": {
"type": "array",
"enum": ["sandwich", "chips", "cookie", "drink"]
},
"options": {
"type": "checkbox",
"label": "What would you like with your order?",
"optionLabels": ["A Sandwich", "Potato Chips", "A Cookie", "Soft Drink"],
"fieldClass": "checkbox-styled-list"
},
"postRender": function(control) {
$('.checkbox-styled-list').find('input[type=checkbox]').uniform();
}
});Radio buttons Radio button variations
The following example demonstrates radio button field with more than 3 options and custom option labels. Validation is enabled by default and requires proper options added to checkbox configuration.پشتیبانیs all available input-specific options.
// Basic radios
$("#alpaca-radio-basic").alpaca({
"data": "green",
"options": {
"type": "radio",
"label": "Favorite Color",
"helper": "Pick your favorite color",
"optionLabels": {
"red": "Red",
"green": "Green",
"blue": "Blue",
"white": "White",
"black": "Black"
}
},
"schema": {
"required": true,
"enum": ["red", "green", "blue", "white", "black"]
}
});The following example demonstrates radio button field with set of options in disabled mode. Validation is enabled by default and requires proper options added to checkbox configuration.پشتیبانیs all available input-specific options.
// Disabled mode
$("#alpaca-radio-basic-disabled").alpaca({
"data": "Jimi Hendrix",
"schema": {
"enum": ["Jimi Hendrix", "Mark Knopfler", "Joe Satriani", "Eddie Van Halen", "Orianthi"]
},
"options": {
"type": "radio",
"label": "Who is your favorite guitarist?",
"vertical": true,
"disabled": true
}
});The following example demonstrates radio button field with custom style added by Uniform plugin. Validation is enabled by default and requires proper options added to checkbox configuration.پشتیبانیs all available input-specific options.
Show source code ←// Styled radios
$("#alpaca-radio-styled").alpaca({
"data": "Jimi Hendrix",
"schema": {
"enum": ["Jimi Hendrix", "Mark Knopfler", "Joe Satriani", "Eddie Van Halen", "Orianthi"]
},
"options": {
"type": "radio",
"label": "Who is your favorite guitarist?",
"fieldClass": "radio-styled-demo",
"vertical": true
},
"postRender": function(control) {
$('.radio-styled-demo').find('input[type=radio]').uniform({
radioClass: 'choice'
});
}
});The following example demonstrates styled radio button in disabled mode. Validation is enabled by default and requires proper options added to checkbox configuration.پشتیبانیs all available input-specific options.
Show source code ←// Disabled mode
$("#alpaca-radio-styled-disabled").alpaca({
"data": "Jimi Hendrix",
"schema": {
"enum": ["Jimi Hendrix", "Mark Knopfler", "Joe Satriani", "Eddie Van Halen", "Orianthi"]
},
"options": {
"type": "radio",
"label": "Who is your favorite guitarist?",
"vertical": true,
"fieldClass": "radio-styled-disabled-demo",
"disabled": true
},
"postRender": function(control) {
$('.radio-styled-disabled-demo').find('input[type=radio]').uniform({
radioClass: 'choice'
});
}
});The following example demonstrates radio button with validation options and requirements. Validation engine automatically displays multiple notifications. To use, simply set required option to true in configuration.
// Required radios
$("#alpaca-radio-required").alpaca({
"data": "Coffee2",
"options": {
"label": "Ice cream",
"helper": "Guess my favorite ice cream?",
"optionLabels": ["Vanilla Flavor", "Chocolate Flavor", "Coffee Flavor"]
},
"schema": {
"required": true,
"enum": ["Vanilla", "Chocolate", "Coffee"]
}
});A radio field that uses the removeDefaultNone option to remove the option for the end user to select None from the list of available options. In addition, the vertical option is specified to inform the field to render vertically.
// Options
$("#alpaca-radio-options").alpaca({
"data": "Jimi Hendrix",
"schema": {
"enum": ["Jimi Hendrix", "Mark Knopfler", "Joe Satriani", "Eddie Van Halen", "Orianthi"]
},
"options": {
"type": "radio",
"label": "Who is your favorite guitarist?",
"removeDefaultNone": true,
"vertical": true
}
});Bootstrap Tokenfield Display tagged elements
The token field. This provides an implementation of the Bootstrap TokenField plugin on top of a text field to allow for autocomplete and typeahead tokens in a comma (or alternative separator) delimited string.
// Basic setup
$("#alpaca-tokenfield").alpaca({
"schema": {
"title": "Character Names",
"type": "string"
},
"options": {
"type": "token",
"tokenfield": {
"autocomplete": {
"source": ["marty", "doc", "george", "biff", "lorraine", "mr. strickland"],
"delay": 100
},
"showAutocompleteOnFocus": true
}
},
"data": "marty,doc,george,biff"
});Here is a token field that lets you pick character first names from the movie Back to the Future, displayed in display-only mode. Tokenfield also supports jQuery UI's autocomplete extension as seen in previous demo.
// Display only mode
$("#alpaca-tokenfield-static").alpaca({
"schema": {
"title": "Character Names",
"type": "string"
},
"options": {
"type": "token",
"tokenfield": {
"autocomplete": {
"source": ["marty", "doc", "george", "biff", "lorraine", "mr. strickland"],
"delay": 100
},
"showAutocompleteOnFocus": true
}
},
"data": "marty,doc,george,biff",
"view": "bootstrap-display"
});