Checkbox inputs
Checkbox inputs variationsBasic checkbox
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. Supports 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?'
}
});
Display only mode
The following example demonstrates checkbox input type in display-only mode. Validation is enabled by default and requires proper options added to checkbox configuration. Supports all available input-specific options.
Show source code
// Display only mode
$('#alpaca-checkbox-static').alpaca({
data: false,
view: 'bootstrap-display',
options: {
label: 'Registered?'
}
});
Basic checkbox list
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. Supports 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']
}
});
Disabled checkbox list
The following example demonstrates checkbox button field with set of options in disabled mode. Validation is enabled by default and requires proper options added to checkbox configuration. Supports all available input-specific options.
// Basic checkbox list
$('#alpaca-checkbox-list-disabled').alpaca({
data: ['sandwich', 'cookie', 'drink'],
schema: {
type: 'array',
enum: ['sandwich', 'chips', 'cookie', 'drink']
},
options: {
type: 'checkbox',
disabled: true,
label: 'What would you like with your order?',
optionLabels: ['A Sandwich', 'Potato Chips', 'A Cookie', 'Soft Drink']
}
});
Radio buttons
Radio button variationsBasic radios
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. Supports 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']
}
});
Disabled mode
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. Supports 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
}
});
Required radios
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']
}
});
Options
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 elementsTokenfield
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',
focus: false,
tokenfield: {
autocomplete: {
source: ['marty', 'doc', 'george', 'biff', 'lorraine', 'mr. strickland'],
delay: 100
},
showAutocompleteOnFocus: true
}
},
data: 'marty,doc,george,biff'
});
Display only mode
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',
focus: false,
tokenfield: {
autocomplete: {
source: ['marty', 'doc', 'george', 'biff', 'lorraine', 'mr. strickland'],
delay: 100
},
showAutocompleteOnFocus: true
}
},
data: 'marty,doc,george,biff',
view: 'bootstrap-display'
});