Navigation
Victoria Baker
Santa Ana, CA
My account

Alpaca - Controls

Statistics Invoices Schedule
Home Alpaca Controls
Support
Settings
Account security Analytics Accessibility
All settings
Checkbox inputs
Checkbox inputs variations
Basic 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?'
    }
});
JavaScript
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.

false
Show source code 
// Display only mode
$('#alpaca-checkbox-static').alpaca({
    data: false,
    view: 'bootstrap-display',
    options: {
        label: 'Registered?'
    }
});
JavaScript
Styled checkbox

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. Supports 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();
    }
});
JavaScript
Disabled mode

The following example demonstrates styled checkbox input in disabled mode. Validation is enabled by default and requires proper options added to checkbox configuration. Supports 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();
    }
});
JavaScript
Switchery toggles

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() {

        // 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('.form-check').addClass('form-check-switchery');
    }
});
JavaScript
Disabled mode

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('.form-check').addClass('form-check-switchery');
    }
});
JavaScript
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']
    }
});
JavaScript
Styled checkbox list

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. Supports 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();
    }
});
JavaScript
Radio buttons
Radio button variations
Basic 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.

Pick your favorite color

Show source code 
// 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']
    }
});
JavaScript
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.

Show source code 
// 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
    }
});
JavaScript
Styled radios

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. Supports 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'
        });
    }
});
JavaScript
Disabled mode

The following example demonstrates styled radio button in disabled mode. Validation is enabled by default and requires proper options added to checkbox configuration. Supports 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'
        });
    }
});
JavaScript
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.

Guess my favorite ice cream?

Show source code 
// 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']
    }
});
JavaScript
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.

Show source code 
// 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
    }
});
JavaScript
Bootstrap Tokenfield
Display tagged elements
Tokenfield

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.

marty×
doc×
george×
biff×
Show source code 
// 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'
});
JavaScript
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.

marty,doc,george,biff
Show source code 
// 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'
});
JavaScript