Navigation
Victoria Baker
 Santa Ana, CA

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?'
    }
});
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?'
    }
});
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();
    }
});
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();
    }
});
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');
    }
});
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');
    }
});
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']
    }
});
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();
    }
});
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.

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']
    }
});
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
    }
});
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'
        });
    }
});
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'
        });
    }
});
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.

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']
    }
});
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
    }
});
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.

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'
});
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.

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'
});